JavaScript パターン ファクトリ パターンの概要 アプリケーション_JavaScript スキル

ファクトリ パターンもオブジェクト作成パターンの 1 つで、通常はクラスまたはクラスの静的メソッドに実装されます。オブジェクトを構築する 1 つの方法は new 演算子を使用することですが、new を使用するのはまさに実装プログラミングのためであり、「結合」問題が発生し、特定のクラスと密接に関連しています。これにより、コードがより脆弱になり、柔軟性が欠如します。複雑なロジックを含むプロジェクトでは、インターフェイス指向のプログラミングをお勧めします。
最初に簡単なファクトリ パターンを見てください

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

人(名前, 年齢) {
var obj = {}
obj.name = 名前
obj.age = 年齢
return obj
}
var p1 = 人( 'jack', 25)
var p2 = Person('lily', 22)

コンストラクターの方法でクラスを作成する場合の違いは、これを使用せずに、毎回オブジェクトを空にし、それにAdd属性を与えます。オブジェクトを作成する方法は new を使用するのではなく、関数呼び出しを使用します。このアプローチは基本的にクラス (同じプロパティを持つオブジェクト) を置き換えるために使用されますが、より複雑なファクトリでは異なるタイプのオブジェクトを作成できます。
以下はフルーツ工場の例です

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

function Banana( ) {
this.price = '$1.5'
}
function Apple() {
this.price = '$1.2'
}
function Orange () {
this .price = '$2.2'
}
// 静的ファクトリークラス
function Fruit() {}
Fruit.factory = function(type) {
if (!window[type]) {
return
}
var Fruit = new window[type]
return Fruit
}
// 別のフルーツを作成します
varバナナ = Fruit.factory('Banana ')
var apple = Fruit.factory('Apple')
var orange = Fruit.factory('Orange')

フルーツ クラスは 3 つありますバナナ、リンゴ、オレンジ、1 つ フルーツ ファクトリ クラス Fruit は、静的メソッド ファクトリを通じて毎回異なるフルーツ オブジェクトを作成できます。
ファクトリ パターンは、

などの JavaScript ネイティブ オブジェクト オブジェクトにも反映されます。コードをコピー コードは次のとおりです。

var obj = Object()、
num = Object(1)、
str = Object('s')、
boo = Object(false); >

オブジェクトはファクトリであり、異なるパラメータに従って異なるオブジェクトを構築します。 obj は空のオブジェクト、num は Number 型のオブジェクト、str は String 型のオブジェクト、boo は Boolean 型のオブジェクトです。
jQuery.Callbacks もファクトリーです。呼び出されるたびに、add、remove、fire などのメソッドを含むオブジェクトを返します。さまざまなプロパティを持つオブジェクトは、「once」、「memory」などのパラメータに基づいて構築することもできます。

いわゆるファクトリ パターンは、オブジェクトを返すことができるメソッドを指します。
このモデルを使用して何ができるでしょうか?既存の DOM オブジェクトのメソッドに満足できず、sayHello というカスタム メソッドを追加するとします。

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

function RemouldNodeObj(DomNode){
//最初に渡されたパラメーターが Dom ノードかどうかを判断します
if(typeof DomNode = = "オブジェクト" && DomNode.nodeType == 1){
DomNode.say = function(){
alert("Hello!!");
}
}else{
アラート("渡したパラメータが間違っています!");
}
}

//次のように呼び出します:
window.onload = function(){
var oDiv = RemouldNodeObj(document.getElementById("test"));
//このステップにより、oDiv には新しいメソッドが追加されました。
oDiv.say();


After上記の基礎を踏まえて、js を呼び出して単純なフォームを生成してみましょう。

コードをコピーします。 > コードは次のとおりです:

###

;




見ましたか？この呼び出し方法は jQuery に非常に似ていますか?クロスブラウザの問題を解決できれば、実際に検索バー プラグインを作成できるようになります。