<!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. CAS详细登录流程(转）

    转:https://www.cnblogs.com/lihuidu/p/6495247.html 4.CAS的详细登录流程 上图是3个登录场景,分别为:第一次访问www.qiandu.com.第二次访 ...

  2. mysql操作遇到的坑（第二版）

    1.通过条件查询出上一条与下一条 sql说明:本表关联本表,然后通过其中一个表,查询出对应的条件,再用另外一个表求出上一条与下一条的数据,求出来的数据是多条的 SELECT ua.id, ua.wx_ ...

  3. React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

    最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...

  4. 基于.NET环境，C#语言 实现 TCP NAT

    基于.NET平台和C#语言实现TCP NAT穿越        1.<C# WinForm 跨线程访问控件(实用简洁写法)>       2.<基于.NET环境,C#语言 实现 TC ...

  5. 02-28 scikit-learn库之线朴素贝叶斯

    目录 scikit-learn库之朴素贝叶斯 一.MultinomialNB 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.GaussianNB 三.Bernoul ...

  6. python编程基础之三十五

    系统的魔术方法:系统的魔术方法特别多,但是也都特别容易懂,简单的讲就是对系统的内置函数进行重写,你需要什么效果就重写成什么样, 比如说len()方法针对的对象本来没有自定义类的对象,但是当你重写了__ ...

  7. 【TencentOS tiny】 超详细的TencentOS tiny移植到STM32F103全教程

    移植前的准备工作 1. 获取STM32的裸机工程模板 STM32的裸机工程模板直接使用野火STM32开发板配套的固件库例程即可.可以从我github上获取https://github.com/jiej ...

  8. 两种高效的事件处理模型：Reactor模式和Proactor模式

    随着IO多路复用技术的出现,出现了很多事件处理模式.同步I/O模型通常由Reactor模式实现,而异步I/O模型则由Proactor模式实现. Reactor模式: Reator类图如上所示,Reac ...

  9. Java课程作业--参数求和

    一.设计思想: 这个程序是利用了参数进行输入,达到一次可以输入多个值的问题,同时输入数的个数没有限制(参数大于0个,如果为0个,应该输出提示请输入参数).本程序共分为步:1.利用参数行进行输入要加的数 ...

  10. Java自动化测试框架-02 - TestNG之理论实践 - 纸上得来终觉浅，绝知此事要躬行（详细教程）

    理论 TestNG,即Testing, NextGeneration,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架,即可以用来做单元测试,也可以用 ...