Javascript 模块模式可以用于单例以及多次实例化的对象吗？

Question

我有一页包含两种类型的表单。我在顶部有一个单一的 A 型形式，然后在其下方有 1 个或多个 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 的使用。

原型继承与使用此模式隐藏您的成就的方法并不真正兼容。当然，您可以使用原型表单对象来重写它，并在其上定义验证方法，但是这样该方法将是可见的，并且您将失去封装。

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

在这种情况下，我建议性能差异微不足道，因此请选择您喜欢的任何内容。就我个人而言，我会说它们之间有太多重复，我倾向于将它们统一起来。你真的需要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;
}

Answer 2

我认为您只需要编写一种 jQ 插件：

(function($) {
    $.fn.formValidator = function() {
        return $(this).each(function() {
            var $_domElement = $(this);
            $_domElement.click(function() {
                if($('inputfield', $_domElement).val() == 0) {
                    alert('Cannot enter 0!');
                }
            });
        });
    };
})(jQuery);

在这种情况下，您将扩展 jQ 元素方法模块，并且能够将其用于页面上任意数量的元素（对于单个或多个元素集合）。它也将是可链接的。

用法：

$('#form-a').formValidator();
$('.form-b').formValidator();

或者

$('#form-a, .form-b').formValidator();

当然你可以使用一个模块来存储这个函数：

ProjectModule.formValidator = function(selector) {
    return $(selector).each(function() {
        var $_domElement = $(this);
        $_domElement.click(function() {
            if ($('inputfield', $_domElement).val() == 0) {
                alert('Cannot enter 0!');
            }
        });
    });
};

用法：

ProjectModule.formValidator('#form-a, .form-b');