基于MVC的事件绑定

长时间做JS开发，经常需要对DOM中元素，例如A,DIV ,INPUT 进行事件绑定，通常的做法是在页面HTML渲染完成之后，再逐个绑定事件.比如，使用jQuery 绑定的click方法。

$(‘.fix , .del , .view’).die(“click”).live(“click”,function(){alert(”)});

然而，当再对代码进行维护时，看到这样的代码，再去dom中查找对象，就增加了维护难度。而且这些方法主要实现了什么功能，也只能是通过阅读代码来实现。

另外，从代码结构上来看，UI与事件处理的逻辑耦合过于紧密，当dom中因为修改样式而换一个class名或者name名而未修改对应事件处理代码时，就会产生错误，当这样的依赖在整体代码中四处可见时，代码的维护者将陷入噩梦。

好的代码需要降低依赖，提高内聚。根据这种思想，使用MVC模式为这样的代码解耦。

思路如下：

1.在Model模型中定义对Model的处理逻辑。
2.通过自定义属性 (这里只定义了click,mouseover,mouseout) q-click,q-mouseover,q-mouseout 建立与Model 的耦合。
3.通过遍历Dom中 q-* 属性，绑定处理事件，使得处理函数中的this对象为Model，同时，将事件对象通过参数e传入处理函数。

实现代码如下：

使用示例：

_bindAction:function(element,d) 方法

参数 element： 需要绑定的页面dom对象

参数 d: model对象

比如：页面中有如下html

在dom模板中可以看到当 第一个li 点击时，调用joinedQunanzi()方法，点击第二个li 时，调用 managedQuanzi().

然后JS代码定义model如下：

通过_bindAction($(“ul:eq(0)”),tabSwitcher);

即实现事件与dom的绑定。

回头再分析代码：

在tabSwitcher中，可以看到这个Model对象包括两个方法，joinedQuanzi, managedQuanzi，在定义这个model时，不需要管点击哪个对象的时候调用，只需要着眼于逻辑的处理。

在dom的模板中，可以选择当点击哪个对象时调用什么方法，模板与JS的耦合通过协商接口名称解决，也就是说，JS工程师与HTML模板只需要协商好事件的名称，然后就可以分别编写独立的代码。

另外，从维护代码的角度来看。假如，运维人员需要将click事件变为mouseover事件触发时，只需要单独修改模板中自定义属性q-click为q-mouseover即可，因此，使得关注点得到了区分。

整体来说，编写代码就需要拥抱修改，让代码尽量的简洁易懂才可以随时的接受修改。不同作用的代码应该尽量的减少耦合，同时，为大段的代码加上一个合理的方法名可以使维护者不用去猜测这段代码的作用，这样的代码大家都会喜欢。