1.原始写法(函数)
function m1(fn){
return fn;
};
function m2(x){
return x+1
};
document.write(m1(m2(2)));
这种写法会污染全局变量,无法保证不与其它模块发生命名冲突,而且无法直接看出模块成员之间的关系
2.对象
//将函数放入对象里面
const module1 = {
count:0,
increase:function(){
this.count++
},
decrease:function(){
this.count--
}
}
module1.increase();
module1.decrease();
module1.count=100;
console.log(module1.count);//100
这种写法将对象直接导出,对象的属性可以直接被篡改//module1.count=0
3.立即执行函数
const module2=(function(){
var count=0;
const increase=function(){
count++;
};
const decrease = function(){
count--;
}
const getCount=function(){
return count;
}
return {
increase,
decrease,
getCount
}
})()
console.log(module2.count);//undefined
module2.increase();
console.log(module2.getCount());//1
//缺点:无法直接访问模块的变量,必须通过暴露方法getCount来访问count
4.放大模式 (立即执行函数升级版)
var myModule={
count:0,
increase:function(){
this.count++;
return this.count;
},
decrease:function(){
this.count--;
return this.count;
}
}
myModule=(function(module){
console.log(module,6666)
module.setVal =function(value){
module.count=value;
};
return module;
})(window.myModule);
//注意这里如果直接写myModule 会报ReferenceError
myModule.setVal(200);
console.log(myModule.count);//200
//这种写法在各种工具库的源码中随处可见