JavaScript设计模式与开发实践 - 观察者模式

概述

观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生变化时就会通知所有的订阅者,使得它们能够自动更新自己。

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

观察者模式的中心思想就是促进松散耦合,一为时间上的解耦,二为对象之间的解耦。让耦合的双方都依赖于抽象,而不是依赖于具体,从而使得各自的变化都不会影响到另一边的变化。

实现

(function (window, undefined) {
    var _subscribe = null,
        _publish = null,
        _unsubscribe = null,
        _shift = Array.prototype.shift, // 删除数组的第一个 元素,并返回这个元素
        _unshift = Array.prototype.unshift, // 在数组的开头添加一个或者多个元素,并返回数组新的length值
        namespaceCache = {},
        _create = null,
        each = function (ary, fn) {
            var ret = null;
            for (var i = 0, len = ary.length; i < len; i++) {
                var n = ary[i];
                ret = fn.call(n, i, n);
            }
            return ret;
        };


    // 订阅消息
    _subscribe = function (key, fn, cache) {
        if (!cache[key]) {
            cache[key] = [];
        }
        cache[key].push(fn);
    };


    // 取消订阅(取消全部或者指定消息)
    _unsubscribe = function (key, cache, fn) {
        if (cache[key]) {
            if (fn) {
                for (var i = cache[key].length; i >= 0; i--) {
                    if (cache[key][i] === fn) {
                        cache[key].splice(i, 1);
                    }
                }
            } else {
                cache[key] = [];
            }
        }
    };


    // 发布消息
    _publish = function () {
        var cache = _shift.call(arguments),
            key = _shift.call(arguments),
            args = arguments,
            _self = this,
            ret = null,
            stack = cache[key];


        if (!stack || !stack.length) {
            return;
        }


        return each(stack, function () {
            return this.apply(_self, args);
        });
    };


    // 创建命名空间
    _create = function (namespace) {
        var namespace = namespace || "default";
        var cache = {},
            offlineStack = {},    // 离线事件,用于先发布后订阅,只执行一次
            ret = {
                subscribe: function (key, fn, last) {
                    _subscribe(key, fn, cache);
                    if (!offlineStack[key]) {
                        offlineStack[key] = null;
                        return;
                    }
                    if (last === "last") { // 指定执行离线队列的最后一个函数,执行完成之后删除
                        offlineStack[key].length && offlineStack[key].pop()();  // [].pop => 删除一个数组中的最后的一个元素,并且返回这个元素
                    } else {
                        each(offlineStack[key], function () {
                            this();
                        });
                    }
                    offlineStack[key] = null;
                },
                one: function (key, fn, last) {
                    _unsubscribe(key, cache);
                    this.subscribe(key, fn, last);
                },
                unsubscribe: function (key, fn) {
                    _unsubscribe(key, cache, fn);
                },
                publish: function () {
                    var fn = null,
                        args = null,
                        key = _shift.call(arguments),
                        _self = this;


                    _unshift.call(arguments, cache, key);
                    args = arguments;
                    fn = function () {
                        return _publish.apply(_self, args);
                    };


                    if (offlineStack && offlineStack[key] === undefined) {
                        offlineStack[key] = [];
                        return offlineStack[key].push(fn);
                    }
                    return fn();
                }
            };


        return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
    };


    window.pubsub = {
        create: _create, // 创建命名空间
        one: function (key, fn, last) { // 订阅消息,只能单一对象订阅
            var pubsub = this.create();
            pubsub.one(key, fn, last);
        },
        subscribe: function (key, fn, last) { // 订阅消息,可多对象同时订阅
            var pubsub = this.create();
            pubsub.subscribe(key, fn, last);
        },
        unsubscribe: function (key, fn) { // 取消订阅,(取消全部或指定消息)
            var pubsub = this.create();
            pubsub.unsubscribe(key, fn);
        },
        publish: function () { // 发布消息
            var pubsub = this.create();
            pubsub.publish.apply(this, arguments);
        }
    };
})(window, undefined);

应用

假如我们正在开发一个商城网站,网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件,就是必须先用ajax异步请求获取用户的登录信息。

至于ajax请求什么时候能成功返回用户信息,这点我们没有办法确定。更重要的一点是,我们不知道除了header头部、nav导航、消息列表、购物车之外,将来还有哪些模块需要使用这些用户信息。如果它们和用户信息模块产生了强耦合,比如下面这样的形式:

login.succ(function (data) {
    header.setAvatar(data.avatar); // 设置header模块的头像
    nav.setAvatar(data.avatar); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新购物车列表
});

现在登录模块是由你负责编写的,但我们还必须了解header模块里设置头像的方法叫setAvatar、购物车模块里刷新的方法叫refresh,这种耦合性会使程序变得僵硬,header模块不能随意再改变setAvatar的方法名。这是针对具体实现编程的典型例子,针对具体实现编程是不被赞同的。

等到有一天,项目中又新增了一个收货地址管理的模块,这个模块是由另一个同事所写的,此时他就必须找到你,让你登录之后刷新一下收货地址列表。于是你又翻开你3个月前写的登录模块,在最后部分加上这行代码:

