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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
采用call方式实现js继承
May 20 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
分析javascript原型及原型链
Mar 18 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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程序中的常见漏洞进行攻击
2006/10/09 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
python重试装饰器示例
2014/02/11 Python
python中偏函数partial用法实例分析
2015/07/08 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python实现银行管理系统
2019/10/25 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
2015年国税春训心得体会
2015/03/09 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
催款函怎么写
2015/06/24 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL