用原生javascript实现最简单的发布者-订阅者模式
http://www.cnblogs.com/surahe/p/6065778.html
发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。比如,我们可以订阅 ajax 请求的 error 、 succ 等事件。 或者如果想在动画的每一帧完成之后做一些事情,那我们可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式,我们就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点。
发布—订阅模式可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就可以自由地改变它们。
<script>
var salesOffices = {};
salesOffices.clientList = [];
salesOffices.listen = function(key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn);
};
salesOffices.trigger = function() {
var key = Array.prototype.shift.call(arguments),
fns = this.clientList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i=0, fn; fn=fns[i++];) {
fn.apply(this, arguments);
}
};
salesOffices.listen('squareMeters88', function(price, squareMeter) {
console.log('price is :' + price);
console.log('squareMeter: ' + squareMeter);
});
salesOffices.listen('squareMeters110', function(price, squareMeter) {
console.log('price is :' + price);
console.log('squareMeter: ' + squareMeter);
});
console.log(salesOffices);
salesOffices.trigger('squareMeters88', 20000, 88);
salesOffices.trigger('squareMeters110', 30000, 110);
</script>

用原生javascript实现最简单的发布者-订阅者模式的更多相关文章
- JavaScript 设计模式: 发布者-订阅者模式
JavaScript 设计模式: 发布者-订阅者模式 发布者-订阅者模式 https://github.com/Kelichao/javascript.basics/issues/22 https:/ ...
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- C#事件支持发布者/订阅者模式(观察者模式)
C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数. public delegate void delUpdate(); //委 ...
- EventBus事件总线框架(发布者/订阅者模式,观察者模式)
一. android应用内消息传递的方式: 1. handler方式-----------------不同线程间传递消息. 2. Interface接口回调方式-------任意两个对象. 3. In ...
- 用原生JavaScript做个简单的回到顶部
很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在 ...
- 原生JavaScript实现一个简单的todo-list
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Javascript模式(二) 发布者/订阅者模式
var publisher = { // 订阅者数组 subscribers : { "any" : [] }, // 增加订阅者 on : function(type, fn, ...
- 发布者订阅者模式之JAVA实现
1.发布者接口 package com.shoshana.publishsubscribe; public interface IPublisher<M> { public voi ...
- js中的观察者模式与发布者/订阅者模式的区别?
随机推荐
- Retrofit get post query filed FiledMap
直接请求型 1.如果是直接请求某一地址,写法如下: @GET("/record") Call getResult(); 2.如果是组合后直接请求,如/result/{id}写法如下 ...
- mybatis和redis整合 log4j打印sql语句
首先,需要在项目中引进jedis-2.8.1.jar包,在pom.xml里加上 <dependency> <groupId>redis.clients</groupId& ...
- laravel5.5入口文件分析
入口文件 public/index.php 1.加载composer的自动加载器 require __DIR__.'/../vendor/autoload.php'; 自动加载,不用再各种requir ...
- 剑指Offer - 九度1360 - 乐透之猜数游戏
剑指Offer - 九度1360 - 乐透之猜数游戏2014-02-05 19:54 题目描述: 六一儿童节到了,YZ买了很多丰厚的礼品,准备奖励给JOBDU里辛劳的员工.为了增添一点趣味性,他还准备 ...
- python自动化运维篇
1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...
- Python全栈工程师(字符串/序列)
ParisGabriel Python 入门基础 字符串:str用来记录文本信息字符串的表示方式:在非注释中凡是用引号括起来的部分都是字符串‘’ 单引号“” 双引号''' ''' ...
- Ext JS 的一个非常好的学习网站
起飞网 http://www.qeefee.com/zt-extjs 发现一个非常好的学习ExtJS的中文网站
- poj1273 网络流入门题 dinic算法解决,可作模板使用
Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 62078 Accepted: 2384 ...
- Visual Studio2015 、2017中如何支持MYSQL数据源
原文:Visual Studio2015 .2017中如何支持MYSQL数据源 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/ght886/arti ...
- PHP 自制分页类
思路: 通过给页面url传递get参数,来控制每页的sql查询(mysql关键词:limit),实现分页查询 代码: class getpage{ public $pagenum; public $p ...