In depth understanding of JavaScript series (28) : factory model details of design patterns

introduce

Similar to the creation pattern, the factory pattern creates objects (as products in the factory) without specifying the concrete classes in which the objects are created.

The factory pattern defines an interface for creating an object that is instantiated by the subclass. This pattern delays the instantiation of 1 class to subclasses. Subclasses can override interface methods to specify their own object types when they are created.

This pattern is useful especially when creating flow assignments for objects, such as depending on a number of Settings files. Also, you'll often see factory methods in programs that let subclasses define the types of objects that need to be created.

The body of the

In the following example, an improved version of the chapter 26 constructor pattern code is applied using the factory method:

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 another example:

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 1 point in detail, then if we want to insert in site 1 some elements, and these element types are not fixed, may be the picture, it is possible that connection, and perhaps even text, based on the definition of the factory pattern, we need to define the factory class and the corresponding subclass, we first define a subclass of concrete implementation (that is, a function) :

var page = page || {};

page.dom = page.dom || {};

// A subroutine 1 : processing text 

page.dom.Text = function () {

    this.insert = function (where) {

        var txt = document.createTextNode(this.url);

        where.appendChild(txt);

    };

};
// A subroutine 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);

    };

};
// A subroutine 3 : image processing 

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 a factory handler? It's very simple:

page.dom.factory = function (type) {

    return new page.dom[type];

}

The usage is as follows:

var o = page.dom.factory('Link');

o.url = 'http://www.cnblogs.com';

o.insert(document.body);

At this point, the introduction of the factory model I believe you already know, I will not go into more details.

conclusion

When to use factory mode

The factory model is particularly useful in the following situations:

1. Object construction is 10 percent complex
2. You need to create different instances depending on the specific environment
3. Handle a large number of small objects with the same properties

When shouldn't you use factory mode

Not abusing the factory model sometimes simply adds unnecessary complexity to the code and makes it difficult for the tests to run.