管理和維護點擊jQuery處理程序太多

我最近一直在將Phonegap升級到最新版本，現在它迫使我遵循Chrome的內容安全策略，這在某種程度上是好的。但現在我不得不刪除所有的onclick 處理在HTML代碼和jQuery的處理程序中添加他們一些$（文件）。就緒（函數（EVT）{管理和維護點擊jQuery處理程序太多

$('#addRecordBtn').on('click', function(){ 
    alert("Adding Record"); 
    AddValueToDB(); 
}); 

$('#refreshBtn').on('click', function(){ 
    alert("Refresh Records"); 
    ListDBValues(); 
}); 

});

但按我的什麼高達我覺得會有這些處理器的太多應用程序進行縮放。有示出了這種處理器的維護和適當的方式或定義這樣的處理程序的適當位置的例子。

來源

2015-05-23 Ankit Tanna

這裏有一個想法，你可以創建一個存儲所有功能的對象，這些功能也知道如何放棄功能

var handlers = { 
    getHandler: function (str) { 
     return this[str]; 
    }, 
    '#addRecordBtn': function() { 
     alert("Adding Record"); 
     AddValueToDB(); 
    }, 
    '#refreshBtn': function() { 
     alert("Refresh Records"); 
     ListDBValues(); 
    } 
};

然後使用此表單應用所有處理程序。

$('#addRecordBtn').on('click', handlers.getHandler('#addRecordBtn')); 
$('#refreshBtn').on('click', handlers.getHandler('#refreshBtn'));

優化的時間，如果你想獲得真正看中的，你分配一個唯一的ID給每個按鈕的約定

var handlers = { defer: function() { return function(){ handlers[$(this).attr('id')](arguments); }; }, registerHandlers: function() { for (var key in this) { if (this.hasOwnProperty(key) && typeof(key) === "string") { $('#' + key).on('click', this.defer()); } } }, 'addRecordBtn': function() { alert("Adding Record"); AddValueToDB(); }, 'refreshBtn': function() { alert("Refresh Records"); ListDBValues(); } };

調用它

$('#addRecordBtn').on('click', handlers.defer()); $('#refreshBtn').on('click', handlers.defer());

或自動註冊的一切

handlers.registerHandlers();

Here is a fiddle of my solution

來源

2015-05-23 18:22:08 t3dodson

在這一過程中，我會進一步走一步，並給所有的按鈕，你需要一個類，然後*一個*處理程序通過ID添加所有功能。即'（'click'，handlers.getHandler（$（this）.attr（'id'）））;' – ArtOfCode

@ArtOfCode我試圖想如果這可行。這不會束縛於整條線所在的任何物體。例如窗口對象？ – t3dodson

從來沒有嘗試過，我只是想出了！讓我快點走吧 – ArtOfCode

你是否在尋找類似的東西？現在

$('[data-clickhandler]').on('click', function(e) { 
    var $btn = $(e.currentTarget); 
    var handler = $btn.data('clickhandler'); 

    alert('Refresh ' + handler); 
    window[handler] && window[handler](e); 
    e.preventDefault(); 
});

你的元素可以指定自己的函數clickhandler像這樣：

<a data-clickhandler="AddValueToDB" href="">...</a>

或者說：

<span data-clickhandler="ListDBValues">...</span>

來源

2015-05-23 18:26:54 Rudi

管理和維護點擊jQuery處理程序太多

回答

相關問題