JavaScriptモードのファクトリモード(Factory)応用紹介

ファクトリモードもオブジェクト作成モードの1つであり、通常はクラスまたはクラスの静的メソッドで実装されます.オブジェクトを構築する方法の1つはnewオペレータを使用することですが、newを使用するとプログラミングを実装するために「結合」の問題が発生し、特定のクラスと密接に関係します.コードがより脆弱になり、弾力性が欠け、複雑な論理のプロジェクトではインタフェース向けのプログラミングが提案されています.
まず簡単な工場モデルを見てみましょう

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

コンストラクション関数方式でクラスを書くのとは異なり、thisは使用されず、毎回空のオブジェクトを構築し、プロパティを追加します.オブジェクトの作成方法は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 banana = Fruit.factory('Banana') 
  
var apple = Fruit.factory('Apple') 
  
var orange = Fruit.factory('Orange') 
  
 
 

3つの果物類Banana、Apple、Orange、1つの果物工場類Fruitがあり、静的方法factoryによって毎回異なる果物類オブジェクトを作ることができます.
工場モードはJavaScriptオリジナルオブジェクトObjectにも現れています.例えば

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

Objectは工場であり,パラメータによって異なるオブジェクトを構築する.objは空のオブジェクトでnumはNumberタイプのオブジェクトでstrはStringタイプのオブジェクトでbooはBooleanタイプのオブジェクトです.
jQuery.Callbacksもファクトリであり、呼び出すたびにadd,remove,fireなどのメソッドを持つオブジェクトが返されます.「once」、「memory」などのパラメータに基づいて、異なる性質を持つオブジェクトを構築することもできます.
ファクトリモードとは、1つのオブジェクトを返す方法です.
このパターンを利用して、私たちは何をすることができますか?既存のDOMオブジェクトにあるメソッドを満たさないと仮定すると、sayHelloというカスタムメソッドを追加したいと思います.

 
  
function RemouldNodeObj(DomNode){ 
  
//                 Dom   
  
if(typeof DomNode == "object" && DomNode.nodeType == 1){ 
  
DomNode.say = function(){ 
  
alert("Hello!!"); 
  
} 
  
}else{ 
  
alert("           !"); 
  
} 
  
} 
  
 
  
//    : 
  
window.onload = function(){ 
  
var oDiv = RemouldNodeObj(document.getElementById("test")); 
  
//     ，oDiv        say 
  
oDiv.say(); 
  
} 
  
 
 

上記の基礎があれば、jsの呼び出しを通じて簡単なformフォームを生成し、コードを見て、複雑な機能を実現します.

 
  
 
  
 
  
 
  
 
  <br>function RemouldNodeObj(DOMnode){ 
  <br>//                 Dom   
  <br>if(typeof DOMnode == "object" && DOMnode.nodeType == 1){ 
  <br>DOMnode.createForm = function(opt){ 
  <br>//            ,       form   
  <br>var oForm = ""; 
  <br>oForm += "<form action=\"" + opt.action + "\" "; 
  <br>oForm += "method=\"" + (opt.method || 'GET') + "\" id=\""; 
  <br>oForm += (opt.id || "") + "\""; 
  <br>oForm += "style=\"width:200px;height:30px;border:2px solid #223344\">"; 
  <br>oForm += "</form>"; 
  <br>//   this       ，       ，  this   oDiv 
  <br>this.innerHTML = oForm; 
  <br>} 
  <br>}else{ 
  <br>alert("     !"); 
  <br>} 
  <br>return DOMnode; 
  <br>} 
  <br> 
  <br>//     
  <br>window.onload = function(){ 
  <br>var oDiv = RemouldNodeObj(document.getElementById("custom")); 
  <br>oDiv.createForm({ 
  <br>'action' : 'index.jsp', 
  <br>'method' : 'post', 
  <br>'id' : 'myForm' 
  <br>}); 
  <br>} 
  <br> 
  
 
  
 
  
 
  
###
 
  
 
  
 
  
 
 

見たか?このような呼び出し方法はjQueryに似ていますか?ブラウザ間の問題を解決できれば、検索バープラグインを作ることができます.