快捷導(dǎo)航

輕松掌握J(rèn)avaScript中介者模式

更新時(shí)間：2016年08月26日 09:25:22 投稿：lijiao

這篇文章主要幫助大家輕松掌握J(rèn)avaScript中介者模式，告訴大家什么是js中介者模式？js中介者模式的作用是什么，感興趣的小伙伴們可以參考一下

中介者模式的作用就是解除對(duì)象與對(duì)象之間的緊耦合關(guān)系，它也稱‘調(diào)停者'。所有的對(duì)象都通過中介者對(duì)象來(lái)通信，而不是相互引用，所以當(dāng)一個(gè)對(duì)象發(fā)生改變時(shí)，只需要通知中介者即可。

如：機(jī)場(chǎng)的指揮塔，每架飛機(jī)都只需要和指揮塔通信即可，指揮塔知道每架飛機(jī)的飛行狀況，可以安排所有起降時(shí)間，調(diào)整航線等

中介者模式符合迪米特法則，即最少知識(shí)原則，指一個(gè)對(duì)象應(yīng)該盡可能少地了解另外的對(duì)象。如果對(duì)象之間的耦合性太高，則改變一個(gè)對(duì)象，會(huì)牽動(dòng)很多對(duì)象，難于維護(hù)。當(dāng)對(duì)象耦合很緊時(shí)，要修改一個(gè)對(duì)象而不影響其它的對(duì)象是很困難的。

如果對(duì)象之間的復(fù)雜耦合確實(shí)導(dǎo)致調(diào)用和維護(hù)出現(xiàn)了困難，而且這些耦合度隨項(xiàng)目的變化呈指數(shù)增長(zhǎng)，那我們就可以考慮用中介者模式來(lái)重構(gòu)代碼！中介者通過解耦來(lái)提升代碼的可維護(hù)性。

例子1：游戲
玩家對(duì)象是通過Player()構(gòu)造函數(shù)來(lái)創(chuàng)建的，有自己的points和name屬性。原型上的play()方法負(fù)責(zé)給自己加一分然后通知中介者：

 function Player(name) {
  this.points = 0;
  this.name = name;
}
Player.prototype.play = function () {
  this.points += 1;
  mediator.played();
};

scoreboard對(duì)象（計(jì)分板）有一個(gè)update()方法，它會(huì)在每次玩家玩完后被中介者調(diào)用。計(jì)分析根本不知道玩家的任何信息，也不保存分?jǐn)?shù)，它只負(fù)責(zé)顯示中介者給過來(lái)的分?jǐn)?shù)：

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

現(xiàn)在我們來(lái)看一下mediator對(duì)象（中介者）。在游戲初始化的時(shí)候，在setup()方法中創(chuàng)建游戲者，然后放后players屬性以便后續(xù)使用。played()方法會(huì)被游戲者在每輪玩完后調(diào)用，它更新score哈希然表然后將它傳給scoreboard用于顯示。最后一個(gè)方法是keypress()，負(fù)責(zé)處理鍵盤事件，決定是哪位玩家玩的，并且通知它：

 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; // IE
    if (e.which === 49) { // key "1"
      mediator.players.home.play();
      return;
    }
    if (e.which === 48) { // key "0"
      mediator.players.guest.play();
      return;
    }
  }
};

最后一件事是初始化和結(jié)束游戲：

 // go!
mediator.setup();
window.onkeypress = mediator.keypress;

// game over in 30 seconds
setTimeout(function () {
  window.onkeypress = null;
  alert('Game over!');
}, 30000);

例子2：賣手機(jī)

 var goods = {  //庫(kù)存
  'red|32G':3,
  'red|16G':5,
  'blue|32G':3,
  'blue|16G':6
}
//中介者
var mediator = (function(){
  function id(id){
    return document.getElementById(id);
  }
  var colorSelect = id('colorSelect'),
    memorySelect = id('memorySelect'),
    numberInput = id('numberInput'),
    colorInfo = id('colorInfo'),
    memoryInfo = id('memoryInfo'),
    numberInfo = id('numberInfo'),
    nextBtn = id('nextBtn');
  return{
    changed:function(obj){
      var color = colorSelect.value,
        memory = memorySelect.value,
        number = numberInput.value,
        stock = goods[color+'|'+memory];
      if(obj === colorSelect){
        colorInfo.innerHTML = color;
      }else if(obj === memorySelect){
        memoryInfo.innerHTML = memory;
      }else if(obj === numberInput){
        numberInfo.innerHTML = number;
      }
      if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)選擇手機(jī)顏色';
        return;
      }
      if(!memory){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)選擇內(nèi)存大小';
        return;
      }
      if(Number.isInteger(number-0) && number > 0){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '請(qǐng)輸入正確的購(gòu)買數(shù)量';
        return;
      }
      nextBtn.disabled = false;
      nextBtn.innerHTML = '放入購(gòu)物車';
    }
  }
})();
//添加事件
colorSelect.onchange = function(){
  mediator.changed(this);
}
memorySelect.onchange = function(){
  mediator.changed(this);
}
numberInput.onchange = function(){
  mediator.changed(this);
}

參考文獻(xiàn)：《JavaScript模式》《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: