Example of a factory pattern in JavaScript design mode

Source: Internet
Author: User

  This article mainly introduces the example explanation of the factory pattern in JavaScript design pattern, the friend who need can refer to the following

JavaScript Factory Way original   because the properties of an object can be dynamically defined after the object is created, this code, similar to the following, is written in JavaScript when it was first introduced: 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 object car. Then give it a few properties: its color is blue, there are four doors, each gallon can run 25 miles. The last property is actually a pointer to a function, which means that the property is a method. After you execute this code, you can use the object car. One problem here, though, is that it's possible to create multiple instances of car, which is obviously not a good way to do it.   Solutions: Factory approach to solve this problem, developers create factory functions that create and return specific types of objects. For example, the function Createcar () can be used to encapsulate the actions listed earlier for creating the car object:     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, you create a new object, give it all the necessary properties, and add parameters to the Createcar () function to assign values to the color, doors, and mpg properties of the car object you want to create. This causes two objects to have the same properties, but with different property values. The downside of this approach is that every time a car object is created (that is, the Createcar function is called once) it is repeated to create a Showcolor method for each object, which is not necessary and, in fact, each object shares the same function. So we try to declare its method attributes outside of the function.   Methods for defining objects outside of a factory function some developers define the object's methods outside of the factory function and then point to the method with attributes to avoid the problem:       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 above rewrite code, the function Showcolor () is defined before the function Createcar (). Within Createcar (), give the object a pointer to the existing Showcolor () function. Functionally, this solves the problem of duplicating the creation of a function object, but semantically, the function is not much like the object's method.    
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.