JavaScript模块化学习基础

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

一、原始写法

模块就是实现特定功能的一组方法。

不同函数简单放在一起就算一个模块

如：

function func1(){
//执行代码
}
function func2(){
//执行代码
}

上面函数func1和func2组成了一个模块，使用的时候直接调用即可；

缺点：污染全局变量，无法保证不与其他模块变量名发生冲突，而且模块之间看不出直接关系

二、对象写法

为了解决上面的缺点，可以把模块写成一个对象，所有模块成员放在对象里面。

如：

var module=new Object({
_count:0,
func1:function(){
//执行代码
},
func2:function(){
//执行代码
}
});

上面，func1和func2函数封装在module对象里，使用的时候就是调用这个对象的属性，如：module.func1();

缺点：这样的写法暴露了所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部_count值，如：module._count=3;

三、立即执行函数写法

使用立即执行函数可以达到不暴露私有成员的目的

如：

var module=(function(){
var _count=0;
var _testVar=1;
var func1=function(){
console.log('func1_'+this._count);
};
var func2=function(){
console.log('func2_'+_count);
};
return {
func1:func1,
func2:func2,
_count
};
})();
module._count=2;
module.func1();
module.func2();

使用上面写法，外部代码无法调用到_testVar变量，console.log(module._testVar);//undefined

注意上面写法，外部可以调用func1和func2及_count，是函数以对象形式返回了变量；

改变了内部变量_count值，如果内部函数func1不使用this，则不能输出后面改变了_count的值

上面就是JavaScript模块的基本写法

四、放大模式

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用“放大模式”(augmentation)

如：

var module=(function(mod){
mod.func3=function(){
console.log('func3_'+this._count);
}
return mod;
})(module);
module.func3();

五、宽放大模式

浏览器中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载，如果采用上面的写法，没有先加载之前的模块，而是直接先加载了上面四中的模块，就会报空对象的错，这时就要采用“宽放大模式”。

如：

var module=(function(mod){
mod.func3=function(){
console.log('func3_'+this._count);
}
return mod;
})(window.module||{});
module.func3();

与“放大模式”相比，“宽放大模式”就是“立即执行函数”的参数可以是空对象。

六、输入全局变量

 独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互

为了在模块内调用全局变量，必须显示的将其他变量输入模块

如：调用JQuery

var moduleJQuery=(function($){
var func=function(){
 $('#txt').val('Text');
};
return {
func:func
};
})(jQuery);
moduleJQuery.func();