作者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