In-depth understanding of JavaScript series (28): Detailed explanation of the factory pattern of design patterns_javascript skills

Introduction

Similar to the creational pattern, the factory pattern creates objects (considered as products in the factory) without specifying the specific class of the object to be created.

The factory pattern defines an interface for creating objects. This interface determines which class to instantiate by the subclass. This pattern defers instantiation of a class to subclasses. Subclasses can override interface methods to specify their own object types when creating.

This mode is very useful, especially when assigning values ​​to the process of creating objects, such as relying on many settings files. Moreover, you will often see factory methods in programs, which are used to let subclasses define the types of objects that need to be created.

Text

The following example is an improved version of the constructor pattern code in Chapter 26 that applies the factory method:

Copy code 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, 20000);
var dudu = new Car("Dudu", 2010, 5000);

If it’s hard to understand, let’s give you another example:

Copy code 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 you still don’t understand, let’s go into more detail. Suppose we want to insert some elements into the web page, and the types of these elements are not fixed. They may be pictures, links, or even text. According to To define the factory pattern, we need to define the factory class and the corresponding subclass. Let’s first define the specific implementation of the subclass (that is, the subfunction):

Copy code 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);
};
};

//Sub-function 2: Processing links
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);
};
};

//Sub-function 3: Processing pictures
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 the factory processing function? It’s actually very simple:

Copy code The code is as follows:

page.dom.factory = function (type) {
Return new page.dom[type];
}

How to use:

Copy code The code is as follows:

var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);

At this point, I believe everyone has a clear understanding of the introduction to the factory model, so I will not elaborate further.

Summary

When to use factory pattern

Factory mode is particularly useful in the following scenarios:

1. The construction of objects is very complicated
2. Different instances need to be created depending on the specific environment
3. Process a large number of small objects with the same properties

When not to use factory mode

Do not abuse the factory pattern. Sometimes it just adds unnecessary complexity to the code and makes it difficult to run the test.