"放大模式": 当一个模块内容很大/多,或者想要给模块添加私有属性,再或者是从另一个模块继承,可以采用放大模式。(简单来说就是当一个模块数量多的话,就添加一个模块,让新加的模块继承上个模块的属性)
"宽放大模式" 与"放大模式"相比,"宽放大模式"就是"立即执行函数表达式"的参数,可以是空对象 "宽放大模式"在"放大模式"的基础上,不管js文件引入顺序如何都能够执行函数
项目结构
module1和module2演示放大模式
moduleA和moduleB演示宽放大模式
放大模式
module1代码
let module1 = (function () {
let num = 0;
let calc = function () {
return num += 20
}
return {
count: num,
calc: calc
}//module1返回了一个对象{count:num,calc:calc}
})()
console.log(module1);
console.log(module1.calc());
module2代码
//模块2,继承module1,并添加新的方法。
let module2 = (function (m1) {
m1.newFn = function () {//此时此时给这个对象添加一个属性newFn,这时候m1为{count:num,calc:calc,newFn:function(){}}
console.log("m2新方法");
}
return m1;
})(module1)
//继承m1的属性
//将module1返回的对象{count:num,calc:calc}当参数
//这时候打印module2就相当于m1的值,里面的count属性
console.log(module2.count + 20);
//放大模式引用顺序不能混乱
宽放大模式
moduleA代码
var moduleA = (function () {
let num = 0
let fn = function () {
return num++
}
return {
count: num,
calc: fn
}
})()
moduleB代码
var moduleB = (function (mA) {
mA.newFn = function () {
return "你好世界"
}
return mA
})(window.moduleA||(window.moduleA={}))
//当模块引用顺序混乱时,在window上找不到moduleA时,参数可以给一个空对象,找到moduleA时,就可以调用moduleA的返回值
console.log(moduleB);