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