Javascript前端模块化开发 教程

前端模块化开发 教程|前端开发者

一、原始写法

[code]function m1(){
//…
}

function m2(){
//…
}[/code]

二、对象写法

[code]var module1 = new Object({
_count : 0,
m1 : function (){
//…
},
m2 : function (){
//…
}
});[/code]

[code]module1.m1();[/code]

[code]module1._count = 5;[/code]

三、立即执行函数写法

[code]var module1 = (function(){
var _count = 0;
var m1 = function(){
//…
};
var m2 = function(){
//…
};
return {
m1 : m1,
m2 : m2
};
})();[/code]

[code]console.info(module1._count);//undefined[/code]

四、放大模式

[code]var module1 = (function(mod){
mod.m3 = function (){
//…
};
return mod;
})(module1);[/code]

五、宽放大模式（Loose augmentation）

[code]var module1 = (function (mod){
//…
return mod;
})(window.module1 || {});[/code]

六、输入全局变量

[code]var module1 = (function ($, YAHOO){
//…
})(jquery, YAHOO);[/code]

七、模块的规范

八、CommonJS

[code]var math = require(‘math’);[/code]

[code]var math = require(‘math’);
math.add(2,3);//5[/code]

九、浏览器环境

[code]var math = require(‘math’);
math.add(2, 3);[/code]

十、AMD

[code]require([module], callback);[/code]

[code]require([‘math’], function(math){
math.add(2, 3);
});[/code]

十一、为什么要用require.js？

[code]<script src=”1.js”></script>
<script src=”2.js”></script>
<script src=”3.js”></script>
<script src=”4.js”></script>
<script src=”5.js”></script>
<script src=”6.js”></script>[/code]

（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护；

十二、require.js的加载

[code]<script src=”js/require.js”></script>[/code]

[code]<script src=”js/require.js” defer async=”true” ></script>[/code]

[code]<script src=”js/require.js” data-main=”js/main”></script>[/code]

十三、主模块的写法

[code]//main.js
alert(“加载成功！”);[/code]

[code]//main.js
require([‘moduleA’, ‘moduleB’, ‘moduleC’], function (moduleA, moduleB, moduleC){
//some code here
});[/code]

[code]require([‘jquery’, ‘underscore’, ‘backbone’], function ($, _, Backbone){
//some code here
});[/code]

十四、模块的加载

[code]require.config({
paths:{
“jquery”: “jquery.min”,
“underscore”: “underscore.min”,
“backbone”: “backbone.min”
}
});[/code]

[code]require.config({
paths:{
“jquery”: “lib/jquery.min”,
“underscore”: “lib/underscore.min”,
“backbone”: “lib/backbone.min”
}
});[/code]

[code]require.config({
baseUrl: “js/lib”,
paths:{
“jquery”: “jquery.min”,
“underscore”: “underscore.min”,
“backbone”: “backbone.min”
}
});[/code]

[code]require.config({
paths:{
“jquery”: “https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min&quot;
}
});[/code]

十五、AMD模块的写法

[code]//math.js
define(function(){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});[/code]

[code]//main.js
require([‘math’], function (math){
alert(math.add(1,1));
});[/code]

[code]define([‘myLib’], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo:foo
};
});[/code]

十六、加载非规范的模块

[code]require.config({
shim:{
‘underscore’:{
exports:’_’
},
‘backbone’: {
deps:[‘underscore’, ‘jquery’],
exports:’Backbone’
}
}
});[/code]

（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
（2）deps数组，表明该模块的依赖性。

[code]shim:{
‘jquery.scroll’:{
deps:[‘jquery’],
exports:’jQuery.fn.scroll’
}
}[/code]

十七、require.js插件

[code]require([‘domready!’], function(doc){
//called once the DOM is ready
});[/code]

[code]define([
‘text!review.txt’,
‘image!cat.jpg’
],

function(review,cat){

console.log(review);

document.body.appendChild(cat);

}

);

前端模块化开发 教程|网站前端开发

https://www.rokub.com