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 ...
随机推荐
- [一]基本sqlplus命令
基本sqlplus命令: 1: sqlplus scott/tiger ; #简化连接数据库 2:show user; #想知道当前登陆的用户是哪一位 3:conn 用户名[/密码] [AS SYSD ...
- HTML5 相关扩展
一.与类相关的扩展 class属性的应用极其广泛,与class的相关的操作也越来越简化,HTML5增加了 getElementsByClassName来查找元素,通过也增加了classList属性,方 ...
- redis 漏洞造成服务器被入侵-CPU飙升
前言 前几天在自己服务器上搭了redis,准备想着大展身手一番,昨天使用redis-cli命令的时候,10s后,显示进程已杀死.然后又试了几次,都是一样的结果,10s时间,进程被杀死.这个时候我还 ...
- Django基础之jQuery操作cookie
jquery之cookie操作 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquer ...
- Unicode 和 UTF-8 之间的关系
一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个 ...
- m*n 矩阵中求正方形个数
<?php /** * Notes: * User: liubing17 * DateTime: 2019-10-17 17:10 */ function get($m, $n){ /* * 获 ...
- 爬虫 xpath
xpath简介 1.xpath使用路径表达式在xml和html中进行导航 2.xpath包含标准函数库 3.xpath是一个w3c的标准 xpath节点关系 1.父节点 2.字节点 3.同胞节点 4. ...
- .Net Core中的ObjectPool
一.对象池 运用对象池化技术可以显著地提升性能,尤其是当对象的初始化过程代价较大或者频率较高.下面是ObjectPool源码中涉及的几个类.当你看过.Net Core源码很多时,你会发现,微软的开发很 ...
- python requests简单接口自动化
get方法 url:显而易见,就是接口的地址url啦 headers:定制请求头(headers),例如:content-type = application/x-www-form-urlencode ...
- php函数fsockopen的使用
函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...