ホームページ >ウェブフロントエンド >jsチュートリアル >JSデザインパターンのファクトリーパターンの詳細解説
今回は、JSDesign PatternのFactory 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デザインパターンのファクトリーパターンの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。