正文

javascript设计模式观察者模式

 2022-03-14  785

关键词：

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

举个例子，我来公司面试的时候，完事之后每个面试官都会对我说：“请留下你的联系方式，有消息我们会通知你”。在这里“我”是订阅者，面试官是发布者。所以我不用每天或者每小时都去询问面试结果，通讯的主动权掌握在了面试官手上。而我只需要提供一个联系方式。

在Js中，DOM事件实际上就是一个观察者模式。

document.body.addEventListener(‘click‘,function(){
       ...
   },false);

我们并不知道用户什么时候会点击body，所以注册了一个这样的事件，当body被点击时，body节点就会向订阅者发布这个消息。

除此之外，还可以随意的增加订阅者和删除订阅者：

document.body.addEventListener(‘click‘,function(){
       console.log(1)
   },false);
   document.body.addEventListener(‘click‘,function(){
       console.log(2)
   },false); 
   document.body.addEventListener(‘click‘,function(){
       console.log(3)
   },false);

基于上面的面试例子，可以由以下的代码来表现：

面试者把简历扔到一个盒子里，然后面试官在合适的时机拿着盒子里的简历挨个打电话通知结果.

Events = function() {
 
           var listen, log, obj, one, remove, trigger, __this;
 
           obj = {};
 
           __this = this;
 
           listen = function( key, eventfn ) {  //把简历扔盒子, key就是联系方式.
 
             var stack, _ref;  //stack是盒子
 
             stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
 
             return stack.push( eventfn );
 
           };
 
           one = function( key, eventfn ) {
 
             remove( key );
 
             return listen( key, eventfn );
 
           };
 
           remove = function( key ) {
 
             var _ref;
 
             return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
 
           };
 
           trigger = function() {  //面试官打电话通知面试者
 
             var fn, stack, _i, _len, _ref, key;
 
             key = Array.prototype.shift.call( arguments ); 
 
             stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
 
             for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
 
               fn = stack[ _i ];
 
               if ( fn.apply( __this,  arguments ) === false) {
 
                 return false;
 
               }
 
             }
 
             return {
 
                listen: listen,
 
                one: one,
 
                remove: remove,
 
                trigger: trigger
 
             }
 
           }

　观察者的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。

在Backbone框架中，事件的change机制就是一个观察者模式，当用户改变了某个属性时，会调用trigger事件来依次通知订阅者触发事件。

设计模式系列基本是参考JavaScript设计模式与开发实践一书的内容，提取里面的纲要方便学习。

javascript设计模式-订阅发布模式(观察者模式)

varEvent=(function(){varglobal=this,Event,_default=‘default‘;Event=function(){var_create,_listen,_trigger,_remove,_shift=Array.prototype.shift,_unshift=Array.prototype.unshift,namespaceCache={},each=f 查看详情

javascript订阅-发布模式（观察者模式）(代码片段)

查看详情

javascript---设计模式之观察者模式

概念观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。作用支... 查看详情

javascript观察者模式

观察者模式观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。*... 查看详情

深入理解javascript系列（32）：设计模式之观察者模式

介绍观察者模式又叫公布订阅模式（Publish/Subscribe），它定义了一种一对多的关系。让多个观察者对象同一时候监听某一个主题对象。这个主题对象的状态发生变化时就会通知全部的观察者对象，使得它们可以自己主动更新自己... 查看详情

javascript观察者行为设计模式(代码片段)

查看详情

javascript-观察者模式

观察者模式方法 1.称之为消息机制或发布-订阅者模式 2.定义了一种依赖关系解决了主体对象与观察者之间功能的耦合观察者方法//将观察者放在闭包中，当页面加载就立即执行varObserver=(function(){var_messages={};return{... 查看详情

javascript设计模式观察者模式

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。举个例子，... 查看详情

javascript设计模式与开发实践–观察者模式

概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生... 查看详情

javascript观察者模式

...状态发生该变时，所有依赖于它的对象都将得到通知。在JavaScript中，一般用事件模型来替代传统的观察者模式。下面是售楼处(发布者)与各看房者(订阅者)的例子： varevent={ 查看详情

javascript设计模式--行为型--设计模式之observer观察者模式（19）(代码片段)

JAVASCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVASCRIPT语言来实现主体功能，所以不可能像C++，JAVA等面向对象语言一样严谨，大部分程序都附上了JAVASCRIPT代码，代码只是实现了... 查看详情

javascript观察者模式（再次）(代码片段)

查看详情

javascript设计模式--行为型--设计模式之observer观察者模式（19）(代码片段)

javascript原生实现观察者模式

观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，... 查看详情

javascript模块，单例和观察者模式(代码片段)

查看详情

观察者模式——javascript

观察者模式又被称为发布-订阅模型或消息机制。基本思想是观察者一个静态（或全局）对象，为大家提供三个方法：发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息，当发布者发布某些消息的时候对应的订... 查看详情

javascript设计模式与开发实践–观察者模式http://web.jobbole.com/87809/

概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生变... 查看详情

javascript设计模式

单例模式（Singleton）工厂模式（Factory）桥接模式（Bridge）组合模式（Composite）门面模式（Facade）适配器模式（Adapter）装饰者模式（Decorator）享元模式（Flyweight）代理模式（Proxy）观察者模式（Observer）命令模式（Command）下面代... 查看详情