[問題] 如何管理大量事件綁定、錯誤處理

看板Web_Design作者 (弱水三千 只取一瓢飲)時間12年前 (2013/08/24 12:53), 編輯推噓1(107)
留言8則, 3人參與, 最新討論串1/2 (看更多)
我有個頁面要做許多事件綁定 最簡單的寫法是像這樣 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

08/24 13:44, , 1F
如果你兩種類型的元素觸發的兩種方法都是一樣的, 為什麼
08/24 13:44, 1F

08/24 13:45, , 2F
不用this取得觸發的元素是哪個之後作動作就好
08/24 13:45, 2F
你是說像這樣吧 方法三: ('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)

08/24 23:05, , 3F
doDelete1() 跟 doDelte2() 作的事情是一樣的話不能寫成
08/24 23:05, 3F

08/24 23:05, , 4F
一個function就好嗎? 還是做的事情不同?
08/24 23:05, 4F

08/24 23:43, , 5F
不一樣的 不然我寫成('.del1,.del2').on('click,del)就好啦
08/24 23:43, 5F

08/24 23:59, , 6F
挑個 MVC 架構的 Library 來用可以方便很多
08/24 23:59, 6F

08/25 00:02, , 7F
像 MVW 的 AngularJS 或 MVVM 的 Knockout 之類的
08/25 00:02, 7F

08/25 00:31, , 8F
感謝樓上 若套用Library 應該可以很精簡又漂亮
08/25 00:31, 8F
文章代碼(AID): #1I63nFNc (Web_Design)
文章代碼(AID): #1I63nFNc (Web_Design)