深入理解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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
Javascript 面向对象 继承
May 13 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
JS自定义滚动条效果
Mar 13 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php统计文章排行示例
2014/03/04 PHP
php生成短网址示例
2014/05/05 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php实现异步数据调用的方法
2015/12/24 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Python实现读取Properties配置文件的方法
2018/03/29 Python
python3.4爬虫demo
2019/01/22 Python
Python docx库用法示例分析
2019/02/16 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
排球赛新闻稿
2015/07/17 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js