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

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等.不同的框架有不同的结构.