摘要：好，師傅我們要學習帝吧人民，進能打，退能刷淘寶。恩，大致過程就是這樣，我們使用中介者模式想一想。首先，數據需要放在中介者模式內，用戶的一切操作，都會傳遞給中介者模式，由他來選擇是哪一個部分發生改變。

俗話說，一個模式三個坑。 中介者模式應該算最坑的一個模式，坑不在于他的原理。而在于他的名字和其他模式的使用，真尼瑪像。首先，“中介者“ 好像是一切模式里面都有的一個東西，比如，享元模式中-元對象，訂閱發布模式中-全局監聽Event... 但是，這個模式偏偏又叫做中介者模式（哎，曾經說模式的時候，感覺什么都是中介者模式)。

所以，這里我們首先要攻克的難關就是，中介者模式的features。

首先，我們需要回憶一下使用訂閱發布模式中，是怎樣一個場景

恩，中間需要有一個連接節點，即，發布者只需要和連接者有關聯，而訂閱者同樣也只需要和連接者有關聯。 所以，這個點就是中介者模式最獨特的feature. 下圖可以清楚的看出，中介者模式的特點。

知道了吧，中介者模式最突出的就是，由中介者來掌管一切，比訂閱者中的連接節點的地位好像就是爸爸和兒子的關系。

在發布訂閱模式中有著全局對象Event的管理，那中介者模式中的boss應該怎樣表達呢？

首先，我們需要說明一下，中介者模式主要的應用場景是什么。

有大量相互關聯的對象

每個對象都能改變狀態

你寫的代碼比較爛

差不多中介者模式能夠解決以上的問題。

徒兒，給師傅去要個栗子來。
好的，師傅！！！

栗子來了：

大家好，(我假裝我是一名學霸) 同學們可能經常去的地方，應該就是圖書館了，經常會去圖書管理處借一些書來看，比如: 藏地密碼，阿彌陀佛么么噠...等等。我們憑借著盡職的圖書館阿姨，往往可以借到我們想要的書本。如果已經被借走了，還可以在阿姨那里登記，并且如果書還回來的，會通知你過來取。

恩，總結一下：

圖書館阿姨其實就是一個中介者，我們找書，都是通過圖書管理處詢問，然后他們負責給我們查詢。 如果沒有這個管理處的話，就像我們平時一樣，在群里問問，"大家有xxx書嗎？能借我看兩天嗎？"。當然，這樣往往會石沉大海。

我們用代碼模擬一下：

//我們先假設圖書管理系統只有借和還的功能
//個人
function Person(name){
    this.name = name;
}
Person.prototype.lend = function(bookName){
    Manager.assign("lend",this,bookName);
}
Person.prototype.back = function(bookName){
    Manager.assign("back",this,bookName);
}
//創建一個工廠模式
var peopleFactory = (function(){
    var people = {};
    return function(name){
        var person = people[name];
        if(person){
            return person;
        }
        person = new Person(name);
        people[name] = person;
        return person;
    }
})();
//中介者，圖書管理處
var Manager = (function(){
    var lendList = {},
        stock = {},
        operations = {};
    operations.lend = function(person,bookName){
        var num = stock[bookName];

        if(num===undefined){  //判斷是否有書
            console.log("圖書館沒有該書");
            return;
        }
        if(num===0){  //書本已經借完
            console.log("該書已經借完");
            return;
        }
        stock[bookName]--;  //將數量減一
        lendList[person.name] = bookName;
        console.log("借閱成功");
    }
    operations.back = function(person,bookName){
        var bookName = lendList[person.name];  //返回借書人借的書名
        if(bookName === null){
            throw "該人，并沒有借書";
        }
        stock[bookName]++;  //還書
        lendList[person.name] = null;  //將借書人的清空
    }
    operations.addStock = function(){  //初始庫存,addStock({bookName:jimmy,num:2})
        for(var i = 0,book;book = arguments[i++];){
            stock[book.bookName] = book.num;
        }
    }
    var assign = function(){
        var order = Array.prototype.shift.call(arguments);
        operations[order].apply(this,arguments);
    }
    return {
        assign
    }
})();
Manager.assign("addStock",{bookName:"藏地密碼",num:1},{bookName:"阿彌陀佛么么噠",num:3});
var xiaoMing = peopleFactory("xiaoMing");
var jimmy = peopleFactory("jimmy");
var hanMM = peopleFactory("hanMM");
xiaoMing.lend("藏地密碼");
jimmy.lend("藏地密碼");
//還書的過程
xiaoMing.back("藏地秘密");
jimmy.lend("藏地密碼");  //終于借成功了

以上是一個簡單的中介者模式的縮影，要始終記著那張圖代表的內涵，中介者模式是不需要在將請求傳遞出去的（或者說，情感上沒有傳遞出去）。

上面意淫了一個圖書管理處(實話說，沒有卵用). 我們來個真的。

徒兒，給師傅找個栗子。
好，師傅!!!

我們要學習帝吧人民，進能打td，退能刷淘寶。 我們這里不說淘寶的事，但說一個電子商務的事。 現在Mooc這么火，各種線上課程也是numberous。我也上過。 一個線上的課程需要購買，購買的流程基本上就是，選擇你想要的課程，然后，選擇你要上課的人數(你是一個媽媽，你可以給你兩個孩紙各買一個ID),如果上課人數未滿的話，恭喜，你在家等開課就over了。如果課程滿的話，你要么等下一期，要么，直接找另外一門課。

如果使用，面向過程的思維寫的話，我相信這個，不是一般的復雜。

所以，我們使用面向對象的思維重構一下。

首先，我們得拿到課程的數據，比如，課程名，已經報的課程人數，課程價格等。當我們選擇一個課程的時候，界面上肯定需要作出相應的處理，比如，渲染課程價格，剩余人數。但我們添加購買人數的時候，如果未超出，則可以購買，如果超出，則需要將購買的按鈕改為不可選中狀態。

恩，大致過程就是這樣，我們使用中介者模式想一想。

首先，數據需要放在中介者模式內，用戶的一切操作，都會傳遞給中介者模式，由他來選擇是哪一個html部分發生改變。

好，我們用代碼實現以下。

課程購買

上面是整個邏輯和頁面，這里我主要針對js說明一下。

(function() {
    console.dir($(".courses"))
    bind($(".courses"), function(e) { //課程內容改變時
        mediator.command(e.target);
    }, "change");
    bind($(".num"), function(e) { //報名人數改變時
        mediator.command(e.target);
    }, "keyup");

    bind($(".buy"), function(e) { //綁定夠買函數
        mediator.command(e.target);
    }, "click");

    var utils = (function() { //工具函數
        var change = function(ele, val) { //改變內容
            ele.innerHTML = val;
        }
        return {
            change
        };
    })();



    var mediator = (function() { //中介者
        var price = $(".price"), //課程價格
            remainder = $(".remainder"), //剩余人數
            num = $(".num"), //購買人數
            buyBtn = $(".buy"), //購買btn
            course;
        var changePR = function(courseName) { //改變價格和人數
            course = data[courseName];
            console.log(course);
            utils.change(price, course.price); //改變價格
            utils.change(remainder, course.remainder); //改變人數
        }
        var prohitBtn = (function() { //改變購買btn狀態
            var use = `購買`,
                ban = `人數已滿`,
                status = true;
            return function(flag) {
                if (status === flag) { //如果狀態不變，則不改變內容
                    return;
                }
                if (flag === true) { //可以購買
                    buyBtn.innerHTML = use;
                    status = true;
                } else { //禁止購買
                    buyBtn.innerHTML = ban;
                    status = false;
                }
            }
        })();
        var detect = function() { //檢測購買輸入的內容
                var number = Number(num.value.trim());
                if (!course) {
                    alert("請先選擇課程");
                    return;
                }
                if (number > course.remainder) {
                    prohitBtn(false); //不能夠買
                }  else {
                    prohitBtn(true); //可以夠買
                }
            }
            //當課程類改變時,觸發改變名額，價格以及根據購買人數改變購買Btn的狀態
        var coursesChange = function(courseName) {
            //改變價格和人數
            changePR(courseName);
            //根據input框的值，改變btn的狀態
            detect();
        }
        var detectBuy = function() {
            var number = Number(num.value.trim());
            if (number === null || number == 0) {
                alert("請先輸入購買數量~");
            } else {
                alert("購買成功");
            }
        }
        var command = function(target) {
            var classList = target.classList;
            if (classList.contains("courses")) {
                console.dir(target.value);
                var val = target.value;
                //執行
                coursesChange(val);
            } else if (classList.contains("num")) {
                var val =target.value.trim(),
                    reg = /d+/;
                if (!reg.test(val)) {
                    alert("輸入內容只能為數字");
                    return;
                }
                //執行
                detect();
            } else if(classList.contains("shoppingBtn")){
                detectBuy();
            }
        }
        return {
            command
        }
    })();
})();

可以從上面的代碼看出，比較清晰的將溝壑關系解除，上面的中介者模式中也會用到代理模式等其他相關的知識。當然，這段代碼并不是特別好，關鍵在于處理的邏輯較多，有大量的if判斷語句，所以也希望讀者，可以使用以前所學的js模式進行重構，我相信到時候你的代碼整潔程度一定遠優于鄙人寫的代碼。

其實，中介者模式是我最喜歡使用的模式之一，因為他好寫易上手。但是缺點也是顯而易見的，就是，你會在程序中增加一個巨大的對象，而你的噩夢就是維護這個對象。 中介者里面會包含大量的邏輯，設計較多的節點獲取，造成的維護難度也是顯而易見的。所以，還是那句話，不要為了模式而模式，這個世界上沒有萬能的模式，就和沒有絕對安全的系統一樣。

ending~