javascript - Javascript Module Pattern 可以用于单例，也可以用于实例化多次的对象吗？

Question

我有一个页面有两种类型的表单。我在顶部有一个类型 A 的单一形式，然后在它下面有一个或多个类型 B 的形式。

我使用模块模式 + jQuery 连接表单上的所有事件、处理验证、ajax 调用等。

这是定义单例(如表单 A)和可重用对象类(如表单 B)的首选/有效方式吗？它们非常相似，我不确定我是否需要使用对象 prototype 属性、new 或不同的模式。一切似乎都对我有用，但恐怕我遗漏了一些关键错误。

Form A javascript 看起来像这样:

var MyProject.FormA = (function() {
  var $_userEntry;
  var $_domElementId;

  var validate = function() { 
    if($_userEntry == 0) {
      alert('Cannot enter 0!');
    } 
  }
  var processUserInput = function() {
    $_userEntry = jQuery('inputfield', $_domElementId).val();
    validate();
  }
  return {
    initialize: function(domElementId) {
      $_domElementId = domElementId;
      jQuery($_domElementId).click(function() {
        processUserInput();
      }
    }
  }

})();
jQuery(document).ready(function() {
  MyProject.FormA.initialize('#form-a');
});

Form B，被初始化一次或多次，定义如下:

var MyProject.FormB = function() {
  var $_userEntry;
  var $_domElement;

  var validate = function() { 
    if($_userEntry == 0) {
      alert('Cannot enter 0!');
    } 
  }
  var processUserInput = function() {
    $_userEntry = jQuery('inputfield', $_domElement).val();
    validate();
  }
  return {
    initialize: function(domElement) {
      $_domElement = domElement;
      jQuery($_domElement).click(function() {
        processUserInput();
      }
    }
  }

};
jQuery(document).ready(function() {
  jQuery(".form-b").each(function() {
    MyProject.FormB().initialize(this);
  });
});

Answer 1

您的两个模块都显式返回对象，从而排除了 new 的使用。

原型(prototype)继承与使用此模式隐藏实现的方法并不真正兼容。当然，您可以使用定义了验证方法的原型(prototype)表单对象重写此代码，但这样一来此方法将可见，并且您将失去封装。

这取决于你是想要原型(prototype)的低内存占用和快速对象初始化(共享方法只存在一次，实例化在恒定时间内运行)还是模块模式的封装会带来轻微的性能损失(多个定义相同的方法，对象实例化速度变慢，因为每次都必须创建每个方法)

在这种情况下，我建议性能差异微不足道，所以选择你喜欢的任何东西。就我个人而言，我会说它们之间有太多重复，我倾向于将它们统一起来。你真的需要 A 成为单例吗？它被意外实例化两次有什么危险？看起来这可能是针对这个问题的过度设计。如果你真的必须有一个单例，我会像这样包装非单例 (B) 类:

var getSingleton = function() {
    var form = MyProject.FormB();
    form.initialize("#form-a");
    console.log("This is the original function");
    getSingleton = function() {     
        console.log("this is the replacement function");
        return form;
    }
    return form;
}