模块化开发简介之模块基础写法
在模块化开发简介里,模块化的基础写法有助于我们更好的理解模块化这个概念。只要是稍微有点JS语法基础的同学基本都能看懂。关于模块化的其他相关知识,在后续的文章里会写到。
模块的写法主要分为下面几个部分,每往下就进阶一点点。
- 普通方法。
- 对象的写法。
- 立即执行函数。
- 放大模式。
- 宽放大模式。
- 输入全局变量。
一、普通方法。也就是最基础最常见的函数方法。只要把不同的函数简单的放在一起,就可以算是一个模块了。
function a() {
console.log("a");
}
function b() {
console.log("b");
}
a();
b();
优点:直接调用
缺点:变量可能会出现重复造成的污染,并且无法进行结构性分类
二、对象的写法。为了解决上面的缺点,我们可以把模块写成一个对象,所有的模块成员(方法或者变量之类的)都放到这个对象里。
var obj={
_a:false,
a:function () {
console.log("a");
},
b:function () {
console.log("b");
}
};
obj.a();
obj.b();
obj._a=3;
优点:变量不会被直接污染,并且易于分类描述内容
缺点:会暴露所有成员,内部状态可以被外部改写。
三、立即执行函数。对象的写法会暴露所有模块成员,内部状态可以被外部改写。使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),可以达到不暴露私有成员的目的。
var obj=(function () {
var _num=3;
return{
a:function () {
console.log(a);
},
set num(value){
_num=value;
},
get num(){
return _num;
}
}
})();
obj.num=5;
console.log(obj.num)//5;
console.log(obj._num)//undefined
obj.a();//a
优点:外部代码无法读取到里面的_num变量,保证了变量不被污染
基本上这种就是模块的写法了,但是单纯的这样描述仍然不算完美,因此我们在其基础上进行了一下的修改。
四、放大模式。如果我们想要在原有的模块基础上进行扩展,添加其他属性或者方法。这时就可以采用放大模式。
var module=(function () {
return {
a:1,
b:2,
c:function () {
}
}
})();
module=(function (mode) {
mode.d=10;
return mode;
})(module);
五、宽放大模式。如果module没有定义或者没有加载进入,这时候我们可以在带入参数的时候给参数时判断是否存在,不存在就给一个空对象。与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。
var module=(function () {
return {
a:1,
b:2,
c:function () {
}
}
})();
module=(function (mode) {
mode.d=10;
return mode;
})(module || {});
console.log(module);
六、输入全局变量。独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。这方面更多的讨论,参见Ben Cherry的著名文章《JavaScript Module Pattern: In-Depth》。