<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            addeventlistener('click',fn)

            @click=fn

            $emit('事件名称'，'事件内容')

        -->

        <script type="text/javascript">

//            obj.addlistener('click',fn1)

//            obj.addlistener('click',fn2)

//            obj.addlistener('click',fn3)

//

//            obj.emit('click','事件内容')

            var obj = {

                eventFns:{

//                    click:[fn1,fn2,fn3]

                },

                addListener:function(eventName,fn){

                    if(this.eventFns[eventName]){

                        this.eventFns[eventName].push(fn)

                    }else{

                        this.eventFns[eventName] = []

                        this.eventFns[eventName].push(fn)

                    }

                },

                emit:function(eventName,content){

                    this.eventFns[eventName].forEach(function(item){

                        item(content)

                    })

                },

                removeListener:function(eventName,fn){

                    var index = this.eventFns[eventName].indexOf(fn)

                    if(index!=-1){

                        this.eventFns[eventName].splice(index,1)

                    }

                }

            }

            obj.addListener('click',function(e){

                console.log(e)

                console.log('这是订阅者1')

            })

            obj.addListener('click',function(e){

                console.log(e)

                console.log('这是订阅者2')

            })

            var fn1 = function(){

                console.log('这是订阅者3')

            }

            obj.addListener('click',fn1)    

            obj.removeListener('click',fn1)

            obj.emit('click',{

                eventname:'click',

                timestamp:new Date()

            })

            document.querySelector('body').removeEventListener('事件名称',fn1)

        </script>

    </body>

</html>

vue订阅者模式的更多相关文章

  1. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  2. C#事件支持发布者/订阅者模式（观察者模式）

    C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数.        public delegate void delUpdate();  //委 ...

  3. Android 订阅-发布者模式-详解

    1.概念简述 Android 简称观察者模式, GoF说道:Observer模式的意图是“定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新”. 有 ...

  4. Publisher/Subscriber 订阅-发布模式

    Publisher/Subscriber 订阅-发布模式 本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WC ...

  5. 设计模式---订阅发布模式(Subscribe/Publish)

    设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...

  6. “一切都是消息”--MSF（消息服务框架）之【发布-订阅】模式

    在上一篇,“一切都是消息”--MSF(消息服务框架)之[请求-响应]模式 ,我们演示了MSF实现简单的请求-响应模式的示例,今天来看看如何实现[发布-订阅]模式.简单来说,该模式的工作过程是: 客户端 ...

  7. 在nginx上部署vue项目(history模式)；

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  8. 前端工程化（三）---Vue的开发模式

    从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...

  9. “一切都是消息”--iMSF（即时消息服务框架）之【发布-订阅】模式

    MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately)消息,所以iMSF就是 immediately Message S ...

随机推荐

  1. 基于操作系统原理的Linux 的基本操作和常用命令的使用

    一.实验目的 1．学会不同Linux用户登录的方法. 2．掌握常用Linux命令的使用方法. 3．了解Linux命令中参数选项的用法和作用. 二.实验内容 1． 文件操作命令 (1) 查看文件与目录 ...

  2. 创建一个自己的Vue UI组件库，并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  3. navicat for mysql中使用模型？

    登录进数据库后,点击模型--新建模型,如下 点击“小手”下面的图标----双击右边的空白处,即出现一个表格,可命名,此时我们命名为A 双击A表下空白处---即可设计A表属性,点确定.如下 同理,生成一 ...

  4. php有关数据推荐

    # PHP<PHP程序设计>(第2版)  --PHP语法和入门最好的书<PHP5权威编程>  --PHP入门后升级书<深入PHP:面向对象.模式与实践>(第3版) ...

  5. spring boot项目下application.properties中使用logging.path和logging.file时的细节

    logging.path仅仅用于指定日志输出的目录,且不能指定输出的文件名,且默认名为spring.log  若指定的是相对目录,则会生成在当前总项目的目录下 idea中新建sprnig boot项目 ...

  6. php企业微信获取员工userid以及打卡信息

    企业微信可以通过部门列表获取部门下的员工信息,从而获取到员工的userid //首先获取需要的access_token $access_token = json_decode($this->ge ...

  7. cocos2d-x 3.2锚点，Point，addchild，getcontensize

    一,锚点 打个比方.在墙挂一幅画时,要钉一个钉子,那个钉子就是锚点. 然后挂图时,钉子(锚点)放在要订的位置(position),订下去.完成(贴图结束). 贴图的基本点,锚点默认为(0.5,0.5) ...

  8. MySQL时间盲注五种延时方法 (PWNHUB 非预期解)

    转自cdxy师傅:https://www.cdxy.me/?p=789 PWNHUB 一道盲注题过滤了常规的sleep和benchmark函数,引发对时间盲注中延时方法的思考. 延时函数 SLEEP ...

  9. nishang的介绍与使用

    0x01前言 Nishang是一个PowerShell攻击框架,它是PowerShell攻击脚本和有效载荷的一个集合.Nishang被广泛应用于渗透测试的各个阶段,本文主要介绍如何使用Nishang的 ...

  10. Cobalt Strike之CHM、LNK、HTA钓鱼

    CHM钓鱼 CHM介绍 CHM(Compiled Help Manual)即“已编译的帮助文件”.它是微软新一代的帮助文件格式,利用HTML作源文,把帮助内容以类似数据库的形式编译储存.利用CHM钓鱼 ...