javascript工厂函数实战项目——12个模块引用同一份js

最近在做一个后管项目，其中有一个功能有多个类似的模块，前端项目新建了12个html页面，页面ID不同，前端根据ID作为12个页面的区分。之前的做法是一个html对应一个js，这样保证页面之间的数据不会串联，这次挑战一下，12个页面复用一个js文件：

思考点：如何做到页面之间的数据不会发生交叉，即后面的数据覆盖之前的数据？

答案是：作用域。每个页面模块拥有了自己的作用域，彼此互相独立。

具体做法：

1、js文件创建一个工厂函数

function init (opts) {

    this.wrap = opts.wrap;

    this.name = opts.name;

    ...

}

init.prototype.fn1 = function () {

}

init.prototype.fn2 = function () {

}

return init

2、在12个页面里面引用这个js

var pa1  = new init ({name: name, wrap: wrap});

pa1();

var pa2  = new init ({name: name, wrap: wrap});

pa2();

此时new出一个实例pa1. pa2，它们都拥有了一个独立的作用域，并且继承了init的原型方法和属性。

new 做了3件事情

1、创建一个空对象  var obj = {}

2、把这个空对象的原型链指向 构造函数　obj.__proto__ = init.prototype;

3、具体执行构造函数并把this绑定到这个空对象{}。init.call(obj, name, wrap);  返回这个实例对象

用代码说话：