如何在JavaScript中正确使用模块模式？

Question

在我的公司我们有一个调查框架来帮助利益相关者创建调查，我试图创建一个可重复使用的对象，这将允许团队成员轻松设置调查的特定问题的宽度 - 他们有时可以根据答案的长度有点缩小。我试图使用模块和构造函数模式的组合，但不知道如果我正确地将它关闭。有没有更好的方式来编写我的代码？

 var WidthIncreaser = (function(){ 
      return function (element, words, width) { 

       var element = $(element); 
       var re = new RegExp(words, 'gi'); 

       return { 
        init: function() { 
         if (element.text().match(re)) { 
          element.width(width); 
         } 
        } 
       }; 
      }; 
     })(); 

     var tr = new WidthIncreaser('td.choicev-question:first', 'Applicable from the', 400); 
     tr.init(); 

的想法是，有人可以创造WidthIncreaser的新实例，并传递一个元素，它所以它被瞄准正确的问题和大小来设置问题的宽度相匹配的问题的文本字符串。

感谢您提前的建议！

Answer 1

你是双层包装材料。无论如何，我看到的通用模块模式只是一个返回闭包对象的函数。

不需要关键字new也不需要立即函数。当只有一个对象被创建并直接分配给一个变量时，通常使用立即函数。就你而言，你想制作“实例”。

var WidthIncreaser = function(element, words, width) { 

    var element = $(element), 
     re = new RegExp(words, 'gi'); 

    return { 
     init: function() { 
      if (element.text().match(re)) { 
       element.width(width); 
      } 
     } 
    }; 
}; 

var tr = WidthIncreaser('td.choicev-question:first', 'Applicable from the', 400); 

tr.init();​ 

Answer 2

我通常使用模块模式是这样的：

var myModule = (function() { 
    var myPrivateVar = 'foo'; 
    var myPrivateFunc = function() { 
     console.log('bar'); 
    }; 

    return { 
     myPublicFunc: function() { 
      console.log(myPrivateVar); 
     } 
    }; 
})(); 

然后，它会像这样使用：

myModule.myPublicFunc(); 

Answer 3

我不认为你真正需要的”模块模式“在这里。你可以只取封闭的优势，这一切：

function WidthIncreaser(element, words, width) { 
    element = $(element); 
    var re = new RegExp(words, 'gi'); 

    this.init = function() { 
     if (element.text().match(re)) { 
      element.width(width); 
     } 
    } 
} 

var tr = new WidthIncreaser('td.choicev-question:first', 'Applicable from the', 400); 

tr.init(); 

当然你不需要必要init在这种情况下，因为你可以把一切都在构造函数，但我相信这只是一个例子，也许你需要延迟初始化。

这样，你就可以保持你的prototype链，以及你之类的语句：

TR的instanceof WidthIncreaser //真正

会的作品。

此外，您还可以填充prototype与不需要访问的范围变量的方法，至少没有直接：

WidthIncreaser.prototype.doSomething =函数（）{/ * .. * /}

举例来说，如果你不能使用getter和setter，因为跨浏览限制，你可以有一个这样的功能：

function WidthIncreaser(element, words, width) { 
    element = $(element); 
    var re = new RegExp(words, 'gi'); 

    this.element = function() { return element }; 

    this.init = function() { 
     if (element.text().match(re)) { 
      element.width(width); 
     } 
    } 
} 

WidthIncreaser.prototype.reset = function() { 
    this.element().text("") 
} 

所以基本上你可以从外面的元素，但它是可读的y，WidthIncreaser只能在实例化过程中设置元素。

编辑：我复制并粘贴init那当然它并没有与re依赖工作，所以这是一个糟糕的例子来说明该方法。