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 相关文章推荐
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
Element PageHeader页头的使用方法
Jul 26 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超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
js相册效果代码(点击创建即可)
2013/04/16 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
javascript框架设计之种子模块
2015/06/23 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
监理资料员岗位职责
2014/01/03 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
公积金贷款承诺书
2015/04/30 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
css3应用示例:新增的选择器
2022/03/16 HTML / CSS