ホームページ  >  記事  >  ウェブフロントエンド  >  js デザイン パターン: メディエーター パターンとは何ですか? JSメディエーターパターンの紹介

js デザイン パターン: メディエーター パターンとは何ですか? JSメディエーターパターンの紹介

不言
不言オリジナル
2018-08-17 16:48:381571ブラウズ

この記事では、JS デザイン パターンに関するコンテンツをお届けします: 中間パターンとは何ですか? js 仲介モデルの紹介は、参考になると思います。

仲介モデルとは何ですか?

仲介パターン: オブジェクトはサードパーティの仲介者を通じて相互に通信します。

定義: メディエーターオブジェクトを使用して、一連のオブジェクトの相互作用をカプセル化します。これにより、オブジェクトが相互に明示的に参照する必要がなくなり、オブジェクト間の相互作用を個別に変更できるようになります。

主な解決策: オブジェクト間には多数の関係があり、必然的にシステムの構造が非常に複雑になります。同時に、オブジェクトが変更された場合、それに関連付けられたオブジェクトを追跡する必要もあります。適切な措置を講じてください。

いつ使用するか: 複数のクラスが相互に結合され、ネットワーク構造を形成します。

解決方法: 上記のメッシュ構造を星型構造に分割します。

js 仲介モデルの適用例: 1. 中国が WTO に加盟する前は、さまざまな国が相互に貿易しており、その構造は複雑でしたが、現在では、さまざまな国が WTO を通じて相互に貿易しています。 2. 空港配車システム。 3. C (コントローラー) が M (モデル) と V (ビュー) の間の仲介者である MVC フレームワーク。

js 中間モードの利点: 1. クラスの複雑さを軽減し、1 対多を 1 対 1 に変換します。 2. さまざまなクラス間の分離。 3. Dimit 原則を遵守します。

JS 仲介モデルの欠点: 仲介モデルは巨大になり、複雑になり、保守が難しくなります。

js 中間モードの使用シナリオ: 1. システム内のオブジェクト間には比較的複雑な参照関係があり、オブジェクト間の依存関係構造が混乱し、オブジェクトの再利用が困難になります。 2. 中間クラスを使用して、サブクラスをあまり生成せずに複数のクラスの動作をカプセル化したいと考えています。

注: 責任が複雑な場合には使用しないでください。

js 中間モード シナリオ デモ

テスト後、結果が発表されます。質問に答えた人にはチャレンジが成功したことが通知され、そうでない場合はチャレンジは失敗しました。

const player = function(name) {
  this.name = name
  playerMiddle.add(name)
}

player.prototype.win = function() {
  playerMiddle.win(this.name)
}

player.prototype.lose = function() {
  playerMiddle.lose(this.name)
}

const playerMiddle = (function() { // 将就用下这个 demo,这个函数当成中介者
  const players = []
  const winArr = []
  const loseArr = []
  return {
    add: function(name) {
      players.push(name)
    },
    win: function(name) {
      winArr.push(name)
      if (winArr.length + loseArr.length === players.length) {
        this.show()
      }
    },
    lose: function(name) {
      loseArr.push(name)
      if (winArr.length + loseArr.length === players.length) {
        this.show()
      }
    },
    show: function() {
      for (let winner of winArr) {
        console.log(winner + '挑战成功;')
      }
      for (let loser of loseArr) {
        console.log(loser + '挑战失败;')
      }
    },
  }
}())

const a = new player('A 选手')
const b = new player('B 选手')
const c = new player('C 选手')

a.win()
b.win()
c.lose()

// A 选手挑战成功;
// B 选手挑战成功;
// C 选手挑战失败;

このコードでは、A、B、C の間に直接の関係はありません。代わりに、別の playerMiddle オブジェクトを通じてリンクが確立されます。これをメディエーター モードとみなします。

関連する推奨事項:

js デザイン パターン: 責任連鎖パターンとは何ですか? JS 責任連鎖パターンの紹介

JS 設計パターン: Flyweight パターンとは何ですか? JSフライウェイトモードの紹介

以上がjs デザイン パターン: メディエーター パターンとは何ですか? JSメディエーターパターンの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。