深入理解JavaScript系列(36):设计模式之中介者模式详解


Posted in Javascript onMarch 04, 2015

介绍

中介者模式(Mediator),用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。

主要内容来自:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript

正文

软件开发中,中介者是一个行为设计模式,通过提供一个统一的接口让系统的不同部分进行通信。一般,如果系统有很多子模块需要直接沟通,都要创建一个中央控制点让其各模块通过该中央控制点进行交互。中介者模式可以让这些子模块不需要直接沟通,而达到进行解耦的目的。

打个比方,平时常见的机场交通控制系统,塔台就是中介者,它控制着飞机(子模块)的起飞和降落,因为所有的沟通都是从飞机向塔台汇报来完成的,而不是飞机之前相互沟通。中央控制系统就是该系统的关键,也就是软件设计中扮演的中介者角色。

我们先用伪代码来理解一下:

// 如下代码是伪代码,请不要过分在意代码

// 这里app命名空间就相当于扮演中介者的角色

var app = app || {};

 

// 通过app中介者来进行Ajax请求

app.sendRequest = function ( options ) {

    return $.ajax($.extend({}, options);

}

 

// 请求URL以后,展示View

app.populateView = function( url, view ){

  $.when(app.sendRequest({url: url, method: 'GET'})

     .then(function(){

         //显示内容

     });

}

 

// 清空内容

app.resetView = function( view ){

   view.html('');

}

在JavaScript里,中介者非常常见,相当于观察者模式上的消息Bus,只不过不像观察者那样通过调用pub/sub的形式来实现,而是通过中介者统一来管理,让我们在观察者的基础上来给出一个例子:
var mediator = (function () {

    // 订阅一个事件,并且提供一个事件触发以后的回调函数

    var subscribe = function (channel, fn) {

        if (!mediator.channels[channel]) mediator.channels[channel] = [];

        mediator.channels[channel].push({ context: this, callback: fn });

        return this;

    },
    // 广播事件

    publish = function (channel) {

        if (!mediator.channels[channel]) return false;

        var args = Array.prototype.slice.call(arguments, 1);

        for (var i = 0, l = mediator.channels[channel].length; i < l; i++) {

            var subscription = mediator.channels[channel][i];

            subscription.callback.apply(subscription.context, args);

        }

        return this;

    };
    return {

        channels: {},

        publish: publish,

        subscribe: subscribe,

        installTo: function (obj) {

            obj.subscribe = subscribe;

            obj.publish = publish;

        }

    };
} ());

调用代码,相对就简单了:
(function (Mediator) {
    function initialize() {
        // 默认值

        mediator.name = "dudu";
        // 订阅一个事件nameChange

        // 回调函数显示修改前后的信息

        mediator.subscribe('nameChange', function (arg) {

            console.log(this.name);

            this.name = arg;

            console.log(this.name);

        });

    }
    function updateName() {

        // 广播触发事件,参数为新数据

        mediator.publish('nameChange', 'tom'); // dudu, tom

    }
    initialize(); // 初始化

    updateName(); // 调用
})(mediator);

中介者和观察者

到这里,大家可能迷糊了,中介者和观察者貌似差不多,有什么不同呢?其实是有点类似,但是我们来看看具体的描述:

观察者模式,没有封装约束的单个对象,相反,观察者Observer和具体类Subject是一起配合来维护约束的,沟通是通过多个观察者和多个具体类来交互的:每个具体类通常包含多个观察者,而有时候具体类里的一个观察者也是另一个观察者的具体类。

而中介者模式所做的不是简单的分发,却是扮演着维护这些约束的职责。

中介者和外观模式

很多人可能也比较迷糊中介者和外观模式的区别,他们都是对现有各模块进行抽象,但有一些微妙的区别。

中介者所做的是在模块之间进行通信,是多向的,但外观模式只是为某一个模块或系统定义简单的接口而不添加额外的功能。系统中的其它模块和外观模式这个概念没有直接联系,可以认为是单向性。

再给出一个完整的例子:

<!doctype html>

<html lang="en">

<head>

    <title>JavaScript Patterns</title>

    <meta charset="utf-8">

</head>

<body>

<div id="results"></div>

    <script>

        function Player(name) {

            this.points = 0;

            this.name = name;

        }

        Player.prototype.play = function () {

            this.points += 1;

            mediator.played();

        };

        var scoreboard = {
            // 显示内容的容器

            element: document.getElementById('results'),
            // 更新分数显示

            update: function (score) {

                var i, msg = '';

                for (i in score) {

                    if (score.hasOwnProperty(i)) {

                        msg += '<p><strong>' + i + '<\/strong>: ';

                        msg += score[i];

                        msg += '<\/p>';

                    }

                }

                this.element.innerHTML = msg;

            }

        };
        var mediator = {
            // 所有的player

            players: {},
            // 初始化

            setup: function () {

                var players = this.players;

                players.home = new Player('Home');

                players.guest = new Player('Guest');

            },
            // play以后,更新分数

            played: function () {

                var players = this.players,

                    score = {

                        Home: players.home.points,

                        Guest: players.guest.points

                    };
                scoreboard.update(score);

            },
            // 处理用户按键交互

            keypress: function (e) {

                e = e || window.event; // IE

                if (e.which === 49) { // 数字键 "1"

                    mediator.players.home.play();

                    return;

                }

                if (e.which === 48) { // 数字键 "0"

                    mediator.players.guest.play();

                    return;

                }

            }

        };
        // go!

        mediator.setup();

        window.onkeypress = mediator.keypress;
        // 30秒以后结束

        setTimeout(function () {

            window.onkeypress = null;

            console.log('Game over!');

        }, 30000);

    </script>

</body>

</html>

总结

中介者模式一般应用于一组对象已定义良好但是以复杂的方式进行通信的场合,一般情况下,中介者模式很容易在系统中使用,但也容易在系统里误用,当系统出现了多对多交互复杂的对象群时,先不要急于使用中介者模式,而是要思考一下是不是系统设计有问题。

另外,由于中介者模式把交互复杂性变成了中介者本身的复杂性,所以说中介者对象会比其它任何对象都复杂。

Javascript 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
JavaScript门面模式详解
Oct 19 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 #Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 #Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 #Javascript
JS实现文字放大效果的方法
Mar 03 #Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 #Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 #Javascript
分享一则JavaScript滚动条插件源码
Mar 03 #Javascript
You might like
mysql总结之explain
2012/02/27 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
nginx 设置多个站跨域
2021/03/09 Servers
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python字典基本操作实例分析
2015/07/11 Python
python 链接和操作 memcache方法
2017/03/04 Python
python编写分类决策树的代码
2017/12/21 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
详解Python 中的容器 collections
2020/08/17 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
英文自荐信常用句子
2014/03/26 职场文书
物业品质提升方案
2014/06/08 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
幼儿园教师辞职信
2019/06/21 职场文书