转载:jQuery大代码量下的组织结构
工作中避免不了要写大量的jQuery代码,如果一些功能经常使用的话,可以封装成jQuery插件
但是,还是会有一些页面需要大量的js代码。平时,一般是这样写的。
$(function(){
$("#id1").click(function(){
// handle the click event
});
$("#id2").click(function(){
// handle the click event
});
// 以下省略n多个事件绑定
});
ps:这里不考虑事件绑定太多的情况下,影响性能的问题,以后专门讨论这个问题
写上这样的代码数千行之后,这些代码的维护和日后扩展会比较麻烦。
几个月之后再来看,估计什么代码在哪一行都不记得了。
而且这样的写法,IDE(暂且测试了zend studio 8)也不能很好的帮助到你
如图所示的是按照如上方法写的近1k行代码:
zend studio outline中空无一物
为此,还是换一种代码组织结构
var App = {
showMessage: function(e, i){
alert(i);
// code here
},
hideMessage: function(){
// code here
},
// 以下省略n多个方法
init: function(){
var _this = App,
i = "hello";
$("#id1").click(function(e){
_this.showMessage(e, i);
});
$("#id2").click(_this.hideMessage);
// 以下省略n多个事件绑定
}
};
$(function(){
App.init();
});
通过上面这种方式写代码,逻辑清晰了,为每个匿名函数都取了一个有实际意义的名字
日后维护和扩展一目了然。
另外这种方式的代码组织结构,IDE也能派上用场了