基于CSS class的事件监听管理机制
背景：
做了那么多web项目，总会发现到处都是事件绑定，同一个按钮的执行动作，也许会分布在多个js文件中。
而且对于js动态生成的文档片段，里面会经常出现“onclick=...”之类的代码，一到功能升级，或者代码重构的时候，
就会发现，这个难度以及工作量，和重写一遍没什么区别，有时候甚至工作量更大！
基于各种情况的分析、以及以往的经验总结，百度空间则有了一套自己的事件监听管理机制：基于CSS class的事件监听管理机制
方案：
1、js代码中，不出现对某节点的事件监听，如：$(‘#elm‘).click(function(e){})
2、html代码中，不出现inline的事件监听，如：<input type="button" value="OK" onclick="doSth();">
3、所有需要进行事件监听的节点，都配置一个（或一类）class
4、每个独立的子模块（或页面）有一个单独的listener_manager.js文件
5、在listener_manager.js中，对所有的事件监听进行集中管理，类似“任务管理器”
6、只对一个大容器（HTMLElement）进行事件绑定，获取触发源，判断源是否包含了某个class，包含则触发其对应的监听
7、对于js动态生成的文档片段，依然通过此方法，指定class即可；这个能完美的实现类似jQuery中的live
关于实现：
先来看一个非常重要的方法：事件的绑定与触发
/** * 通过css class的方式来注册事件 * @param {HTMLElement} elmContainer 需要进行全局监听的HTML节点 * @param {Array} arrEvent 需要监听的事件列表 * @param {Object} classMap css-class和event-function之间的映射 * @param {Function} fnCustom 每次事件触发后需要执行的自定义操作 */window.addEventMap = function(elmContainer,arrEvent,classMap,fnCustom){ $.each(arrEvent,function(i,item){ // 只对一个节点进行各种事件监听 $(elmContainer).bind(item,function(evt){ // 获取时间触发源 var evtTarget = evt.target || evt.srcElement; // 对触发源DOM进行安全性判断 if(!evtTarget) return false; for(var className in classMap[item]){ // 获取事件驱动方法 var fnListener = classMap[item][className]; // 当前节点满足触发条件，则触发事件 if((evtTarget.className && $(evtTarget).hasClass(className)) ) { fnListener.call(evtTarget,evt); break; } // 如果其父节点满足，也可以触发该事件 else if(ancestor = $(evtTarget).parents(‘.‘ + className)[0]){ fnListener.call(ancestor,evt); break; } } //支持自定义操作 if(typeof fnCustom === ‘function‘){ fnCustom.call(evt); } }); });}; |
拿一个简单的应用来举例说明，先看listener_manager.js的内容：
/** * 注册命名空间 */window.registNS(‘qhome‘); /** * 事件监听程序 * @return {[type]} */qhome.ListenerMgr = (function(){ /** * 展开所有转发理由 * @param {[type]} e [description] * @return {[type]} */ var _fn_a_expand_reson = function(e){ }; /** * 隐藏转发理由 * @param {[type]} e [description] * @return {[type]} */ var _fn_a_collapse_reason = function(e){ }; /** * 音乐播放 * @return {[type]} */ var _fn_play_music = function(e){ }; /** * 评论 */ var _fn_a_reply = function(evt){ }; /** * 转载 */ var _fn_a_repost = function(evt){ }; /** * 鼠标在头像上划过时，显示：上传头像 * @param {[type]} e [description] * @return {[type]} */ var _fn_wrapper_avatar_over = function(e){ }; /** * 鼠标在头像上划出时，隐藏：上传头像 * @param {[type]} e [description] * @return {[type]} */ var _fn_wrapper_avatar_out = function(e){ }; /** * 在这里通过DOM节点的className来对应该节点需要增加的事件监听 */ var _className2ListenerMap = { click : { ‘a-expand-reason‘ : _fn_a_expand_reson, ‘a-collapse-reason‘ : _fn_a_collapse_reason, ‘q-play-music‘ : _fn_play_music, ‘q-progressbar‘ : _fn_play_music, ‘a-reply‘ : _fn_a_reply, ‘a-repost‘ : _fn_a_repost }, mouseover : { ‘wraper-avatar‘ : _fn_wrapper_avatar_over }, mouseout : { ‘wraper-avatar‘ : _fn_wrapper_avatar_out } }; /** * 启动事件监听管理器 * @return {[type]} */ var _run = function(){ window.addEventMap( $(‘.mod-page-main‘), //需要进行事件监听的容器 [‘click‘,‘mouseover‘,‘mouseout‘], //event列表 _className2ListenerMap //class映射表 ); }; return { run : _run };})(); |
关于window.registNS，在这里有讲到。
从上面的事件监听管理器中可以很容易的看出，每一个（或一类）CSS class，唯一对应一个监听程序。
如上代码中第66到81行，就是定义CSS class和event function之间的映射关系。
如上代码中第70行和71行，class为q-play-music，以及class为q-progressbar的两个节点，当发生click事件的时候，其具体动作都可以交由_fn_play_music处理。而且由js动态生成的节点中，也会包含class为这两个的节点，其事件监听就会自动的被ListenerMgr捕获并处理，这个地方也就是jQuery中的live方式。
如上代码中第88行就是调用了一个核心方法，用户事件绑定。
在web应用需要初始化的时候，即可调用事件监听管理器的run方法，启动事件监听管理器：
// 启动事件监听管理器qhome.ListenerMgr.run(); |
这个时候，监听器即开始工作，只要页面上有上面动静，符合规则的节点都会被捕获到。
收益：
这种事件监听管理的机制，能将web应用中所有的事件监听进行统一管理，其初始化的入口，有且仅有一个，其作为一个单独的plugin而存在。代码集中，功能独立，便于管理，维护成本低。
这是一种集中式的事件管理机制。
转自Alien的笔记：http://www.baidufe.com/item/98947f853cc68032af53.html
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
