基于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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。