Factory pattern example in javascript Design Pattern

Factory pattern example in javascript Design Pattern

This article mainly introduces the example of the factory mode in the javascript design mode. For more information, see

Original javaScript factory Method

 

Because the attributes of an object can be dynamically defined after the object is created, the following code will be written at the beginning of JavaScript introduction.

 

The Code is as follows:

Var oCar = new Object;

OCar. color = "blue ";

OCar. doors = 4;

OCar. mpg = 25;

OCar. showColor = function (){

Alert (this. color );

};

 

 

In the above Code, create the car object. Then set several properties for it: the color is blue, there are four doors, each gallon of oil can run 25 miles. The last attribute is actually a pointer to a function, which means this attribute is a method. After executing this code, you can use the object car. However, there is a problem here, that is, you may need to create multiple car instances, which is obviously not a good method.

 

Solution: factory Method

To solve this problem, the developer creates a factory function that can create and return specific types of objects. For example, the createCar () function can be used to encapsulate the operations for creating car objects listed above:

 

The Code is as follows:

Function createCar (sColor, iDoors, iMpg ){

Var oTempCar = new Object;

OTempCar. color = sColor;

OTempCar. doors = iDoors;

OTempCar. mpg = iMpg;

OTempCar. showColor = function (){

Alert (this. color );

};

Return oTempCar;

}

 

Var oCar1 = createCar ("red", 4,23 );

Var oCar2 = createCar ("blue", 3,25 );

 

OCar1.showColor (); // output "red"

OCar2.showColor (); // output "blue"

 

 

 

Call this factory function to create a new object and assign all necessary attributes to it. Add parameters to the createCar () function, you can assign values to the color, doors, and mpg attributes of the car object to be created. This enables two objects to have the same property but different property values. The disadvantage of this method is that every time a car object is created (that is, the createCar function is called), The showColor method is repeatedly created for each object. In this case, there is no need but in fact, each object shares the same function. So we try to declare its method attributes outside the function.

 

Method for defining objects outside the factory function

Some developers Define object Methods outside the factory function and point to this method through properties to avoid this problem:

 

 

The Code is as follows:

Function showColor (){

Alert (this. color );

}

 

Function createCar (sColor, iDoors, iMpg ){

Var oTempCar = new Object;

OTempCar. color = sColor;

OTempCar. doors = iDoors;

OTempCar. mpg = iMpg;

OTempCar. showColor = showColor;

Return oTempCar;

}

 

Var oCar1 = createCar ("red", 4,23 );

Var oCar2 = createCar ("blue", 3,25 );

 

OCar1.showColor (); // output "red"

OCar2.showColor (); // output "blue"

 

 

 

In the Code rewritten above, the showColor () function is defined before the createCar () function (). Inside createCar (), assign the object a pointer to an existing showColor () function. In terms of functions, this solves the problem of repeatedly creating function objects. However, in terms of semantics, this function is not like an object method.