The factory mode is also one of the object creation modes. It is usually implemented in static methods of classes or classes. One way to construct an object is to use the new operator. However, when using the new operator, it is intended to implement programming, which will cause the "coupling" problem, which is closely related to the specific class. As a result, the code is more fragile and less elastic. In complex logic projects, we recommend that you use interface-oriented programming.
First look at the simple factory Model
The Code is as follows:
Person (name, age ){
Var obj = {}
Obj. name = name
Obj. age = age
Return obj
}
Var p1 = Person ('jack', 25)
Var p2 = Person ('lily', 22)
The difference between writing a class with the constructor method is that it does not use this, but constructs an empty object every time and adds attributes to it. You can create an object by calling a function instead of using new. This method is basically used to replace a class (object with the same attribute), while complicated factories can create different types of objects.
The following is an example of a fruit factory.
The Code is as follows:
Function Banana (){
This. price = '$1.5'
}
Function Apple (){
This. price = '$1.2'
}
Function Orange (){
This. price = '$2.2'
}
// Static factory type
Function Fruit (){}
Fruit. factory = function (type ){
If (! Window [type]) {
Return
}
Var fruit = new window [type]
Return fruit
}
// Make different fruits
Var banana = Fruit. factory ('bana ')
Var apple = Fruit. factory ('apple ')
Var orange = Fruit. factory ('Orange ')
There are three Fruit class Banana, Apple, Orange, and a Fruit factory class Fruit. Different Fruit class objects can be created each time using the static factory method.
The factory mode is also reflected in JavaScript native Object objects, such
The Code is as follows:
Var obj = Object (),
Num = Object (1 ),
Str = Object ('s '),
Boo = Object (false );
An Object is a factory. Different objects are constructed based on different parameters. Obj is an empty object, num is a Number type object, str is a String type object, and boo is a Boolean type object.
JQuery. Callbacks is also a factory. Every time you call it, it returns an object with methods such as add, remove, and fire. You can also construct objects of different properties based on parameters such as "once" and "memory.
The so-called factory mode refers to the method that can return an object.
What can we do with this model? Assume that I do not meet the existing methods in the DOM object. I want to add a custom method named sayHello. We can do this:
The Code is as follows:
Function RemouldNodeObj (DomNode ){
// First, determine whether the passed parameter is a Dom node.
If (typeof DomNode = "object" & DomNode. nodeType = 1 ){
DomNode. say = function (){
Alert ("Hello !! ");
}
} Else {
Alert ("the parameter you passed in is incorrect! ");
}
}
// Call this method as follows:
Window. onload = function (){
Var oDiv = RemouldNodeObj (document. getElementById ("test "));
// Through this step, oDiv has a new method of say
ODiv. say ();
}
With the above foundation, we can implement the complex functions of points. We need to generate a simple form as long as we call Javascript. See the Code:
The Code is as follows:
<Html>
<Head>
<Title> factory mode of JavaScript </title>
<Script type = "text/javascript">
Function RemouldNodeObj (DOMnode ){
// First, determine whether the passed parameter is a Dom node.
If (typeof DOMnode = "object" & DOMnode. nodeType = 1 ){
DOMnode. createForm = function (opt ){
// Below is a large string addition, just to assemble form elements
Var oForm = "";
OForm + = "<form action =" "+ opt. action + """;
OForm + = "method =" "+ (opt. method | 'get') +" "id = "";
OForm + = (opt. id | "") + """;
OForm + = "style =" width: 200px; height: 30px; border: 2px solid #223344 "> ";
OForm + = "</form> ";
// Do not think too complicated about this. If this is called, it points to oDiv.
This. innerHTML = oForm;
}
} Else {
Alert ("the parameter is incorrect! ");
}
Return DOMnode;
}
// Call this method
Window. onload = function (){
Var oDiv = RemouldNodeObj (document. getElementById ("custom "));
ODiv. createForm ({
'Action': 'index. jsp ',
'Method': 'post ',
'Id': 'myform'
});
}
</Script>
</Head>
<Body>
<Div id = "custom" >### </div>
</Body>
</Html>
Did you see it? Is this call method similar to jQuery? If you can solve cross-browser problems, you can actually create a search bar plug-in!