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

Question

在项目中，经常会遇到页面中有大量通过“钩子”绑定的事件，为了方便使用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文件。有尝试过把事件和函数本体拆分，类似这样：javascriptvarPage=function(){varroot=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(){}}或者按照功能点拆分：javascriptvarForm=function(){//xxx}Form.prototype={_submit:function(){//秉承一个函数做一件事的思想},buyForm:function(){},submitForm:function(){}}varDialog=function(){//xxx}Dialog.prototype={}$(document).ready(function(){$('.j_submitForm').on('click',function(){//只做逻辑处理varformObj=newForm();if(formObj.isSuccess){formObj.submit();//更多细节...}});});但是实际上强制沿用（套用）一种设计模式会导致代码读起来很牵强，你在具体项目中是采用什么样的方式设计、组织代码？

Answer 1

看得出题主说的事件、绑定是指的DOM事件与监听函数。猜测问题的症结在于DOM与业务代码混杂。
jQuery可以让你很方便地操作DOM，但绝对不要依赖DOM来组织或表示业务，这是使用jQuery的程序员很容易犯的毛病
要拆分的不是函数与事件，而是DOM与业务
业务与DOM代码混杂既难以维护，又很难进行单元测试
React、Angular这些技术几乎从根本上避免了操作DOM，才带来生产力的巨大提升
实际应用中需要考虑浏览器兼容等因素，未必能直接采用已有的整套框架，但是在现有技术方案基础上尽量贯彻DOM与业务分离的思想，是绝对能带来维护性提升的
                            

Answer 2

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