web前端中中介者模式的示例分析

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

中介者模式（Mediator Pattern）

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

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

場景

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

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)點(diǎn)

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

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

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

缺點(diǎn)

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

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