js デザインパターン: 合成パターンとは何ですか? JS結合モードの概要-jsチュートリアル-php.cn

js デザインパターン: 合成パターンとは何ですか? JS結合モードの概要

不言

リリース： 2018-08-17 16:31:44

オリジナル

3550 人が閲覧しました

この記事では、JS デザインパターンに関するコンテンツをお届けします: 組み合わせパターンとは何ですか? js 組み合わせモードの紹介は一定の参考になります。必要な方は参考にしていただければ幸いです。

コンビネーションモードとは何ですか?

定義: 1.オブジェクトをツリー構造に結合して、「部分-全体」階層を表します。 2. 組み合わせモードにより、ユーザーは単一のオブジェクトと組み合わせたオブジェクトを一貫して使用できます。 3. オブジェクトのレイヤー数を気にする必要はありません。呼び出し時にルートで呼び出すだけで済みます。

主な解決策: ツリー構造内の単純な要素と複雑な要素の概念が曖昧になります。複雑な要素を単純な要素と同じように扱うことで、クライアントプログラムを複雑な要素の内部構造から切り離します。

いつ使用するか: 1. オブジェクトの部分全体の階層 (ツリー構造) を表現したいとします。 2. ユーザーには、結合されたオブジェクトと単一のオブジェクトの違いを無視して、結合された構造内のすべてのオブジェクトを均一に使用してもらいたいと考えています。

解決方法: ブランチとリーフは統一されたインターフェイスを実装しており、インターフェイスはブランチ内で結合されています。

キーコード: ブランチはこのインターフェイスを内部的に結合し、コンポーネントを含む内部属性 List を含みます。

js 組み合わせモードの適用例: 1. 算術式にはオペランド、演算子、および別のオペランドが含まれます。ここで、別の演算子がオペランド、演算子、および別のオペランドになることもあります。 2. JAVA AWT および SWING では、ボタンとチェックボックスがリーフであり、コンテナがブランチです。

js 結合モードの利点: 1. 高レベルのモジュール呼び出しが簡単です。 2. ノードは自由に追加できます。

js 結合モードの欠点: 結合モードを使用する場合、そのリーフとブランチの宣言はインターフェイスではなく実装クラスとなり、依存関係逆転の原則に違反します。

js 組み合わせモードの使用シナリオ: ツリーメニュー、ファイルとフォルダーの管理など、部分的および全体的なシナリオ。

注: 定義されたときは具象クラスです。

js 組み合わせモードの例 - マクロコマンド

今、私たちがユニバーサルリモコンを手に持っていると想像してください。家に帰ってスイッチを押すと、次のことが実行されます。

1. コーヒーを淹れます。テレビでサウンドをオンにします
3. エアコンとコンピューターをオンにします

タスクを次の 3 つのカテゴリに分けます:

次に、コマンドモードを組み合わせた具体的な実装を見てみましょう。結合モード:

const MacroCommand = function() {
  return {
    lists: [],
    add: function(task) {
      this.lists.push(task)
    },
    excute: function() { // ①：组合对象调用这里的 excute，
      for (let i = 0; i < this.lists.length; i++) {
        this.lists[i].excute()
      }
    },
  }
}

const command1 = MacroCommand() // 基本对象

command1.add({
  excute: () => console.log(&#39;煮咖啡&#39;) // ②：基本对象调用这里的 excute，
})

const command2 = MacroCommand() // 组合对象

command2.add({
  excute: () => console.log(&#39;打开电视&#39;)
})

command2.add({
  excute: () => console.log(&#39;打开音响&#39;)
})

const command3 = MacroCommand()

command3.add({
  excute: () => console.log(&#39;打开空调&#39;)
})

command3.add({
  excute: () => console.log(&#39;打开电脑&#39;)
})

const macroCommand = MacroCommand()
macroCommand.add(command1)
macroCommand.add(command2)
macroCommand.add(command3)

macroCommand.excute()

// 煮咖啡
// 打开电视
// 打开音响
// 打开空调
// 打开电脑

ログイン後にコピー

結合パターンでは、基本オブジェクトと複合オブジェクトが一貫して扱われることがわかります。そのため、基本オブジェクト (リーフオブジェクト) と複合オブジェクトが一貫したメソッドを持つようにする必要があります。

js 結合モードの例 - フォルダーのスキャン

フォルダーをスキャンする場合、フォルダーは別のフォルダーまたはファイルになる可能性があります。この状況は結合モードの使用に適しています。

const Folder = function(folder) {
  this.folder = folder
  this.lists = []
}

Folder.prototype.add = function(resource) {
  this.lists.push(resource)
}

Folder.prototype.scan = function() {
  console.log(&#39;开始扫描文件夹：&#39;, this.folder)
  for (let i = 0, folder; folder = this.lists[i++];) {
    folder.scan()
  }
}

const File = function(file) {
  this.file = file
}

File.prototype.add = function() {
  throw Error(&#39;文件下不能添加其它文件夹或文件&#39;)
}

File.prototype.scan = function() {
  console.log(&#39;开始扫描文件：&#39;, this.file)
}

const folder = new Folder(&#39;根文件夹&#39;)
const folder1 = new Folder(&#39;JS&#39;)
const folder2 = new Folder(&#39;life&#39;)

const file1 = new File(&#39;深入React技术栈.pdf&#39;)
const file2 = new File(&#39;JavaScript权威指南.pdf&#39;)
const file3 = new File(&#39;小王子.pdf&#39;)

folder1.add(file1)
folder1.add(file2)

folder2.add(file3)

folder.add(folder1)
folder.add(folder2)

folder.scan()

// 开始扫描文件夹： 根文件夹
// 开始扫描文件夹： JS
// 开始扫描文件： 深入React技术栈.pdf
// 开始扫描文件： JavaScript权威指南.pdf
// 开始扫描文件夹： life
// 开始扫描文件： 小王子.pdf

ログイン後にコピー