JavaScript模块化学习基础

时间:2022-09-03 01:28:23

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();