javascript设计模式之中介者模式Mediator


Posted in Javascript onDecember 30, 2014

一,总体概要

1,笔者浅谈

我们从日常的生活中打个简单的比方,我们去房屋中介租房,房屋中介人在租房者和房东出租者之间形成一条中介。租房者并不关心他租谁的房。房东出租者也不关心他租给谁。因为有中介的存在,这场交易才变得如此方便。

在软件的开发过程中,势必会碰到这样一种情况,多个类或多个子系统相互交互,而且交互很繁琐,导致每个类都必须知道他需要交互的类,这样它们的耦合会显得异常厉害。牵一发而动全身,后果很严重,大熊很生气!~~~~(>_<)~~~~

好了,既然问题提出来了,那有请我们这期的主角------中介者模式出场吧

javascript设计模式之中介者模式Mediator

中介者的功能就是封装对象之间的交互。如果一个对象的操作会引起其他相关对象的变化,而这个对象又不希望自己来处理这些关系,那么就可以去找中介者,让它来处理这些麻烦的关系。看下面的小例子:

var Participant = function(name) {

    this.name = name;

    this.chatroom = null;

};

Participant.prototype = {

    send: function(message, to) {

        this.chatroom.send(message, this, to);

    },

    receive: function(message, from) {

        log.add(from.name + " to " + this.name + ": " + message);

    }

};

var Chatroom = function() {

    var participants = {};

    return {

        register: function(participant) {

            participants[participant.name] = participant;

            participant.chatroom = this;

        },

        send: function(message, from, to) {

            if (to) {                   

                to.receive(message, from);    

            } else {                     

                for (key in participants) {   

                    if (participants[key] !== from) {

                        participants[key].receive(message, from);

                    }

                }

            }

        }

    };

};

var log = (function() {

    var log = "";

    return {

        add: function(msg) { log += msg + "\n"; },

        show: function() { alert(log); log = ""; }

    }

})();

function run() {

    var yoko = new Participant("Yoko");

    var john = new Participant("John");

    var paul = new Participant("Paul");

    var ringo = new Participant("Ringo");

    var chatroom = new Chatroom();

    chatroom.register(yoko);

    chatroom.register(john);

    chatroom.register(paul);

    chatroom.register(ringo);

    yoko.send("All you need is love.");

    yoko.send("I love you John.");

    john.send("Hey, no need to broadcast", yoko);

    paul.send("Ha, I heard that!");

    ringo.send("Paul, what do you think?", paul);

    log.show();

}

在示例代码中我们有四个参与者,加入聊天会话通过注册一个聊天室(中介)。每个参与者的参与对象的代表。参与者相互发送消息和聊天室的处理路由。

这里的聊天室对象就起到了中介的作用,协调其他的对象,进行合理的组织,降低耦合。

二,源码案例参考

我们应该很熟悉MVC三层模型实体模型(Model)、视图表现层(View)还有控制层(Control/Mediator)。

控制层便是位于表现层与模型层之间的中介者。笼统地说MVC也算是中介者模式在框架设计中的一个应用。

javascript设计模式之中介者模式Mediator

三,案例引入

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 = {

    players:{},

    setup:function () {

        var players = this.players;

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

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

    },

    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; 

        if (e.which === 49) { 

            mediator.players.home.play();

            return;

        }

        if (e.which === 48) { 

            mediator.players.guest.play();

            return;

        }

    }

};

mediator.setup();

window.onkeypress = mediator.keypress;

setTimeout(function () {

    window.onkeypress = null;

    console.log('Game over!');

}, 30000);

四,总结一下

Why Mediator ?

各个对象之间的交互操作非常多,每个对象的行为操作都依赖彼此对方,修改一个对象的行为,同时会涉及到修改很多其他对象的行为,

如果使用Mediator模式,可以使各个对象间的耦合松散,只需关心和 Mediator的关系,使多对多的关系变成了一对多的关系,

可以降低系统的复杂性,提高可修改扩展性。

使用中介者模式的场合

1.一组定义良好的对象,现在要进行复杂的通信。

2.定制一个分布在多个类中的行为,而又不想生成太多的子类。

可以看出,中介对象主要是用来封装行为的,行为的参与者就是那些对象,但是通过中介者,这些对象不用相互知道。(迪米特法则的具体实现)

使用中介者模式的优点:

1.降低了系统对象之间的耦合性,使得对象易于独立的被复用。

2.提高系统的灵活性,使得系统易于扩展和维护。

使用中介者模式的缺点:

中介者模式的缺点是显而易见的,因为这个“中介“承担了较多的责任,所以一旦这个中介对象出现了问题,那么整个系统就会受到重大的影响。

Javascript 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
微信小程序之圆形进度条实现思路
Feb 22 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 #Javascript
Javascript访问器属性实例分析
Dec 30 #Javascript
Javascript中数组sort和reverse用法分析
Dec 30 #Javascript
jQuery中:visible选择器用法实例
Dec 30 #Javascript
JQuery设置时间段下拉选择实例
Dec 30 #Javascript
jQuery中:hidden选择器用法实例
Dec 30 #Javascript
jQuery中:has选择器用法实例
Dec 30 #Javascript
You might like
php创建多级目录代码
2008/06/05 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
node中的session的具体使用
2018/09/14 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python如何获取文件路径/目录
2020/09/22 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
实用的简历自我评价
2014/03/06 职场文书
C++程序员求职信
2014/05/07 职场文书
房地产活动策划方案
2014/05/14 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
地陪导游欢迎词
2015/01/26 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
投诉信格式范文
2015/07/02 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书