ホームページ  >  記事  >  ウェブフロントエンド  >  JSデザインパターンのファクトリーパターンの詳細解説

JSデザインパターンのファクトリーパターンの詳細解説

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-14 14:18:011573ブラウズ

今回は、JSDesign PatternFactory Patternと、JS Factory Patternを使用する際の注意点について詳しく説明します。実際のケースを見てみましょう。

概念: ファクトリ パターンは、オブジェクトを作成するためのインターフェイスを定義します。このインターフェイスは、クラスのインスタンス化がサブクラスに遅れることを意味します。サブクラスは、作成時にインターフェイス メソッドをオーバーライドして独自のオブジェクト タイプ (抽象ファクトリー) を指定できます。

機能と注意事項
機能: オブジェクトの構築は非常に複雑です。

特定の環境に応じて異なるインスタンスを作成する必要があります

同じプロパティを持つ多数の小さなオブジェクトを処理します

注: ファクトリを悪用することはできません。場合によってはコードが複雑になるだけです

使い方
Let's例を使用する この問題を説明するには、工場でさまざまなタイプの製品を生産したいのと同じように、各タイプをメソッドに記述して、生産中にこのメソッドを直接呼び出せるようにします。 次に、このコードを見てください:

var productManager = {};
productManager.createProductA = function () {
    console.log('ProductA');
}
productManager.createProductB = function () {
    console.log('ProductB');
}
productManager.factory = function (typeType) {
    return new productManager[typeType];
}
productManager.factory("createProductA");

いくつかの要素を Web ページに挿入したいとします。これらの要素のタイプは、画像、リンク、またはテキストである可能性があります。 ICBC モデルの定義 対応するサブクラスを定義する必要があります

var page = page || {};
page.dom = page.dom || {};//子函数1:处理文本page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};//子函数2:处理链接page.dom.Link = function () {
    this.insert = function (where) {
        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 = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};

それでは、ファクトリ パターンをどのように定義するのでしょうか?実際、それは非常に簡単です

page.dom.factory = function (type) {
    return new page.dom[type];}

その使用方法は次のとおりです:

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

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです!

推奨読書:

JSデザインパターンのビルダーパターンの詳細な説明

JSデザインパターンのコンストラクターパターンの詳細な説明

jsデザインパターン - シングルトンパターンの使用

以上がJSデザインパターンのファクトリーパターンの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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