http://www.cnblogs.com/surahe/p/6065778.html

 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案。比如,我们可以订阅 ajax 请求的 error 、 succ 等事件。 或者如果想在动画的每一帧完成之后做一些事情,那我们可以订阅一个事件,然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布—订阅模式,我们就无需过多关注对象在异步运行期间的内部状态,而只需要订阅感兴趣的事件发生点。

  发布—订阅模式可以取代对象之间硬编码的通知机制,一个对象不用再显式地调用另外一个对象的某个接口。发布—订阅模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响它们之间相互通信。当有新的订阅者出现时,发布者的代码不需要任何修改;同样发布者需要改变时,也不会影响到之前的订阅者。只要之前约定的事件名没有变化,就可以自由地改变它们。

  1. <script>
  2. var salesOffices = {};
  3. salesOffices.clientList = [];
  4.  
  5. salesOffices.listen = function(key, fn) {
  6. if (!this.clientList[key]) {
  7. this.clientList[key] = [];
  8. }
  9. this.clientList[key].push(fn);
  10. };
  11.  
  12. salesOffices.trigger = function() {
  13. var key = Array.prototype.shift.call(arguments),
  14. fns = this.clientList[key];
  15. if (!fns || fns.length === 0) {
  16. return false;
  17. }
  18. for (var i=0, fn; fn=fns[i++];) {
  19. fn.apply(this, arguments);
  20. }
  21. };
  22.  
  23. salesOffices.listen('squareMeters88', function(price, squareMeter) {
  24. console.log('price is :' + price);
  25. console.log('squareMeter: ' + squareMeter);
  26. });
  27.  
  28. salesOffices.listen('squareMeters110', function(price, squareMeter) {
  29. console.log('price is :' + price);
  30. console.log('squareMeter: ' + squareMeter);
  31. });
  32.  
  33. console.log(salesOffices);
  34. salesOffices.trigger('squareMeters88', 20000, 88);
  35. salesOffices.trigger('squareMeters110', 30000, 110);
  36.  
  37. </script>

用原生javascript实现最简单的发布者-订阅者模式的更多相关文章

  1. JavaScript 设计模式: 发布者-订阅者模式

    JavaScript 设计模式: 发布者-订阅者模式 发布者-订阅者模式 https://github.com/Kelichao/javascript.basics/issues/22 https:/ ...

  2. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  3. C#事件支持发布者/订阅者模式(观察者模式)

    C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数.        public delegate void delUpdate();  //委 ...

  4. EventBus事件总线框架(发布者/订阅者模式,观察者模式)

    一. android应用内消息传递的方式: 1. handler方式-----------------不同线程间传递消息. 2. Interface接口回调方式-------任意两个对象. 3. In ...

  5. 用原生JavaScript做个简单的回到顶部

    很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在 ...

  6. 原生JavaScript实现一个简单的todo-list

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. Javascript模式(二) 发布者/订阅者模式

    var publisher = { // 订阅者数组 subscribers : { "any" : [] }, // 增加订阅者 on : function(type, fn, ...

  8. 发布者订阅者模式之JAVA实现

        1.发布者接口 package com.shoshana.publishsubscribe; public interface IPublisher<M> { public voi ...

  9. js中的观察者模式与发布者/订阅者模式的区别?

随机推荐

  1. 《Cracking the Coding Interview》——第8章:面向对象设计——题目5

    2014-04-23 18:42 题目:设计一个在线阅读系统的数据结构. 解法:这题目太大了,我的个亲娘.显然你不可能一次加载一整本书,做到单页纸加载的粒度是很必要的.为了读书的连贯效果,预取个几页也 ...

  2. 《Cracking the Coding Interview》——第8章:面向对象设计——题目2

    2014-04-23 17:45 题目:假设有个呼叫中心,有接线员.经理.主管三种角色.如果接线员无法处理呼叫,就上传给经理:如果仍无法处理,则上传给主管.请用代码描述这一过程. 解法:第一眼觉得这题 ...

  3. 【Substring with Concatenation of All Words】cpp

    题目: You are given a string, s, and a list of words, words, that are all of the same length. Find all ...

  4. 发布“豪情”设计的新博客皮肤-darkgreentrip

    豪情 (http://www.cnblogs.com/jikey/)是一名在上海的前端开发人员,长期驻扎在园子里.他为大家设计了一款新的博客皮肤——darkgreentrip. 以下是该博客皮肤的介绍 ...

  5. Python 绘制棋盘

    import turtle pen = turtle.Pen() pen.speed(10) width = 30 # 格子宽度 count = 18 # 横向纵向格子数 o = width * co ...

  6. Nodejs的那些事

    前言: Node.js实际上是算是个前端开发,但是我们要做APP自动化涉及到 node.js ,也需要它来帮我们安装一些 packing 一.Node.js安装 1.安装Node.js:立即下载 2. ...

  7. java初学3

    1.包装类 Java提倡的万物皆对象,但是数据类型的划分出现了基本数据类型和引用数据类型,那么我们怎么能把基本数据类型称为对象呢? Java为每个原始类型提供了封装类,Integer是java为int ...

  8. STL之list使用简介

    构造函数 list<int> c0; //空链表 list<); //建一个含三个默认值是0的元素的链表 list<,); //建一个含五个元素的链表,值都是2 list< ...

  9. [译]在python中如何有效的比较两个无序的列表是否包含完全同样的元素(不是set)?

    原文来源: https://stackoverflow.com/questions/7828867/how-to-efficiently-compare-two-unordered-lists-not ...

  10. POJ 3041 Asteroids | 匈牙利算法模板

    emmmmm 让你敲个匈牙利 #include<cstdio> #include<algorithm> #include<cstring> #define N 51 ...