Detailed explanation of factory pattern of JS design pattern

This time I will bring you a detailed explanation of the Factory Pattern of JSDesign Pattern, what are the precautions when using the JS Factory Pattern, the following is a practical case, Let’s take a look.

Concept: Factory pattern defines an interface for creating objects. This interface determines which class to instantiate by the subclass. This pattern is that the instantiation of a class is delayed to the subclass. . The subclass can override the interface method to specify its own object type (abstract factory) when creating it

Function and precautions
Function: Object construction is very complicated.

Need to create different instances depending on the specific environment

Process a large number of small objects with the same properties

Note: Do not abuse the factory, sometimes just add to the code Complexity

Usage method
We use an example to demonstrate this problem, just like we want to produce different types of products in this factory, we write each type in a method, so that when we produce Just call this method directly. Then please look at this code:

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");

Let’s be more detailed. 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 the definition of ICBC mode, we need to define the corresponding subclass

var page = page || {};
page.dom = page.dom || {};//子函数1：处理文本page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url);
        where.appendChild(txt);
    };
};//子函数2：处理链接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);
    };
};//子函数3：处理图片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 mode? In fact, it is very simple

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

The usage method is as follows:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed Explanation of the Builder Pattern of JS Design Patterns

Detailed Explanation of the Constructor Pattern of JS Design Patterns

js design pattern - the use of singleton pattern

The above is the detailed content of Detailed explanation of factory pattern of JS design pattern. For more information, please follow other related articles on the PHP Chinese website!