In-depth understanding of the JavaScript series (28): Detailed description of the factory model of the design model
This article mainly introduces the JavaScript series (28): Detailed description of the factory mode of the design mode. The factory mode defines an interface used to create objects. This interface is determined by the subclass which class to instantiate, for more information, see
Introduction
Similar to the creation mode, when creating an object in the factory mode (as a product in the factory), you do not need to specify a specific class for creating the object.
The factory mode defines an interface for creating objects. The subclass determines which class to instantiate. This mode delays the instantiation of a class to the subclass. Subclass can override the interface method to specify its own object type during creation.
This mode is very useful, especially when the process of creating an object is assigned a value, for example, depending on many configuration files. In addition, you will often see the factory method in the program to let the subclass class define the object type to be created.
Body
In the following example, the improved version of the constructor pattern code in Chapter 26th is applied to the factory method:
The Code is as follows:
Var Car = (function (){
Var Car = function (model, year, miles ){
This. model = model;
This. year = year;
This. miles = miles;
};
Return function (model, year, miles ){
Return new Car (model, year, miles );
};
})();
Var tom = new Car ("Tom", 2009,200 00 );
Var dudu = new Car ("Dudu", 2010,500 0 );
If it is hard to understand, let's give another example:
The Code is as follows:
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 ");
If we still don't understand it, let's look at it in detail. If we want to insert some elements into the webpage, and these element types are not fixed, they may be images, it may also be a connection or even a text. According to the definition of the factory mode, we need to define the factory class and the corresponding subclass. Let's first define the concrete implementation of the subclass (that is, the subfunction):
The Code is as follows:
Var page = page | {};
Page. dom = page. dom || {};
// Subfunction 1: process text
Page. dom. Text = function (){
This. insert = function (where ){
Var txt = document. createTextNode (this. url );
Where. appendChild (txt );
};
};
// Subfunction 2: process the link
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 );
};
};
// Subfunction 3: process images
Page. dom. Image = function (){
This. insert = function (where ){
Var im = document. createElement ('img ');
Im. src = this. url;
Where. appendChild (im );
};
};
So how do we define factory processing functions? It is actually very simple:
The Code is as follows:
Page. dom. factory = function (type ){
Return new page. dom [type];
}
The usage is as follows:
The Code is as follows:
Var o = page. dom. factory ('link ');
O. url = 'HTTP: // www.cnblogs.com ';
O. insert (document. body );
So far, the introduction of the factory model is clear to everyone, so I will not describe it more.