zoukankan      html  css  js  c++  java
  • 简易 事件订阅封装

    /*

    事件存放的仓库

    多个事件
    每个事件会对应多个事件函数

    aaa:[]
    haha:[]

    eventList:{
    key:[]
    }


    $on 事件绑定 eventName callback
    一个事件对应多个事件函数
    1、分析绑定的这个事件名称在事件仓库中是否存在 如果存在则直接将事件函数添加到数组中去
    2、如果不存在则创建一个数组然后将事件函数添加到数组中去

    $emit 事件的触发 eventName params

    1、分析当前事件名称是否存在,如果存在则遍历数组中所有的事件进行触发 将参数传递到数组中去


    $off 事件解绑 eventName callback
    1.分析当前事件名称是否存在 如果存在则 判断第二个参数是否存在 如果存在则 解绑对应的函数
    如果不存在则解绑全部

    */


    let eventList = {

    }


    const $on = (eventName,callback)=>{
    if(!eventList[eventName]){
    eventList[eventName] = [];
    }

    eventList[eventName].push(callback);
    }

    const $emit = (eventName,params)=>{
    if(eventList[eventName]){
    eventList[eventName].forEach((cb)=>{
    cb(params);
    })
    }
    }


    const $off = (eventName,callback)=>{
    if(eventList[eventName]){
    if(callback){

    let index = eventList[eventName].indexOf(callback);
    eventList[eventName].splice(index,1);

    }else{
    eventList[eventName].length = 0;
    }
    }
    }


    export default {
    $on,
    $emit,
    $off
    }

  • 相关阅读:
    JS异步操作之promise发送短信验证码.html
    JS高级之简单类的定义和继承
    逮住一个bug
    基于localStorage的登录注册
    脱离node自己使用普通的requirejs管理js资源
    前端的console.log的效果写法
    第六节 全文索引
    第五节 索引
    第四节 数据的删除
    第三节 基本操作之数据--------更新
  • 原文地址:https://www.cnblogs.com/wsj1/p/12876117.html
Copyright © 2011-2022 走看看