JQuery - 正確高效地使用事件

Question

我已經在JQuery中啓動了項目。我在項目中使用了很多「點擊」和「onchange」事件。最初它沒問題（當沒有更多的代碼行時），但是在500-600行代碼之後，我的源代碼變得非常混亂，因爲我的代碼中有很多點擊和onchange事件。我不知道如何處理這個問題，我怎樣才能正確，高效地使用click和onchange事件而不是雜亂？這種項目有沒有框架或特殊模式？提前致謝。

Answer 1

當附加了很多事件處理程序時，首先，您應該讓您的代碼易於理解和閱讀。按照DRY原理。您不需要重複jQuery選擇器將事件附加到其中：

$(".divname").on({ 
    mouseenter: function() { 
     // Handle mouseenter... 
    }, 
    mouseleave: function() { 
     // Handle mouseleave... 
    }, 
    click: function() { 
     // Handle click... 
    } 
}, "a"); 

接下來，請關注任何功能重複。例如，當幾個按鈕/鏈接執行相同或接近相同的動作，這個動作/功能應被宣佈非anonymousely受到重用：

function editTableColumn() { ... } 
$("#element1, #element2").on("click", editTableColumn); 

或區別PARAM：

function editTableColumn(param1) { if (param1 ==) ... } 
    $("#element1").on("click", function() { 
    var param1 = "one"; 
    editTableColumn(param1); 
}); 
$("#element2").on("click", function() { 
    var param1 = "two"; 
    editTableColumn(param1); 
}); 

jQuery中同樣的想法可以用自定義插件被完成：http://learn.jquery.com/plugins/basic-plugin-creation/

如果DOM操作都嚴重與JS-S混合tructure，你只需要一種僞類或構造器的功能...

其實我的建議是使用JS框架包換了很多互動的：EmberJS，AngularJS等使用持續，例如，即使沒有jQuery，你也可以完成你的任務（顯示/隱藏/排序數據和進行其他DOM操作），代碼更少。 在這裏，你可以找到幾個角度默認orderBy過濾器的例子：https://docs.angularjs.org/api/ng/filter/orderBy

只是在決定時從網絡上取幾個例子。