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

看板Ajax作者grence (dalalida)時間12年前 (2013/08/24 22:03)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串2/4 (看更多)

※ 引述《tomin (弱水三千只取一瓢飲)》之銘言： : 我有個頁面要做許多事件綁定 : 最簡單的寫法是像這樣 : 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? 拆成獨立的 js檔（眼不見為淨XD 再看是用前端處理： window.onload=function(){ getScript("add.js"); getScript("delete.js"); } 或是配合後端： <script src="combine?file=add.js,delete.js"></script> 這做法的前提是各 function彼此獨立，不然考慮到載入、執行順序又會很囉嗦。不過我覺得原本的程式看起來不會很難維護…可能是 PO文的時候有簡化過？如果是懂 js但對原程式架構不熟的人，看到這種可以直接翻譯的程式碼反而比較單純；畫面上看到 .delete_button_1，要知道它做了什麼事就直接在程式碼搜尋 ".delete_button_1" : 2.次要功能(可允許失敗) 建議全部用try catch包起來嗎? : 還是最好都全部成功不會有失敗的可能就不用try catch 我自己寫 js很少用 try catch，即使沒出錯，瀏覽器的效能也會有影響，有時候還會遇到奇怪的 bug 而且 js檢查變數是否有值或是給預設值都很簡單， function test(param, option){ param = param || {}; option && option.handler && option.handler(); }; : 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 180.176.94.242