jsの組み合わせ設計パターンを詳しく解説

合成モードでは、オブジェクトをツリー構造に結合して「部分全体」の階層を表現します。結合モードでは、ユーザーは単一のオブジェクトと結合されたオブジェクトを一貫して使用できます。

これにより、ツリー構造の問題における単純な要素と複雑な要素の概念が曖昧になります。クライアント プログラムは、複雑な要素を単純な要素と同様に処理できるため、クライアント プログラムを複雑な要素の内部構造から切り離すことができます。開発者が同様の機能を持つ複数のオブジェクトを分類し、標準化された設計を改善するのに役立ちます。階層データ構造の例が多数あるため、組み合わせパターンは非常に便利です。階層データ構造の一般的な例は、コンピューターを使用するたびに遭遇するもの、つまりファイル システムです。ファイル システムはディレクトリとファイルで構成されます。各ディレクトリにはコンテンツを含めることができます。ディレクトリの内容はファイルまたはディレクトリになります。このようにして、コンピュータのファイル システムは再帰的な構造で編成されます。このようなデータ構造を記述したい場合は、複合パターンを使用できます。

役割の関与

機能

合成パターンの階層には、リーフ オブジェクトと複合オブジェクトの 2 種類のオブジェクトがあります。これは再帰的な定義ですが、これが複合オブジェクトが役立つ理由でもあります。他のオブジェクトで構成されていますが、葉オブジェクトにはサブオブジェクトが含まれなくなりました

デザイン

。

JavaScript デザイン パターン

の図を借りて、組み合わせパターンのデザインを説明します

Interface は、必要に応じて、すべてのクラスに共通のインターフェイスのデフォルト動作を実装する、コンポジション内のオブジェクト宣言インターフェイスです。コンポーネントのサブコンポーネントにアクセスして管理するためのインターフェイスを宣言します。
フィールドは、リーフノードオブジェクトを組み合わせて表します。リーフノードには子ノードがなく、継承を通じてさまざまなタイプのリーフオブジェクトを設計できます。サブコンポーネントを格納するには、追加 (add) や削除 (remove) など、コンポーネント インターフェイスでサブコンポーネントに関連する操作を実装します。

• 
  インターフェース

  /* Interfaces. */
  
  var Composite = new Interface('Composite', ['add', 'remove', 'getChild']);
  var FormItem = new Interface('FormItem', ['save']);

複合オブジェクトクラス

• /* CompositeForm class. */
  
  var CompositeForm = function(id, method, action) { // implements Composite, FormItem
    this.formComponents = [];
  
    this.element = document.createElement('form');
    this.element.id = id;
    this.element.method = method || 'POST';
    this.element.action = action || '#';
  };
  
  CompositeForm.prototype.add = function(child) {
    Interface.ensureImplements(child, Composite, FormItem);
    this.formComponents.push(child);
    this.element.appendChild(child.getElement());
  };
  
  CompositeForm.prototype.remove = function(child) {
    for(var i = 0, len = this.formComponents.length; i < len; i++) {
      if(this.formComponents[i] === child) {
        this.formComponents.splice(i, 1); // Remove one element from the array at 
                                          // position i.
        break;
      }
    }
  };
  
  CompositeForm.prototype.getChild = function(i) {
    return this.formComponents[i];
  };
  
  CompositeForm.prototype.save = function() {
    for(var i = 0, len = this.formComponents.length; i < len; i++) {
      this.formComponents[i].save();
    }
  };
  
  CompositeForm.prototype.getElement = function() { 
    return this.element; 
  };

リーフオブジェクトクラス
• リーフオブジェクトは、単純なクラスにすることも、さまざまなカテゴリのリーフを構築するための抽象クラスとして設計することもできます、ここで採用されています さまざまなカテゴリの抽象クラスのデザインリーフ

  /* Field class, abstract. */
  
  var Field = function(id) { // implements Composite, FormItem
    this.id = id;
    this.element;
  };
  
  Field.prototype.add = function() {};
  Field.prototype.remove = function() {};
  Field.prototype.getChild = function() {};
  
  Field.prototype.save = function() {
    setCookie(this.id, this.getValue);
  };
  
  Field.prototype.getElement = function() { 
    return this.element; 
  };
  
  Field.prototype.getValue = function() { 
    throw new Error('Unsupported operation on the class Field.'); 
  };

• InputFieldクラス

  /* InputField class. */
  
  var InputField = function(id, label) { // implements Composite, FormItem
    Field.call(this, id);
  
    this.input = document.createElement('input');
    this.input.id = id;
  
    this.label = document.createElement('label');
    var labelTextNode = document.createTextNode(label);
    this.label.appendChild(labelTextNode);
  
    this.element = document.createElement('p');
    this.element.className = 'input-field';
    this.element.appendChild(this.label);
    this.element.appendChild(this.input);
  };
  extend(InputField, Field); // Inherit from Field.
  
  InputField.prototype.getValue = function() { 
    return this.input.value;
  };

  
  
TextareaFieldクラス

• /* TextareaField class. */
  
  var TextareaField = function(id, label) { // implements Composite, FormItem
    Field.call(this, id);
  
    this.textarea = document.createElement('textarea');
    this.textarea.id = id;
  
    this.label = document.createElement('label');
    var labelTextNode = document.createTextNode(label);
    this.label.appendChild(labelTextNode);
  
    this.element = document.createElement('p');
    this.element.className = 'input-field';
    this.element.appendChild(this.label);
    this.element.appendChild(this.textarea);
  };
  extend(TextareaField, Field); // Inherit from Field.
  
  TextareaField.prototype.getValue = function() { 
    return this.textarea.value;
  };

SelectFieldクラス

• /* SelectField class. */
  
  var SelectField = function(id, label) { // implements Composite, FormItem
    Field.call(this, id);
  
    this.select = document.createElement('select');
    this.select.id = id;
  
    this.label = document.createElement('label');
    var labelTextNode = document.createTextNode(label);
    this.label.appendChild(labelTextNode);
  
    this.element = document.createElement('p');
    this.element.className = 'input-field';
    this.element.appendChild(this.label);
    this.element.appendChild(this.select);
  };
  extend(SelectField, Field); // Inherit from Field.
  
  SelectField.prototype.getValue = function() {
    return this.select.options[this.select.selectedIndex].value;
  };

• /* Usage. */
  
  var contactForm = new CompositeForm('contact-form', 'POST', 'contact.php');
  
  contactForm.add(new InputField('first-name', 'First Name'));
  contactForm.add(new InputField('last-name', 'Last Name'));
  contactForm.add(new InputField('address', 'Address'));
  contactForm.add(new InputField('city', 'City'));
  contactForm.add(new SelectField('state', 'State', stateArray)); 
  // var stateArray =[{'al', 'Alabama'}, ...]
  contactForm.add(new InputField('zip', 'Zip'));
  contactForm.add(new TextareaField('comments', 'Comments'));
  
  addEvent(window, 'unload', contactForm.save);

  の使用

  組み合わせモードは多数の場合に適していますこのモードでは、オブジェクトの分類操作を通じて、コードがよりモジュール化され、より明確になり、保守性が向上します

関連する推奨事項:

js の詳細な説明。ブリッジ設計パターン

Node.jsでよく使われる基本設計パターン例の分析

jsプロキシ設計パターンの詳細説明

以上がjsの組み合わせ設計パターンを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。