<!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. Spring Cloud系列之Eureka服务治理

    写在前面 Spring Cloud Eureka是基于Netflix Eureka做的二次封装.主要包含两部分: 服务注册中心 eureka server 服务提供者 eureka client ps ...

  2. phpStudy后门漏洞利用复现

    phpStudy后门漏洞利用复现 一.漏洞描述 Phpstudy软件是国内的一款免费的PHP调试环境的程序集成包,通过集成Apache.PHP.MySQL.phpMyAdmin.ZendOptimiz ...

  3. Java 代理模式 （二） 动态代理

    代理模式 代理(Proxy)是一种设计模式, 提供了对目标对象另外的访问方式:即通过代理访问目标对象. 这样好处: 可以在目标对象实现的基础上,增强额外的功能操作.(扩展目标对象的功能). 代理模式的 ...

  4. linux查看cpu核数和内存指令

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  5. 『TensorFlow2.0正式版』TF2.0+Keras速成教程·零：开篇简介与环境准备

    此篇教程参考自TensorFlow 2.0 + Keras Crash Course,在原文的基础上进行了适当的总结与改编,以适应于国内开发者的理解与使用,水平有限,如果写的不对的地方欢迎大家评论指出 ...

  6. 是男人就过八题A_A String Game题解

    题意 给一个字符串\(s\),和\(n\)个子串\(t[i]\),两个人博弈,每次取出一个串\(t[i]\),在后面加入一个字符,保证新字符串仍然是\(s\)的子串,无法操作的人输. 分析 n个子串, ...

  7. [Note] GNUstep on Windows

    1.下载与安装 www.gnustep.org/windows/installer.html 下载 GNUstep MSYS System GNUstep Core GNUstep Devel 并安装 ...

  8. SSH实现无密码登录

    1.生成秘钥 : ssh-keygen -t rsa # -t 指定生成秘钥方式,生成秘钥过程需要三次回车 2.将生成的公钥传给 ssh 的对端 ssh-copy-id root@192.168.3. ...

  9. laravel学习之旅

    前言:之前写了二篇YII2.0的基本mvc操作,所以,打算laravel也来这一下 *安装现在一般都用composer安装,这里就不讲述了* 一.熟悉laravel (1)如果看到下面这个页面,就说明 ...

  10. Spring Boot 常用注解汇总

    一.启动注解 @SpringBootApplication @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documen ...