let evevtListenr = {}
封装$on
const $on = (eventName,cb)=>{
    if(!evevtListenr[eventName]){
        evevtListenr[eventName] =[];
    }
    evevtListenr[eventName].push(cb);
    }
    封装$emit
const $emit = (eventName,params)=>{
        if(evevtListenr[eventName]){
            evevtListenr[eventName].map((cb)=>{
                cb(params);
            })
        }
    }
封装$off
    const $off = (eventName,cb)=>{
        if(evevtListenr[eventName]){
            if(cb){
            let index=vevtListenr[eventName].indexof(cb);
            evevtListenr[eventName].splice(index,1);
            }else{
                evevtListenr[eventName].length=0;
            }
        }
    }
    
    function fn1(val){
        console.log(111,val);
    };
    function fn2(val){
        console.log(222,val);
    };
    function fn3(val){
        console.log(333,val);
    }
    $on('work1',fn1);
    $on('work1',fn2);
    $on('work1',fn3);
    $emit('work1');
    

如何封装$on,$emit,$off——学vue前你必须懂得封装!的更多相关文章

  1. 为什么43%前端开发者想学Vue.js

    根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...

  2. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  3. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...

  4. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  5. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  6. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  7. Vue 前端面试题

    Vue 前端面试题 1. 说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”模式的方式,通过 Object.defineProperty() ...

  8. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  9. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

随机推荐

  1. Mybatis-plus入门教程(一)

    什么是MyBatis-Plus MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发繁琐的CRUD.提高代码效率而生,同时 ...

  2. .net access config 相对路径

    <configuration> <connectionStrings> <add name="ConStr" connectionString=&qu ...

  3. 小而美的GIF生成神器ScreenToGif

    起因 在写计算机图形学博客时,需要讲解一个算法,课本上抽象的语言未免让人读着头大,还在老师给的PPT中有代码的演示,我就想将演示做出GIF动图帮助读者理解算法,其实之前浪迹博客园的时候就发现有许多博主 ...

  4. 《Android项目实战--手机安全卫士》读后感

    上学期在学校图书馆看到此书,觉得比较贴近实践,于是寒假研究了一番,也算是体会了一把社会培训机构的模式. 由于时间关系,最后两章还没弄完,但感觉每章节的流程相似,加之马上要回学校了,所以打算在家的最后一 ...

  5. ajax数据交互

    目录 一.ORM查询优化 1-1. only与defer 1-2. select_related与prefatch_related 二.MTV与MVC模型 三.choices参数 四.AJAX 4-1 ...

  6. CSS类的操作

    CSS类的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  7. JS---DOM---为元素绑定事件和解绑事件的兼容代码

    1. 绑定事件的兼容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEve ...

  8. 【代码审计】ESPCMSP8(易思企业建站管理系统)漏洞报告

    0x00简介 项目名称:ESPCMS-P8(易思企业建站管理系统) 测试平台:Windwos 版本信息:P8.19082801稳定版 更新时间:2019-08-30 00:56:32 网站官网:htt ...

  9. Django:永别了pycrypto库~

    在开发微信登陆功能时,解密用户信息需要使用到 Crypto 包,所以安装了pycrypto库. Linux.OS X 系统均可直接 pip install pycrypto . 最近换到win10下开 ...

  10. python基础之字符串讲解(上)

    字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或者")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可.For example: 为str输入一个变量,p ...