zoukankan      html  css  js  c++  java
  • events 事件的绑定on,事件的触发emit,事件的移除off的一看就懂的封装方法

    //存放事件
        eventList = {
            key:val
            handle:[]
        }



        1对多
        on(eventName,callback);
            handle:-------N多个
        1、判断事件名称是否存在

        2、如果存在的情况下将cb存放在eventName这个数组当中

        3、如果不存在创建key值为eventName val值为数组



        1对多
        emit(eventName,params);

        当调用emit的时候获取到eventName这的值,对值判断,如果值不存在直接return
        如果存在遍历这个值全局进行调用,然后将params传入这些函数




        off(eventName,[callback])
        当调用off的时候获取到eventName这的值,对值判断,如果值不存在直接return
        如果存在判断callback是否存在  如果存在删除指定的函数
        如果不存在将当前数组清空


    */

    const EventList = {

    }

    1.事件的绑定
    const on = function(eventName,callback){
        if(!EventList[eventName]){
            EventList[eventName] = [];
        }

        EventList[eventName].push(callback);
    }

    2.事件的触发
    const emit = function(eventName,params){
        if(!EventList[eventName])return;

        EventList[eventName].map((cb)=>{
            cb(params)
        })
    }

    3.事件移除
    const off = function(eventName,callback){
        if(!EventList[eventName])return;

        if(callback){
            let index = EventList[eventName].indexOf(callback);
            EventList[eventName].splice(index,1);
        }else{
            EventList[eventName] = [];
        }
    }

  • 相关阅读:
    汉字数组排序及如何检测汉字
    响应式web布局中iframe的自适应
    CSS3的flex布局
    关于BFC不会被浮动元素遮盖的一些解释
    趣谈unicode,ansi,utf-8,unicode big endian这些编码有什么区别(转载)
    深入seajs源码系列三
    深入seajs源码系列二
    深入seajs源码系列一
    韩国"被申遗" (转自果壳)
    Understanding delete
  • 原文地址:https://www.cnblogs.com/zhouyingying/p/10567748.html
Copyright © 2011-2022 走看看