login.succ(function (data) {
    header.setAvatar(data.avatar);
    nav.setAvatar(data.avatar);
    message.refresh();
    cart.refresh();
    address.refresh(); // 增加这行代码
});

我们就会越来越疲于应付这些突如其来的业务要求,不停地重构这些代码。

用观察者模式重写之后,对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时,登录模块只需要发布登录成功的消息,而业务方接受到消息之后,就会开始进行各自的业务处理,登录模块并不关心业务方究竟要做什么,也不想去了解它们的内部细节。改善后的代码如下:

$.ajax('http:// xxx.com?login', function(data) { // 登录成功
    pubsub.publish('loginSucc', data); // 发布登录成功的消息
});


// 各模块监听登录成功的消息:


var header = (function () { // header模块
    pubsub.subscribe('loginSucc', function(data) {
        header.setAvatar(data.avatar);
    });
    return {
        setAvatar: function(data){
            console.log('设置header模块的头像');
        }
    };
})();


var nav = (function () { // nav模块
    pubsub.subscribe('loginSucc', function(data) {
        nav.setAvatar(data.avatar);
    });
    return {
        setAvatar: function(avatar) {
            console.log('设置nav模块的头像');
        }
    };
})();

如上所述,我们随时可以把setAvatar的方法名改成setTouxiang。如果有一天在登录完成之后,又增加一个刷新收货地址列表的行为,那么只要在收货地址模块里加上监听消息的方法即可,而这可以让开发该模块的同事自己完成,你作为登录模块的开发者,永远不用再关心这些行为了。代码如下:

var address = (function () { // 地址模块
    pubsub.subscribe('loginSucc', function(obj) {
        address.refresh(obj);
    });
    return {
        refresh: function(avatar) {
            console.log('刷新收货地址列表');
        }
    };
})();

优缺点

优点

  1. 支持简单的广播通信,自动通知所有已经订阅过的对象;
  2. 页面载入后发布者很容易与订阅者存在一种动态关联,增加了灵活性;
  3. 发布者与订阅者之间的抽象耦合关系能够单独扩展以及重用。

缺点

  1. 创建订阅者本身要消耗一定的时间和内存,而且当你订阅一个消息后,也许此消息最后都未发生,但这个订阅者会始终存在于内存中;
  2. 虽然可以弱化对象之间的联系,但如果过度使用的话,对象和对象之间的必要联系也将被深埋在背后,会导致程序难以跟踪维护和理解。

参考

  • 《JavaScript设计模式与开发实践》 第 8 章 发布—订阅模式
  • 《JavaScript设计模式》 第 9 章 第 5 节 Observer(观察者)模式
  • http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html

原文发布于微信公众号 - 前端布道(FontendPreach)

原文发表时间:2016-06-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

WebStorm文件类型关联设置

无意中创造了一个没有扩展名的文件,我选择了错误的文件类型关联。是js类型的,我却选成了文本,Ws每次编辑类型就成了txt文本,这个问题让我很苦恼,以下是我的解决...

38060
来自专栏前端杂货铺

XSS分析及预防

XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容...

37170
来自专栏DeveWork

通过多说服务器缓存加速Gravatar 头像,解决被墙问题

由于大中华局域网的关系,Gravatar 头像所在的域名gravatar.com 及其二级域常常被墙,就算没有被墙,访问速度也非常慢。之前曾经分享过通过《Wor...

254100
来自专栏技术博文

关于微信二次分享,描述变链接的解决方法(一)----文档说明

声明: 本篇博文只是个人工作中的分享总结,仅代表个人观点,虽然解决了不少网友的问题,但同时也引来了一些网友的不满,所以特此声明,当您遇到本博文解决不了的问题,可...

1.4K70
来自专栏酷玩时刻

IDE中显示 *.properties 为中文

之前做过几个开源项目(极速开发微信公众号weixin_guide以及IJPay 让支付触手可及),Demo中有涉及到一些配置文件。有些同学下载了之后反馈说有乱码...

11120
来自专栏知晓程序

开发 | 无需后端编码,10 分钟教你实现一个朋友圈小程序

虽然目标功能的业务逻辑并不复杂,但其背后需要一套靠谱的权限控制系统,也意味着需要一个完整的后端服务系统来支持运行。

21940
来自专栏Java成神之路

Tomcat_异常_02_IOException while loading persisted sessions: java.io.EOFException

     EOFException表示输入过程中意外地到达文件尾或流尾的信号,导致从session中获取数据失败。

8810
来自专栏腾讯IVWEB团队的专栏

Node.js 编写 CLI 的实践

通常而言,Node.js 的应用场景有前后端分离、海量web页面渲染服务、命令行工具和桌面端应用等等。本篇文章选取 CLI(Command Line Tools...

32300
来自专栏linux系统运维

linux任务计划, chkconfig工具,systemd管理服务, unit介绍,target介绍

20050
来自专栏魏艾斯博客www.vpsss.net

网站目录/绝对路径/相对路径-零基础搭建wordpress教程

网站基本知识包括很多方面,网站结构、网页路径、域名、服务器、建站等等,我们已经写过域名和新手如何选择服务器了,正好最近遇到群友对网站基本知识有些疑问,魏艾斯博客...

48710

扫码关注云+社区

领取腾讯云代金券