首页 > 关于js不同写法重用的问题,求助!!!!!

关于js不同写法重用的问题,求助!!!!!

<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了两个不同的对象。要想不冲突,肯定是要在不同的对象上操作的。


第一种写法如果想要不冲突,就要保证 configMapstateMap是常量或公共变量,否则你要把各个调用者需要的变量隔离开,写到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'));
【热门文章】
【热门文章】