本文實(shí)例講述了javascript設(shè)計(jì)模式 – 中介者模式原理與用法。分享給大家供大家參考，具體如下：

介紹：在前端開(kāi)發(fā)的過(guò)程中，組件與組件之間的通訊特別常見(jiàn)，一個(gè)組件的change需要引起數(shù)個(gè)組件的change，這就需要組件與組件之間存在復(fù)雜的多對(duì)多關(guān)系鏈。如何來(lái)減輕維護(hù)這些關(guān)系的復(fù)雜度，讓組件和組件之間實(shí)現(xiàn)低耦合？這就是我們即將介紹的中介者模式。

定義：用一個(gè)中介對(duì)象（中介者）來(lái)封裝一系列的對(duì)象交互，中介者使個(gè)對(duì)象不需要顯式的相互引用，從而使其耦合松散，而且可以獨(dú)立的改變他們之間的交互。中介者模式又稱為調(diào)停者模式，它是一種對(duì)象行為型模式。

場(chǎng)景：我們來(lái)實(shí)現(xiàn)一個(gè)打招呼的小demo，由牛牛發(fā)送一條消息給中介者，中介者收到后通知risker發(fā)消息給牛牛

示例：

var Mediator = {
  Niuniu: null,
  Risker: null,
  showMessage: function(component, message){
    console.log(component.getName() + '說(shuō)：' + 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說(shuō)：hello Risker
// Risker說(shuō)：hello Niuniu

這個(gè)例子里面Niuniu和Risker稱為同事對(duì)象，同事對(duì)象之間存在關(guān)聯(lián)關(guān)系，既會(huì)被別的對(duì)象影響，也會(huì)影響別的對(duì)象。

Mediator稱為中介者，其實(shí)中介者模式做的只是把之前網(wǎng)狀的關(guān)系結(jié)構(gòu)轉(zhuǎn)化成了以Mediator為中心的星型結(jié)構(gòu)。關(guān)聯(lián)關(guān)系并沒(méi)有少，只是在Mediator中集中處理了。

中介者模式總結(jié)：

優(yōu)點(diǎn)：
* 中介者模式簡(jiǎn)化了同事對(duì)象之間的交互，它用中介者和同事的一對(duì)多交互代替了原來(lái)同事之間的多對(duì)多交互。
* 將各同事對(duì)象解耦，中介者有利于各同事對(duì)象之間的松耦合

缺點(diǎn)：
* 在中介者中包含了大量同事之間的交互細(xì)節(jié)，會(huì)導(dǎo)致中介者非常復(fù)雜難以維護(hù)。

適用場(chǎng)景：
* 系統(tǒng)中對(duì)象之間存在復(fù)雜的引用關(guān)系，系統(tǒng)結(jié)構(gòu)混亂難以理解
* 一個(gè)對(duì)象由于引用了其他很多對(duì)象并且直接和這些對(duì)象通信，導(dǎo)致難以復(fù)用該對(duì)象

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論