中介者模式

概念介紹

中介者模式(Mediator)：通過中介者對象封裝一系列對象之間的交互，使對象之間不再相互引用降低他們之間的耦合，有時中介者對象也可以改變對象之間的交互。

創建一個中介

中介者模式，從生活的角度上來講，和我們賣房子的中介很像，比如我有一套房想要出租，而你又想要租房子，那么我們就可以通過中介達成交易，我不考慮租給了歲，租房者也不用考慮租了誰的房子，因為有中介在所以顯得很方便。

從代碼的角度講，如果有多個類或多個子系統相互交互，而且交互很繁瑣，導致每個類都必須知道他需要交互的類，這樣它們的耦合會顯得異常厲害，如果這個時候我們需要處理某一個類，那很可能就要陷入無盡的調試中了。

那么這個時候我們就可以用到中介者模式，我們把對象全都交給中介者對象，然后通過中介者對象處理這些復雜的關系。

下面我們模擬一下房東找中介發布消息，租戶找中介接收消息吧：

//中介者對象 var Mediator=function(){//消息對象var _msg={};return{//訂閱方法register:function(type,action){//如果存在該消息if(_msg[type]){//存入回調函數_msg[type].push(action);}else{//不存在我們建立消息容器_msg[type]=[];//存入新消息回調函數_msg[type].push(action);}},//發布方法send:function(type){//如果該消息被訂閱if(_msg[type]){//遍歷存儲的消息回調函數for (var i=0;i<_msg[type].length;i++) {_msg[type][i]&&_msg[type][i]();}}}} }();

我們的中介對象創建成功了下面我們來測試一下

Mediator.register('landlord',function(){console.log('房東發布第一條消息'); }); Mediator.register('landlord',function(){console.log('房東發布第二條消息'); }) Mediator.register('tenant',function(){console.log('租戶接收第一條消息'); }); Mediator.register('tenant',function(){console.log('租戶接收第二條消息'); }) Mediator.send('landlord');Mediator.send('tenant');

現在我們的中介者模式成功了。

利用中介者模式實現商品購買

我們現在在編寫一個商品購買的頁面，在購買流程中，可以選擇商品及樣式輸入購買的數量，同時頁面中有兩個展示區域，分別向用戶展示剛剛選擇的商品、種類與數量。還有一個按鈕動態顯示下一步的操作，我們查詢商品對應的庫存，如果庫存數量少于這次的購買數量，按鈕將被禁止且顯示庫存不足，反之按鈕可以點擊并且顯示放入購買車

頁面元素如下：

<select id="shoesBrands"> <option>請選擇</option> <option>Adidas</option> <option>Nike</option> </select> <select id="shoesType"> <option>請選擇</option> <option>運動鞋</option> <option>球鞋</option> </select> <input type="text" id="numberInput" /> <p id="shoesInfo"></p> <p id="typeInfo"></p> <p id="numberInfo"></p> <button id="nextBtn">下一步</button>

接著我們開始寫實現方法

//創建一個商品對象記錄庫存var goods = { "Adidas|運動鞋": 23, "Adidas|球鞋": 35, "Nike|運動鞋": 0, "Nike|球鞋": 2 }; //創建中介者對象var mediator = ( function(){ var shoesBrands = document.getElementById( "shoesBrands" ), shoesType = document.getElementById( "shoesType" ), numberInput = document.getElementById( "numberInput" ), shoesInfo = document.getElementById( "shoesInfo" ), typeInfo = document.getElementById( "typeInfo" ), numberInfo = document.getElementById( "numberInfo" ), nextBtn = document.getElementById( "nextBtn" ); return { //當選項發生改變時觸發下面方法change: function( obj ){ var shoes = shoesBrands.value, //品牌 type = shoesType.value, //類型number = numberInput.value, //數量 stock = goods[ shoes + "|" + type ]; //品牌類型下鞋子對應庫存數量 if( obj === shoesBrands ){ shoesInfo.innerHTML = shoes; }else if( obj === shoesType ){ typeInfo.innerHTML = type; }else if( obj === numberInput ){ numberInfo.innerHTML = number; } if( !shoes ){ nextBtn.disabled = true; shoesInfo.innerHTML = "請選擇鞋的品牌"; return; } if( !type ){ nextBtn.disabled = true; typeInfo.innerHTML = "請選擇鞋的類型"; return; } if( !(Number.isInteger( number - 0 ) && number > 0) ){ //輸入購買數量是否為正整數 nextBtn.disabled = true; numberInfo.innerHTML = "請輸入正確的購買數量"; return; } if(number>stock){nextBtn.disabled = true; nextBtn.innerHTML = "庫存不足"; }else{nextBtn.disabled = false; nextBtn.innerHTML = "放入購物車"; }} } } )();

我們調用看看

shoesBrands.onchange = function(){ mediator.change( this ); }; shoesType.onchange = function(){ mediator.change( this ); }; numberInput.onchange = function(){ mediator.change( this ); }

總結

同觀察者模式一樣，中介者模式的主要業務也是通過模塊間或者對象間的復雜通信，來解決模塊間或對象間的耦合，對于中介者對象的本質是封裝多個對象的交互，并且這些交互一般都是在中介者內部實現的。

與外觀模式的封裝特性相比

中介者模式對多個對象交互地封裝，且這些對象一般處于同一層面上，并且封裝的交互在中介者內部，而外觀模式的封裝是為了提供更簡單的醫用的接口而不會添加其他功能

與觀察者模式相比

雖然兩種模式都是通過消息傳遞實現對象間或模塊間的解耦。觀察者模式中的訂閱者是雙向的，既可以是消息的發布者，也可以是消息的訂閱者。而在中介者模式中，訂閱者是單向的，只能是消息的訂閱者， 而消息統一由中介者對象發布，所有的訂閱者對象間接地被中介者管理

也謝謝大家看到這里：）如果你覺得我的分享還可以請點擊推薦，分享給你的朋友讓我們一起進步~

好了以上就是本次分享的全部內容，本次示例參考自JavaScript設計模式一書，讓我們一點點積累一點點成長，希望對大家有所幫助。

歡迎轉載，轉載請注明作者，原文出處。

轉載于:https://www.cnblogs.com/chen-jie/p/JavaScript-Mediator.html

總結

以上是生活随笔為你收集整理的再起航，我的学习笔记之JavaScript设计模式23(中介者模式)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。