這篇文章將為大家詳細(xì)講解有關(guān)web前端中中介者模式的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

鼓樓ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

中介者模式（Mediator Pattern）

在中介者模式中，中介者（Mediator）包裝了一系列對象相互作用的方式，使得這些對象不必直接相互作用，而是由中介者協(xié)調(diào)它們之間的交互，從而使它們可以松散偶合。當(dāng)某些對象之間的作用發(fā)生改變時，不會立即影響其他的一些對象之間的作用，保證這些作用可以彼此獨立的變化。

中介者模式和觀察者模式有一定的相似性，都是一對多的關(guān)系，也都是集中式通信，不同的是中介者模式是處理同級對象之間的交互，而觀察者模式是處理Observer和Subject之間的交互。中介者模式有些像婚戀中介，相親對象剛開始并不能直接交流，而是要通過中介去篩選匹配再決定誰和誰見面。

場景

• 例如購物車需求，存在商品選擇表單、顏色選擇表單、購買數(shù)量表單等等，都會觸發(fā)change事件，那么可以通過中介者來轉(zhuǎn)發(fā)處理這些事件，實現(xiàn)各個事件間的解耦，僅僅維護(hù)中介者對象即可。

var goods = {   //手機(jī)庫存
    'red|32G': 3,
    'red|64G': 1,
    'blue|32G': 7,
    'blue|32G': 6,};//中介者var mediator = (function() {
    var colorSelect = document.getElementById('colorSelect');
    var memorySelect = document.getElementById('memorySelect');
    var numSelect = document.getElementById('numSelect');
    return {
        changed: function(obj) {
            switch(obj){
                case colorSelect:
                    //TODO
                    break;
                case memorySelect:
                    //TODO
                    break;
                case numSelect:
                    //TODO
                    break;
            }
        }
    }})();colorSelect.onchange = function() {
    mediator.changed(this);};memorySelect.onchange = function() {
    mediator.changed(this);};numSelect.onchange = function() {
    mediator.changed(this);};

• 聊天室里

聊天室成員類：

function Member(name) {
  this.name = name;
  this.chatroom = null;}Member.prototype = {
  // 發(fā)送消息
  send: function (message, toMember) {
    this.chatroom.send(message, this, toMember);
  },
  // 接收消息
  receive: function (message, fromMember) {
    console.log(`${fromMember.name} to ${this.name}: ${message}`);
  }}

聊天室類：

function Chatroom() {
  this.members = {};}Chatroom.prototype = {
  // 增加成員
  addMember: function (member) {
    this.members[member.name] = member;
    member.chatroom = this;
  },
  // 發(fā)送消息
  send: function (message, fromMember, toMember) {
    toMember.receive(message, fromMember);
  }}

測試一下：

const chatroom = new Chatroom();
const bruce = new Member('bruce');
const frank = new Member('frank');
chatroom.addMember(bruce);chatroom.addMember(frank);
bruce.send('Hey frank', frank);
//輸出：bruce to frank: hello frank

優(yōu)點

• 使各對象之間耦合松散，而且可以獨立地改變它們之間的交互

• 中介者和對象一對多的關(guān)系取代了對象之間的網(wǎng)狀多對多的關(guān)系

• 如果對象之間的復(fù)雜耦合度導(dǎo)致維護(hù)很困難，而且耦合度隨項目變化增速很快，就需要中介者重構(gòu)代碼

缺點

• 系統(tǒng)中會新增一個中介者對象，因為對象之間交互的復(fù)雜性，轉(zhuǎn)移成了中介者對象的復(fù)雜性，使得中介者對象經(jīng)常是巨大的。中介 者對象自身往往就是一個難以維護(hù)的對象。

關(guān)于“web前端中中介者模式的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。