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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 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 FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php的dl函数用法实例
2014/11/06 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
python正则表达式面试题解答
2020/04/28 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
中国好声音华少广告词
2014/03/17 职场文书
认购协议书范本
2014/04/22 职场文书
临床专业自荐信
2014/06/22 职场文书
同意报考证明
2015/06/17 职场文书