JavaScriptのトップ10のパターン

1 .コンストラクタパターン

古典的なオブジェクト指向プログラミング言語では、コンストラクタは、メモリが割り当てられた後に新しく作成されたオブジェクトを初期化するために使用される特別なメソッドです.JavaScriptではほとんどすべてがオブジェクトで、オブジェクトコンストラクタに最も興味があります.オブジェクトコンストラクターは、特定の種類のオブジェクトを作成するために使用されます.たとえば、使用するオブジェクトを準備し、引数を受け入れると、コンストラクターがオブジェクトの最初の作成時にメンバーのプロパティとメソッドの値を設定するために使用できます.

JavaScriptは、クラスの概念をサポートしていないことを知っているので、コンストラクタの内部では、これはオブジェクト作成を再訪問して作成された新しいオブジェクトを参照します.基本的なコンストラクタは次のようになります.

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

// Usage:
var bmw = new Car('M4', '2019', '1000');

モジュールのパターン

モジュールは、任意の堅牢なアプリケーションのアーキテクチャの不可欠な部分であり、一般的にきれいに分離し、組織のプロジェクトのためのコードの単位を維持するのに役立ちます
モジュールの実装にはいくつかのオプションがあります.以下を含みます:

オブジェクトリテラル表記

モジュールパターン

AMDモジュール

CommonJSモジュール

ecmascriptハーモニーモジュール

オブジェクトリテラル:

var newObject = {
  variableKey: variableValue,
  functionKey: function() {
    //…
  }
};

モジュールパターン:

まず、モジュール型の実装を見てみましょう.

var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return ++counter;
    },
    resetCounter: function() {
      counter = 0;
    }
  };
})();

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

3 .公開モジュールのパターン

公開モジュールが行うことができる1つのことは、1つのパブリックメソッドを別のパブリックメソッドから呼び出すか、パブリック変数にアクセスしたい場合に、メインオブジェクトの名前を繰り返すことを避けることです.

var myRevealingModule = (function() {
  var privateVariable = 'not okay',
    publicVariable = 'okay';
  function privateFun() {
    return privateVariable;
  }

  function publicSetName(strName) {
    privateVariable = strName;
  }

  function publicGetName() {
    privateFun();
  }

  return {
    setName: publicSetName,
    message: publicVariable,
    getName: publicGetName
  };
})();

//Usage:

myRevealingModule.setName('Marvin King');

シングルトンパターン

単一のオブジェクトにクラスのインスタンス化を制限するので、Singletonパターンはこのように知られています.それらの初期化を遅らせることができるので、singletonsは静的クラスと異なります.一般的に、それらは初期化時間の間、利用できないかもしれない若干の情報を必要とするので.前の参照を知らないコードでは、簡単な検索のためのメソッドを提供しません.シングルトンの構造を見てみましょう

