javascript设计模式——观察者模式

关键词：

观察者模式，又称发布-订阅模式或消息机制，定义了一种依赖关系，解决了主题对象与观察者之间功能的耦合。

通过运用观察者模式，可以解决团队开发中的模块间通讯问题，这是模块间解耦的一种可行方案。

首先，我们来把观察者对象创建处理，它有一个消息容器和三个方法，分别是订阅消息方法、发送订阅消息的方法和取消订阅消息的方法。如下：　　

// 将观察者放在闭包中，当页面加载就立即执行
var Observer = (function () {
    // 将消息容器做为静态私有变量，防止消息队列泄露而被篡改
    var _messages = {};

    return {
        regist: function () {}, // 注册消息
        fire: function () {},   // 发布消息
        remove: function () {}  // 取消消息
    };
})();

现在，观察者的雏形已经出来了，我们接下来的事情就是一步步实现这三个方法。

1. 注册消息的作用是将订阅者的消息推入到消息队列中，因此我们需要接受两个参数：消息类型和相应的处理动作。

    在推入到消息队列时，如果此消息不存在则应该创建一个消息类型并将该消息放入消息队列中；如果此消息存在则应该将消息执行方法推入改消息对应的执行方法队列中，这么做的目的是保证多     个模块注册同一则消息时能顺利执行。　　

regist: function (type, fn) {
    if (typeof _messages[type] === ‘undefined‘) {
        _messages[type] = [fn]; // 若此消息不存在，则创建一个消息容器
    }
    else {
        _messages[type].push(fn); // 消息存在，则将动作方法推入该消息对应的动作执行序列中
    }
}

2. 发布消息的功能是，当观察者发布一个消息时，会将所有订阅者订阅的消息依次执行。故应该接受两个参数：消息类型和动作执行时要传递的参数。

    在执行消息动作队列之前对消息存在的校验是很有必要的，然后遍历消息执行方法队列，并依次执行。

fire: function (type, args) {
    if (!_messages[type]) {
        return;
    };

    var events = {
        type: type,
        args: args || {}
    };

    for (var i = 0, len = _messages[type].length; i < len; i++) {
        _messages[type][i].call(this, args);
    };
}, 

3. 注销消息的功能是将订阅者注销的消息从消息队列中清除掉，因此我们可以传递两个参数：消息类型和动作函数。

　 如果只传递消息类型参数，则注销所有订阅此消息类型的动作函数，

　 若两者都传递，则只注销此消息类型的当前传递参数的动作函数。

　 当然为了避免删除消息动作时消息不存在的情况出现，对消息队列中消息的存在性校验也是很有必要的。

remove: function (type, fn) {    
    if (!fn) {
        _messages[type] = null;
        return;
    };

    if (_messages[type] instanceof Array) {
        var i = _messages[type].length - 1;
        for (; i >= 0; i--) {
            _messages[type][i] === fn && _messages[type].splice(i, 1);
        };
    }
}

至此，观察者模式就实现完啦！可以稍微测试一下：

var fn1 = function () {
    console.log(1);
}
var fn2 = function () {
    console.log(2);
}
Observer.regist(‘test‘, fn1);
Observer.regist(‘test‘, fn2);

Observer.fire(‘test‘); // 1 2
Observer.remove(‘test‘, fn1);
Observer.fire(‘test‘); // 2

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

javascript原生实现观察者模式

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

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

查看详情

观察者模式——javascript

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

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

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

javascript设计模式

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