ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptを深く理解するシリーズ(28):デザインパターンのファクトリーパターンを詳しく解説_JavaScriptスキル

JavaScriptを深く理解するシリーズ(28):デザインパターンのファクトリーパターンを詳しく解説_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 16:11:13999ブラウズ

はじめに

作成パターンと同様に、ファクトリ パターンは、作成されるオブジェクトの特定のクラスを指定せずにオブジェクト (工場内の製品と見なされます) を作成します。

ファクトリ パターンは、オブジェクトを作成するためのインターフェイスを定義します。このインターフェイスは、サブクラスによってインスタンス化されるクラスを決定します。このパターンでは、クラスのインスタンス化をサブクラスに延期します。サブクラスは、インターフェイス メソッドをオーバーライドして、作成時に独自のオブジェクト タイプを指定できます。

このモードは、特に多くの設定ファイルに依存するなど、オブジェクトの作成プロセスに値を割り当てる場合に非常に便利です。さらに、プログラムではファクトリ メソッドがよく見られます。ファクトリ メソッドは、作成する必要があるオブジェクトのタイプをサブクラスに定義させるために使用されます。

テキスト

次の例は、ファクトリ メソッドを適用する第 26 章のコンストラクター パターン コードの改良版です。

コードをコピー コードは次のとおりです:

var Car = (function () {
var Car = 関数 (モデル、年、走行距離) {
This.model = モデル;
This.year = year;
This.miles = マイル;
};
戻り関数 (モデル、年、マイル) {
新車を返す(モデル、年式、走行距離);
};
})();

var tom = new Car("Tom", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

理解するのが難しい場合は、別の例を挙げてみましょう:

コードをコピー コードは次のとおりです:

var productManager = {};

productManager.createProductA = function () {
console.log('製品A');
}

productManager.createProductB = function () {
console.log('ProductB');
}

productManager.factory = function (typeType) {
新しい productManager[typeType];
を返します }

productManager.factory("createProductA");

まだ理解できない場合は、Web ページにいくつかの要素を挿入するとします。これらの要素のタイプは、画像、リンク、またはテキストである可能性があります。 「ファクトリ パターンを定義するには、ファクトリ クラスと対応するサブクラスを定義する必要があります。」によると、まずサブクラス (つまり、サブ関数) の特定の実装を定義します。

コードをコピー コードは次のとおりです:
var ページ = ページ {};
page.dom = ページ.dom {};
//サブ関数 1: テキストの処理
page.dom.Text = function () {
This.insert = 関数 (どこ) {
var txt = document.createTextNode(this.url);
Where.appendChild(txt);
};
};
//サブ関数 2: リンクの処理

page.dom.Link = function () {
This.insert = 関数 (どこ) {
var link = document.createElement('a');
link.href = this.url;
link.appendChild(document.createTextNode(this.url));
Where.appendChild(link);
};
};

//サブ機能 3: 画像の処理

page.dom.Image = function () {
This.insert = 関数 (どこ) {
var im = document.createElement('img');
im.src = this.url;
Where.appendChild(im);
};
};

それでは、ファクトリ処理関数をどのように定義すればよいでしょうか?実際はとても簡単です:


コードをコピー コードは次のとおりです:
page.dom.factory = 関数 (型) {
新しい page.dom[type];
を返します }

使用方法:

コードをコピー コードは次のとおりです:

var o = page.dom.factory('リンク');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

この時点で、ファクトリーモデルの導入については誰もが明確に理解していると思いますので、これ以上詳しく説明しません。

概要

ファクトリーパターンを使用する場合

ファクトリー モードは、次のシナリオで特に役立ちます:

1. オブジェクトの構築は非常に複雑です
2. 特定の環境に応じて異なるインスタンスを作成する必要があります
3. 同じプロパティを持つ多数の小さなオブジェクトを処理します

ファクトリーモードを使用しない場合

ファクトリー パターンを乱用しないでください。場合によっては、コードに不必要な複雑さが追加され、テストの実行が困難になることがあります。

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