vue订阅者模式
<!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订阅者模式的更多相关文章
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- C#事件支持发布者/订阅者模式（观察者模式）
C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数. public delegate void delUpdate(); //委 ...
- Android 订阅-发布者模式-详解
1.概念简述 Android 简称观察者模式, GoF说道:Observer模式的意图是“定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新”. 有 ...
- Publisher/Subscriber 订阅-发布模式
Publisher/Subscriber 订阅-发布模式 本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WC ...
- 设计模式---订阅发布模式(Subscribe/Publish)
设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...
- “一切都是消息”--MSF（消息服务框架）之【发布-订阅】模式
在上一篇,“一切都是消息”--MSF(消息服务框架)之[请求-响应]模式 ,我们演示了MSF实现简单的请求-响应模式的示例,今天来看看如何实现[发布-订阅]模式.简单来说,该模式的工作过程是: 客户端 ...
- 在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 前端工程化（三）---Vue的开发模式
从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...
- “一切都是消息”--iMSF（即时消息服务框架）之【发布-订阅】模式
MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately)消息,所以iMSF就是 immediately Message S ...
随机推荐
- 使用.NET Core创建Windows服务（二） - 使用Topshelf方式
原文:Creating Windows Services In .NET Core – Part 2 – The "Topshelf" Way 作者:Dotnet Core Tut ...
- 生产环境项目问题记录系列（二）：Docker打包镜像Nuget包因权限问题还原失败
docker打包镜像遇到一个因为nuget权限验证问题导致镜像打包失败的问题,公司Nuget包用的是tfs管理的,tfs有权限验证,结果导致nuget还原失败,原有的NuGet.config文件如下: ...
- php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
$str="你好<我>(爱)[北京]{天安门}"; echo f1($str); //返回你好 echo f2($str); //返回我 echo f3($str); ...
- pyinstaller 打包exe程序读不到配置文件No such file
挺久没更新博客的,一来之前是觉得才疏学浅,记录下来的太简单没人看.二来时间上不是很充裕(不是借口,有时间打游戏,没时间总结) 偶然有一次发现同事在搜索解决问题的时候正在看我博客的解决思路,很奇妙的感觉 ...
- 彻底理解CORS跨域原理
背景 现在的前端开发中都是前后端分离的开发模式,数据的获取并非同源,所以跨域的问题在我们日常开发中特别常见.其实这种资料网上也是一搜一大堆,但是都不够全面,理解起来也不够透彻.这篇文章就结合具体的示例 ...
- [PHP] php, apache, VS Code安装与配置
1. 下载
- WKWebView针对于Cordova的IOS平台性能提升
使用cordova做跨平台开发已久,针对于Android的性能与页面渲染问题仍然让人头疼,因为仍然有一部分人使用性能一般的手机,版本在 4.2-4.4之间,甚至都无法支持HTML5的flex布局,使得 ...
- pycharm 激活码 2019/11最新福利（2）
812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlT ...
- Node.js入门教程 第六篇 （连接使用MySql）
连接使用MySql 安装MySql模块: npm install mysql 创建连接: const mysql = require('mysql') // 连接 mysql 服务器 const co ...
- mongodb完整安装
在线下载安装依赖包 yum -y install gcc gcc-c++ yum -y install gcc gcc-c++ ncurses ncurses-devel cmake bison yu ...