Introduction to Factory Method Pattern of JavaScript Design Patterns

This article mainly introduces the introduction of the factory method pattern in JavaScript design patterns. This article explains the simple factory pattern, multiple factory method patterns, etc. Friends in need can refer to it

1. Simple factory pattern

Explanation: It is to create a factory class, which implements the creation of implementation classes for the same interface.

But it seems that JavaScript does not have such a thing as an interface, so we remove the interface layer; of course, the member variables and methods under our implementation class should be the same;

For example: Here are examples of text message sending and email sending;

1. Email sending [implementation] class

function MailSender() {    
this.to = '';    
this.title = '';    
this.content = '';
}
MailSender.prototype.send = function() {    
//send body
}

2. SMS sending [implementation] class

function SmsSender() {
    this.to = '';
    this.title = '';
    this.content = '';
}

SmsSender.prototype.send = function() {
    //send body
}

3. Create a factory class:

function SendFactory() {
    this.sender = null;
}

SendFactory.prototype.produce = function(type) {
    var me = this;
    if (type == 'mail') {
        me.sender = new MailSender();
    } else if (type == 'sms') {
        me.sender = new SmsSender();
    }
　　 return me.sender;
}

4. Use this factory class:

var factory = new SendFactory();
var sender = factory.produce('mail'); //sms
sender.to = 'toName#mail.com';
sender.title = '邮件测试标题!';
sender.content = '发送内容';
sender.send();

2. Multiple factory method patterns

Explanation: Multiple factory mode methods are an improvement on ordinary factory methods, because the return implementation is based on the characters passed in. When the characters are entered incorrectly, it may not be processed, or it may be processed in the wrong way; and multiple Factory pattern method can avoid such errors;

We improve the above factory class:

function SendFactory() {
    this.sender = null;
}

SendFactory.prototype.produceMail = function() {
    var me = this;
    me.sender = new MailSender();
    return me.sender;
}
SendFactory.prototype.produceSms = function() {
    var me = this;
    me.sender = new SmsSender();
    return me.sender;
}

Usage method:

var factory = new SendFactory();
var sender = factory.produceSms(); //produceMail
sender.to = 'toName#xxxxx';
sender.title = '短信发送方法标题';
sender.content = '发送内容';
sender.send();

3. Static factory method pattern

Description: Just change the methods of the multiple factory method patterns above to static identifiers, so that they do not need to instantiate SendFactory;

will The factory class code is modified as follows:

var SendFactory = {
    produceMail : function() {
        return new MailSender();
    },
    produceSms : function() {
        return new SmsSender();
    }
}

Usage:

var sender = SendFactory.produceMail();
sender.to = 'toName#mail.com';
sender.title = '邮件发送标题';
sender.content = '发送内容';
sender.send();

Factory method pattern description

Instructions on object-oriented programming, When there are many products (real world models, names: class names, member attributes, operation methods, etc.) that need to be initialized, that is, products need to be created and [implement the same interface], you can use the factory method pattern; the first pattern has It is possible that the input type is wrong. In the second mode, a factory instance is created when needed;

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!