Javascript模块模式可以用于单身人士，还可以用于实例化多次的对象吗？

Question

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

我用模块模式+ jQuery来连线了所有的事件上我的形式，处理验证，AJAX调用等

这是定义一个单，如形式A的最佳/有效的方式，和一个可重用的对象类，如Form 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

这两个模块显式返回排除使用新的对象。

原型继承与隐藏您实现此模式的方法并不真正兼容。当然你可以用你的validate方法定义一个原型表单对象来重写它，但是这个方法是可见的，你会丢失封装。

您是否想要低内存占用和原型的快速对象初始化（共享方法只存在一次，Instantiation在常量时间运行）或模块模式的封装具有轻微的性能损失（Multiple定义相同的方法，由于每次创建每个方法都会减慢对象实例化）

在这种情况下，我会建议性能差异是微不足道的，所以选择任何你喜欢的东西。就我个人而言，我会说他们之间有太多的重复，我会倾向于统一它们。你真的需要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); 

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

用法：

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

或者

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

Ofcourse，你可以使用一个模块来存储这些功能：

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');