JavaScript模块化

js通过立即执行函数可以进行模块化。

var myModule = (function(){
     //私有成员
     var ...
     
     return {
           //公有成员
     };      
})();

但是涉及复杂模块依赖关系上述方式就需要改造了。

 

require.js是遵循AMD规范的JavaScript模块化库，。下面展示了如何使用require.js进行js模块化。

1.定义一个模块mod1.js

define(function(){
    return {a: 3};
});

 

2.定义需要依赖的模块mod2.js

define(['mod'],function(m1){
    var a, b = 2, c = 3;
    a = c*m1.a;
    return {
        a: a,
        b: b
    };
});

define方法用来定义模块，有两个参数。第一个参数是该模块依赖的模块数组；第二个参数是一个回调函数，在函数中定义模块，return的部分是模块暴露出来的。回调函数的参数对应指向依赖模块数组。

 

3.定义执行入口main.js

require(['mod2'],function(m2){
     alert(m2.a*m2.b);
});

require定义了Javascript从哪里开始执行，如3执行回调函数，发现需要引用mod2就会加载mod2，同理，加载mod1。

如此，require.js避免了多个模块依赖时，复杂的加载顺序问题。

 

参考：

慕课网阿当大话西游之WEB组件