<div class="box"></div>
<div class="box2"></div>
写法1:
var module = (function(){
var
configMap = {},
stateMap = {},
clearLocalStorage,
saveLocalStorage,
loadLocalStorage,
bind,
setJqueryMap,
initModule
;
clearLocalStorage = function(){
};
saveLocalStorage = function(){
};
loadLocalStorage = function(){
};
bind = function(){
};
setJqueryMap = function(){
};
initModule = function(){
};
return { initModule : initModule };
})();
module.initModule($('.box'));
module.initModule($('.box2'));
写法2:
function AverageClass(){
}
AverageClass.prototype = {
constructor : AverageClass,
init : function(){},
something : function(){
}
};
var ager = new AverageClass();
var ager2 = new AverageClass();
ager.init($('.box'));
ager2.init($('.box2'));
如上两种写法,在操作多个元素的时候,第二种不会有冲突,因为每次都是不同的实例,但是第一种就会冲突,请问有什么好的方法解救第一种写法吗?(也就是让第一种写法里面的模块调用每次也变成不同的实例),大家好,我是楼主,第一种写法我修改了一下,请问创造者模式还是凑效吗?
没有。因为第一个module
就是一个对象啊,而第二种写法里面是new
了两个不同的对象。要想不冲突,肯定是要在不同的对象上操作的。
第一种写法如果想要不冲突,就要保证 configMap
、stateMap
是常量或公共变量,否则你要把各个调用者需要的变量隔离开,写到initModule
内部,可以来个闭包。
var module = (function(){
var initModule = function(){
var configMap = {},
stateMap = {};
return function(){
}
};
return { initModule : initModule };
})();
module.initModule()($('.box'));
module.initModule()($('.box2'));
第一种方式可以改用建造者模式
第二种方法是普通的创建类的实例
var module = {
buildModule: function(el) {
var configMap = {};
var stateMap = {};
var clearLocalStorage = function() {
};
var saveLocalStorage = function() {
};
var loadLocalStorage = function() {
};
var initModule = function() {
module.el = el; // 实例属性的例子,不会和其它实例冲突
};
var module = {
// 想导出的方法
clearLocalStorage: clearLocalStorage,
saveLocalStorage: saveLocalStorage,
loadLocalStorage: loadLocalStorage,
};
initModule(); // 如果不需要在别处调用,也可不要 initModule 函数,把代码直接放在这里
return module;
}
};
var module1 = module.buildModule($('.box'));
var module2 = module.buildModule($('.box2'));