The factory pattern is also one of the object creation patterns, which is typically implemented in a static method of a class or class. One way to construct an object is to use the new operator, but when you use new, it is a "coupling" problem, which is closely related to the specific class. Causes the code to be more fragile, lacks the elasticity, proposed in the complex logic project is the interface-oriented programming.
First look at the Simple factory model
Copy Code code 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 a constructor is that you don't use this, you construct an empty object each time, and then you add attributes to it. Instead of using new, you create an object by using a function invocation method. This approach is basically used to replace a class (objects with the same attributes), whereas a complex factory can create different types of objects.
Here is an example of a fruit factory
Copy Code code as follows:
function Banana () {
This.price = ' $1.5 '
}
function Apple () {
This.price = ' $1.2 '
}
function Orange () {
This.price = ' $2.2 '
}
Static Factory class
function Fruit () {}
Fruit.factory = function (type) {
if (!window[type]) {
Return
}
var fruit = new Window[type]
return fruit
}
Make different kinds of fruit
var banana = fruit.factory (' banana ')
var Apple = fruit.factory (' Apple ')
var orange = fruit.factory (' orange ')
There are three fruit banana, Apple, Orange, a fruit factory class fruit, through the static method factory each time can produce different fruit class object.
The factory pattern is also reflected in JavaScript native object objects, such as
Copy Code code as follows:
var obj = Object (),
num = Object (1),
str = Object (' s '),
Boo = Object (false);
Object is a factory that constructs different objects based on different parameters. Obj is an empty object, and Num is an object of type number, and Str is a string object, and Boo is a Boolean type object.
Jquery.callbacks is also a factory that returns an object with Add, remove, fire, and so on, each time it is invoked. Objects with different properties can also be constructed according to parameters such as "Once" and "memory".
The so-called factory model is the method that can return an object.
What can we do with this model? Assuming I don't meet the methods that are available in the existing DOM object, I want to add a custom method called SayHello, which we can do:
Copy Code code as follows:
function Remouldnodeobj (domnode) {
Let's first determine if the passed in parameter is a DOM node
if (typeof Domnode = = "Object" && Domnode.nodetype = = 1) {
Domnode.say = function () {
Alert ("hello!!");
}
}else{
Alert ("You are passing in the wrong parameters!");
}
}
This call:
Window.onload = function () {
var odiv = remouldnodeobj (document.getElementById ("Test"));
By this step, Odiv has a new approach say
Odiv.say ();
}
With the above foundation, we realize the point of complex functions, we want to implement as long as the call through JS to generate a simple form form, see Code:
Copy Code code as follows:
<title>javascript's Factory model </title>
<script type= "Text/javascript" >
function Remouldnodeobj (domnode) {
Let's first determine if the passed in parameter is a DOM node
if (typeof Domnode = = "Object" && Domnode.nodetype = = 1) {
Domnode.createform = function (opt) {
Here's a bunch of string additions, just to assemble the form element
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>";
Here's this don't think too complex, who calls on who, so this is pointing odiv
this.innerhtml = Oform;
}
}else{
Alert ("Incorrect parameter!");
}
return domnode;
}
This calls
Window.onload = function () {
var odiv = remouldnodeobj (document.getElementById ("Custom"));
Odiv.createform ({
' Action ': ' index.jsp ',
' method ': ' Post ',
' ID ': ' myForm '
});
}
</script>
<body>
<div id= "Custom" >###</div>
</body>
Did you see it? Is such a way of calling like jquery? If you can solve the problem of cross-browser, in fact, can make a search bar plugin!
