本文例項講述了javascript設計模式 – 中介者模式原理與用法。分享給大家供大家參考，具體如下：

介紹：在前端開發的過程中，元件與元件之間的通訊特別常見，一個元件的change需要引起數個元件的change，這就需要元件與元件之間存在複雜的多對多關係鏈。如何來減輕維護這些關係的複雜度，讓元件和元件之間實現低耦合？這就是我們即將介紹的中介者模式。

定義：用一箇中介物件（中介者）來封裝一系列的物件互動，中介者使個物件不需要顯式的相互引用，從而使其耦合鬆散，而且可以獨立的改變他們之間的互動。中介者模式又稱為調停者模式，它是一種物件行為型模式。

場景：我們來實現一個打招呼的小demo，由牛牛傳送一條訊息給中介者，中介者收到後通知risker發訊息給牛牛

示例：

var Mediator = {
  Niuniu: null,Risker: null,showMessage: function(component,message){
    console.log(component.getName() + '說：' + message);
    if(component.getName() === 'Niuniu'){
      this.Risker.showMessage('hello Niuniu'); 
    }
  }
}
 
var Niuniu = function(){
  this.name = 'Niuniu';
  this.getName = function(){
    return this.name;
  }
  this.showMessage = function(message){
    Mediator.showMessage(this,message);
  }
}
 
var Risker = function(){
  this.name = 'Risker';
  this.getName = function(){
    return this.name;
  }
  this.showMessage = function(message){
    Mediator.showMessage(this,message);
  }
}
 
var niuniu = new Niuniu();
var risker = new Risker();
Mediator.niuniu = niuniu;
Mediator.Risker = risker;
 
niuniu.showMessage('hello Risker');
 
// Niuniu說：hello Risker
// Risker說：hello Niuniu

這個例子裡面Niuniu和Risker稱為同事物件，同事物件之間存在關聯關係，既會被別的物件影響，也會影響別的物件。

Mediator稱為中介者，其實中介者模式做的只是把之前網狀的關係結構轉化成了以Mediator為中心的星型結構。關聯關係並沒有少，只是在Mediator中集中處理了。

中介者模式總結：

優點：
* 中介者模式簡化了同事物件之間的互動，它用中介者和同事的一對多互動代替了原來同事之間的多對多互動。
* 將各同事物件解耦，中介者有利於各同事物件之間的鬆耦合

缺點：
* 在中介者中包含了大量同事之間的互動細節，會導致中介者非常複雜難以維護。

適用場景：
* 系統中物件之間存在複雜的引用關係，系統結構混亂難以理解

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。