var singletonPattern = (function() {
  var instance;
  function init() {
    // Singleton
    function privateMethod() {
      console.log('privateMethod');
    }
    var privateVariable = 'this is private variable';
    var privateRandomNumber = Math.random();
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProperty: 'this is public property',
      getRandomNumber: function() {
        return privateRandomNumber;
      }
    };
  }

  return {
    // Get the singleton instance if one exists
    // or create if it doesn't
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

// Usage:
var single = singletonPattern.getInstance();

オブザーバーパターン

オブザーバは、オブジェクトがITオブザーバに応じてオブジェクトのリストを保持し、自動的に状態への変更を通知するデザインパターンです.

主題

は観測者のリストを維持し、観測者を追加したり除去したりする

オブザーバー

は、被修飾者の状態

の通知を必要とするオブジェクトのためのアップデートインターフェースを提供する

は、状態の変化に関する観察者に通知を放送します.

具体的オブザーバ

は、具体的なオブジェクトと一致している状態を保証するために、ObjectSubjectへのリファレンスを格納しています

function ObserverList() {
  this.observerList = [];
}

ObserverList.prototype.Add = function(obj) {
  return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function() {
  this.observerList = [];
};

ObserverList.prototype.Count = function() {
  return this.observerList.length;
};

ObserverList.prototype.Get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};

//...

被験者が何か面白いことについて観察者に通知する必要があるときは、観察者に通知を放送する(通知の内容に関する特定のデータを含む)
私たちがもはや特定のオブザーバーがそれが登録される主題による変化の通知を望まないとき、主題はオブザーバーのリストからそれを削除することができます.今後は、JavaScriptの中でオブザーバーをどのように使用できるかについてもっとお話します.

メディエータパターン

システムがコンポーネント間の多すぎる直接関係を持っているように見える場合.コンポーネントがその代わりに通信するコントロールの中心点を持つ時間かもしれません.媒介者パターンは、コンポーネントの代わりにそれを確実に参照することによって、ルーズ結合を促進する.

var mediator = (function() {
  var topics = {};
  var subscribe = function(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    topics[topic].push({ context: this, callback: fn });
    return this;
  };

  // publish/broadcast an event to the rest of the application
  var publish = function(topic) {
    var args;
    if (!topics[topic]) {
      return false;
    }
    args = Array.prototype.slice.call(arguments, 1);
    for (var i = 0, l = topics[topic].length; i < l; i++) {
      var subscription = topics[topic][i];
      subscription.callback.apply(subscription.content, args);
    }
    return this;
  };
  return {
    publish: publish,
    subscribe: subscribe,
    installTo: function(obj) {
      obj.subscribe = subscribe;
      obj.publish = publish;
    }
  };
})();

プロトタイプパターン

プロトタイプパターンを使用する利点の1つは、プロトタイプの強さをJavaScriptがネイティブではなく、他の言語の機能を模倣しようとして提供しています.パターンの例を見てみましょう.

var myCar = {
  name: 'bmw',
  drive: function() {
    console.log('I am driving!');
  },
  panic: function() {
    console.log('wait, how do you stop this thing?');
  }
};

//Usages:

var yourCar = Object.create(myCar);

console.log(yourCar.name); //'bmw'

ファクトリパターン

工場はオブジェクトを作成するための一般的なインターフェースを提供することができます.下の図を見てください.

function Car(options) {
  this.doors = options.doors || 4;
  this.state = options.state || 'brand new';
  this.color = options.color || 'silver';
}

mixinパターン

Mixinsは、関数の再利用を目的としてサブクラスやサブクラスのグループによって簡単に継承できる機能を提供するクラスです.

var Person = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.gender = 'male';
};

var clark = new Person('Clark', 'kent');

var Superhero = function(firstName, lastName, powers) {
  Person.call(this.firstName, this.lastName);
  this.powers = powers;
};

SuperHero.prototype = Object.create(Person.prototype);
var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);

console.log(superman); //output personal attributes as well as power

この場合、スーパーヒーローはどんな継承された値もそのオブジェクトに特有の値で上書きすることができます.

10 .デコレータパターン

デコレータはコード再利用を促進するための構造設計パターンである.ミックスに似て、オブジェクトサブクラスに別の実行可能な代替と見なされることができます.古典的に、デコレータは、動的にシステムの既存のクラスに振舞いを加える能力を提供しました.アイデアは、それ自体はクラスの基本機能に不可欠ではなかった.JavaScriptでどのようにデコレータが動作するかチェックしましょう

function MacBook() {
  this.cost = function() {
    return 997;
  };
  this.screenSize = function() {
    return 11.6;
  };
}

// Decorator 1

function Memory(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 75;
  };
}

// Decorator 2

function Engraving(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 200;
  };
}

// Decorator 3

function Insurance(macbook) {
  var v = macbook.cost();
  macbook.cost = function() {
    return v + 250;
  };
}

var mb = new MacBook();

Memory(mb);
Engraving(mb);
Insurance(mb);

mb.cost(); // 1522

すべてのパターンは、1つのプロジェクトには使用できません.また、いくつかのプロジェクトは、オブザーバーパターンによって提供されるデカップリングの利点から恩恵を受けるかもしれません.それは、一旦我々がデザインパターンと特定の問題のしっかりした把握をするならば、彼らが最も適していると言いました.したがって、我々のアプリケーションアーキテクチャに統合することが非常に容易になります.