javascript設(shè)計(jì)模式之中介者模式Mediator

更新時(shí)間：2014年12月30日 17:12:43 投稿：hebedich

這篇文章主要介紹了javascript設(shè)計(jì)模式之中介者模式Mediator,需要的朋友可以參考下

一，總體概要

1，筆者淺談

我們從日常的生活中打個(gè)簡單的比方，我們?nèi)シ课葜薪樽夥?，房屋中介人在租房者和房東出租者之間形成一條中介。租房者并不關(guān)心他租誰的房。房東出租者也不關(guān)心他租給誰。因?yàn)橛兄薪榈拇嬖?，這場交易才變得如此方便。

在軟件的開發(fā)過程中，勢必會(huì)碰到這樣一種情況，多個(gè)類或多個(gè)子系統(tǒng)相互交互，而且交互很繁瑣，導(dǎo)致每個(gè)類都必須知道他需要交互的類，這樣它們的耦合會(huì)顯得異常厲害。牽一發(fā)而動(dòng)全身，后果很嚴(yán)重，大熊很生氣！~~~~(>_<)~~~~

好了，既然問題提出來了，那有請(qǐng)我們這期的主角------中介者模式出場吧

中介者的功能就是封裝對(duì)象之間的交互。如果一個(gè)對(duì)象的操作會(huì)引起其他相關(guān)對(duì)象的變化，而這個(gè)對(duì)象又不希望自己來處理這些關(guān)系，那么就可以去找中介者，讓它來處理這些麻煩的關(guān)系?？聪旅娴男±樱?/p>

復(fù)制代碼代碼如下:

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();

}

在示例代碼中我們有四個(gè)參與者，加入聊天會(huì)話通過注冊一個(gè)聊天室（中介）。每個(gè)參與者的參與對(duì)象的代表。參與者相互發(fā)送消息和聊天室的處理路由。

這里的聊天室對(duì)象就起到了中介的作用，協(xié)調(diào)其他的對(duì)象，進(jìn)行合理的組織，降低耦合。

二，源碼案例參考

我們應(yīng)該很熟悉MVC三層模型實(shí)體模型（Model）、視圖表現(xiàn)層（View）還有控制層（Control/Mediator）。

控制層便是位于表現(xiàn)層與模型層之間的中介者。籠統(tǒng)地說MVC也算是中介者模式在框架設(shè)計(jì)中的一個(gè)應(yīng)用。

三，案例引入

復(fù)制代碼代碼如下:

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);