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 ...
随机推荐
- Dubbo学习系列之八(分布式事务之MQ方案)
自从小王玩起了微服务,发现微服务果然很强大,好处真是太多,心中暗喜,然而,却也遇到了分布式中最棘手的问题:分布式事务.小王遍访各路神仙,也无个完美开源解决方案,当然,也有些实际可行的手法,虽不算完美, ...
- Nginx安装教程,ubuntu18.04
本文介绍Nginx如何安装,操作系统为Ubuntu 18.04. 一.安装 (1)安装git 执行命令:“sudo apt-get install git”. (2)安装aptitude 执行命令 ...
- .NET Core应用的三种部署方式
.NET Core应用提供了三种部署方式: FDD FDD:Framework-dependent deployment,框架依赖部署.这种方式针对某个特定版本的.NET Core进行发布,只打包应用 ...
- Spring 梳理 - 构造web项目时,使用eclipse如何引用jar包
方法1:直接将jar复制到web项目中的WEB-INF/lib目录中 方法2:构造buildpath时,不使用“外部jar”的形式
- Spring MVC-从零开始-web.xml中classpath和classpath* 有什么区别
web.xml中classpath和classpath* 有什么区别?classpath:只会到你的class路径中查找找文件;classpath*:不仅包含class路径,还包括jar文件中(cla ...
- 通过父级id获取到其下所有子级(无穷级)——Mysql函数实现
[需求]某用户只能查看其自己信息及其下级信息,涉及通过该用户所在部门获取其下所有部门(多层)id集合. 步骤一:对数据库进行设置: set global log_bin_trust_function_ ...
- Webstorm轻松部署项目至服务器
wo大前端在开发环境下,需要将项目部署到测试环境,webstorm进行基础配置操作就可实现. 一.在Deployment选项下配置远程服务器地址 点击加号,选择type类型,Name自己填,帮你找到这 ...
- linux目录化结构
初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp ...
- java多态的实现原理(JVM调用过程)(综合多篇文章,参考见文末)
一个对象变量可以指示多种实际类型的现象称为多态 允许不同类的对象对同一消息做出响应.方法的重载.类的覆盖正体现了多态. 1.多态的机制 1.1 本质上多态分两种 1.编译时多态(又称静态多态) 2.运 ...
- 视图向控制器传参@RequestMapping()和@RequestParam()
@RequestMapping()和@RequestParam()注解在spring-web-4.3.18.RELEASE.jar包下,当然可以是其他版本,所在包名如下: @RequestMappin ...