• 【孤独旅者】Vue-封装$on,$emit,$off


    let EventList = {
    //key:[]
    }

    const $on = (EventName, cb) => {
    if (!(EventList[EventName])) {
    EventList[EventName] = [];
    }
    EventList[EventName].push(cb);
    }
    /*
    $on:事件绑定
    $on(事件名称,回调函数)
    先判断当前事件名称是否存在,如果存在则直接将当前函数push到当前数组中去,如果不存在则创建一个数组,然后将当前函数push到数组中去
    */

    const $emit = (EventName, params) => {
    if (!EventList[EventName]) return;

    let EventLists = EventList[EventName];
    EventLists.map((cb) => {
    params ? cb(params) : cb(); //此句可有可无
    })
    }
    /*
    $emit:事件触发
    $emit(事件名称,params)触发事件的时候需要触发当前事件身上所以的函数

    1、判断当前当前事件名称是否存在,如果不存在则什么也不用干 直接return;
    2、如果存在的情况下,获取到当前事件名称所对应的所有函数,遍历执行
    3、如果第二次参数存在的情况下,调用函数的时候将第二个参数传递进去
    */

    const $off = (EventName, callback) => {
    if (EventList[EventName]) {
    let EventListsOff = EventList[EventName];
    if (cb) {
    EventList[EventName] = EventListsOff.filter((cb) => {
    return cb != callback;
    })
    } else {
    EventList[EventName].length = 0;
    }
    }
    }
    /*
    $off:事件解绑
    $off(事件名称,需要解绑的函数
    如果没有传递第二个参数则解绑所以事件
    如果传递了第二个参数则解绑指定函数
    1、首先判断当前事件名称是否存在,如果不存在 直接return
    2、如果事件名称存在,则判断第二值是否存在,如果存在则将这个函数从数组中移除,如果不存在直接将数组清空
    */

    export default {
    $on,
    $emit,
    $off
    }
  • 相关阅读:
    SpringMVC中的适配器
    JVM的理解
    设计模式 特点比较
    AOP代理模式
    Spring配置补充
    MayBatis与Spring的整合
    增强和注解
    注入
    Mybatis的执行过程
    k8s认证与授权
  • 原文地址:https://www.cnblogs.com/jeremy94/p/10187909.html
Copyright © 2020-2023  润新知