最近在做一個(gè)后管項(xiàng)目胖翰，其中有一個(gè)功能有多個(gè)類(lèi)似的模塊，前端項(xiàng)目新建了12個(gè)html頁(yè)面帕膜，頁(yè)面ID不同，前端根據(jù)ID作為12個(gè)頁(yè)面的區(qū)分溢十。之前的做法是一個(gè)html對(duì)應(yīng)一個(gè)js垮刹，這樣保證頁(yè)面之間的數(shù)據(jù)不會(huì)串聯(lián)，這次挑戰(zhàn)一下张弛，12個(gè)頁(yè)面復(fù)用一個(gè)js文件：
思考點(diǎn)：如何做到頁(yè)面之間的數(shù)據(jù)不會(huì)發(fā)生交叉荒典，即后面的數(shù)據(jù)覆蓋之前的數(shù)據(jù)？
答案是：作用域吞鸭。每個(gè)頁(yè)面模塊擁有了自己的作用域寺董，彼此互相獨(dú)立。
具體做法：
1刻剥、js文件創(chuàng)建一個(gè)工廠(chǎng)函數(shù)
function init (opts) {
? ? this.wrap = opts.wrap;
? ? this.name = opts.name;
? ? ...
}
init.prototype.fn1 = function () {
}
init.prototype.fn2 = function () {
}
return init
2遮咖、在12個(gè)頁(yè)面里面引用這個(gè)js
var pa1? = new init ({name: name, wrap: wrap});
pa1();
var pa2? = new init ({name: name, wrap: wrap});
pa2();
此時(shí)new出一個(gè)實(shí)例pa1. pa2，它們都擁有了一個(gè)獨(dú)立的作用域透敌，并且繼承了init的原型方法和屬性盯滚。
new 做了3件事情
1、創(chuàng)建一個(gè)空對(duì)象? var obj = {}
2酗电、把這個(gè)空對(duì)象的原型鏈指向 構(gòu)造函數(shù) obj.__proto__ = init.prototype;
3魄藕、具體執(zhí)行構(gòu)造函數(shù)并把this綁定到這個(gè)空對(duì)象{}。init.call(obj, name, wrap);? 返回這個(gè)實(shí)例對(duì)象
用代碼說(shuō)話(huà)：
