作者grence (dalalida)
看板Ajax
標題Re: [問題] 如何管理大量事件綁定、錯誤處理
時間Sat Aug 24 22:03:13 2013
※ 引述《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