作者tomin (弱水三千 只取一瓢飲)
看板Web_Design
標題[問題] 如何管理大量事件綁定、錯誤處理
時間Sat Aug 24 12:53:32 2013
我有個頁面要做許多事件綁定
最簡單的寫法是像這樣
window.onload = function() {
bind('.delete_button_1').(function() {});
bind('.delete_button_2').(function() {});
...etc
bind('.add_button_1').(function() {});
bind('.add_button_2').(function() {});
...etc
}
這樣寫雖然會動沒問題 但寫很多行這類的code看起來很雜 會不好維護
目前我是這樣改 嘗試模組化 (改法一)
window.onload = function() {
function initDelete() {
bind('.delete_button_1').(function() {});
bind('.delete_button_2').(function() {});
}
function initAdd() {
bind('.add_button_1').(function() {});
bind('.add_button_2').(function() {});
}
initDelete();
initAdd();
}
看起來是比較容易懂 但其實是有點沒必要的包裝
不過這麼做有個好處是 會比較容易做錯誤處理
比如delete是次要的功能 可以允許失敗 就可以try catch:
try {
initDelete();
} catch (e)
}
initAdd()
其實還有個改法二 寫註解區隔就好 >.<
/************************************************
* initDelete start
************************************************
*/
bind('.delete_button_1').(function() {});
bind('.delete_button_2').(function() {});
...etc
/*************************************************
* initDelete end
*************************************************
*/
1.但改法一二其實都不夠好 想知道還有什麼更好的寫法？
比如是不是可以用OO化的module pattern
定義delete, add為public function
再定義init()去load這些public function?
2.次要功能(可允許失敗) 建議全部用try catch包起來嗎?
還是最好都全部成功 不會有失敗的可能 就不用try catch
謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 115.82.115.113
→ DongFeng:如果你兩種類型的元素觸發的兩種方法都是一樣的, 為什麼 08/24 13:44
→ DongFeng:不用this取得觸發的元素是哪個之後作動作就好 08/24 13:45
你是說像這樣吧 方法三：
('button').on('click', function(e) {
if (e.target.className.split(" ")[0] == 'delete_button_1')
doDelete1();
elseif (e.target.className.split(" ")[0] == 'delete_button_2')
doDelete2();
});
這樣做某種程度是我要的 至少可以在某個event找到同類型的function
※ 編輯: tomin 來自: 115.82.115.113 (08/24 21:29)
→ DongFeng:doDelete1() 跟 doDelte2() 作的事情是一樣的話不能寫成 08/24 23:05
→ DongFeng:一個function就好嗎? 還是做的事情不同? 08/24 23:05
→ tomin:不一樣的 不然我寫成('.del1,.del2').on('click,del)就好啦 08/24 23:43
推 akiratw:挑個 MVC 架構的 Library 來用可以方便很多 08/24 23:59
→ akiratw:像 MVW 的 AngularJS 或 MVVM 的 Knockout 之類的 08/25 00:02
→ tomin:感謝樓上 若套用Library 應該可以很精簡又漂亮 08/25 00:31