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 相关文章推荐
AngularJS中的指令全面解析(必看)
May 20 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php实现文件下载更能介绍
2012/11/23 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
微信小程序签到功能
2018/10/31 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python获取糗百图片代码实例
2013/12/18 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python底层封装实现方法详解
2020/01/22 Python
python实现猜拳游戏
2020/03/04 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
保护母亲河倡议书
2014/04/14 职场文书
医学求职自荐信
2014/06/21 职场文书
个人融资协议书
2014/10/02 职场文书
银行催款通知书
2015/04/17 职场文书
订货会主持词
2015/07/01 职场文书
关于 Python json中load和loads区别
2021/11/07 Python