如何设计含有大量事件、绑定的代码结构

在项目中，经常会遇到页面中有大量通过“钩子”绑定的事件，为了方便使用jQuery：

javascript$('.j_submitForm').on('click', function() {
    // XXX
});
$('.j_buyBtn').on('click', function() {
    // XXX
});
$('.j_callTopbar').on('click', function() {
    // XXX
});
$('.j_closeDialog').on('click', function() {
    // XXX
});

这样写出来的代码虽然能按照预期设计返回结果，但是代码结构组织上并不优雅，而且实际项目中，团队多人维护代码，每次新的需求进入要求增量开发，又导致单个函数非常臃肿庞大，如何组织这种针对页面的JS文件。

有尝试过把事件和函数本体拆分，类似这样：

javascriptvar Page = function() {
    var root = this;
    $('.j_submitForm').on('click', root.submitForm)
    $('.j_buyBtn').on('click', root.buyBtn)
    $('.j_callTopbar').on('click', root.callTopbar)
    $('.j_closeDialog').on('click', root.closeDialog)
}

Page.prototype =  {
    submitForm : function() {
        // 所有的细节实现都在这里，不再细化
    },
    buyBtn : function() {},
    callTopbar : function() {},
    closeDialog : function() {}
}

或者按照功能点拆分：

javascriptvar Form = function() {
    // xxx
}
Form.prototype = {
    _submit: function() {
        // 秉承一个函数做一件事的思想
    },
    buyForm: function() {},
    submitForm: function() {}
}

var Dialog = function() {
    // xxx
}
Dialog.prototype = {}

$(document).ready(function() {
    $('.j_submitForm').on('click', function() {
        // 只做逻辑处理
        var formObj = new Form();
        if(formObj.isSuccess) {
            formObj.submit();
            // 更多细节...
        }
    });
});

但是实际上强制沿用（套用）一种设计模式会导致代码读起来很牵强，你在具体项目中是采用什么样的方式设计、组织代码？

---

关于jQuery的局部逻辑组织参考 http://.com/q/1010000000633373 这个问题吧
不用任何框架也可以通过代码命名和排版体现出 “View - Router - Controller”的感觉的

代码感觉牵强参考 http://.com/q/1010000002536816 这个问题
把业务和实现尽可能分离。业务部分不要有实现，看上去像需求文档本身的话是不会觉得牵强的

那两个回答都好长恕我不详述了

---

看得出题主说的事件、绑定是指的DOM事件与监听函数。猜测问题的症结在于DOM与业务代码混杂。

jQuery可以让你很方便地操作DOM，但绝对不要依赖DOM来组织或表示业务，这是使用jQuery的程序员很容易犯的毛病

要拆分的不是函数与事件，而是DOM与业务

业务与DOM代码混杂既难以维护，又很难进行单元测试
React、Angular这些技术几乎从根本上避免了操作DOM，才带来生产力的巨大提升
实际应用中需要考虑浏览器兼容等因素，未必能直接采用已有的整套框架，但是在现有技术方案基础上尽量贯彻DOM与业务分离的思想，是绝对能带来维护性提升的

---

avalon 这个入门容易，性能好。

---

短的答案是: 不要只用 jQuery, 采用前端 MV* 框架, 比如 Angular, React, Emberjs 等.
不同的框架有不同的结构.