转载：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也能派上用场了