My learning notes are updated regularly according to my learning situation. I expect to update a chapter in 2-3 days. The main purpose is to share with you what I have learned. If there are any mistakes, please point them out in the comments. I will accept them modestly. So let's start our learning and sharing today.

Several times, we have shared with you how to realize the encapsulation inheritance and polymorphism of javascript. This time, we begin to formally introduce the design pattern of javascript.

This time we will introduce the creative design pattern, which is a kind of design pattern dealing with the creation of objects. It can control the creation of objects in some way to avoid the design problems or increase the design complexity when creating basic objects.

In the Creative Design Patterns, we mainly share the simple factory pattern, factory method pattern, abstract factory pattern, builder pattern, prototype pattern and singleton pattern. This time I will share with you the simple factory model.

Simple factory model

Simple Factory: Also known as the static factory method, a factory object decides to create an instance of a product object. It is mainly used to create the same kind of objects.

It's possible that the concept is vague. Let me show you with an example.

Let's talk about me. Before I change, I will call these three methods directly, where to use and where to call them directly.

function TestAlert(){
     alert("This is a prompt box!");
 }
 function TestConfirm(){
     confirm("This is a confirmation box!")
 }
 function TestPrompt(){
     prompt("What's the weather like today?","");
 }

However, if the requirements change, I will pop up another hint, I may write three more methods.

function TestAgainAlert(){
     alert("This is another prompt box!");
 }
 function TestAgainConfirm(){
     confirm("This is another confirmation box!")
 }
 function TestAgainPrompt(){
     prompt("What's the weather like tomorrow?","");
 }

In the past, I might think it's OK to copy, paste and change things if I didn't have much, but if I wrote more, I might forget to look for them one by one. But after I had the concept of encapsulation, I might change it. I can think of the three prompt boxes as three classes: prompt class, confirmation class and input prompt class.

var AlertClass=function(text){
    this.content=text;
 }
AlertClass.prototype.show=function(){
    alert(this.content);
};

Let's look at the call

var TestAlert=new AlertClass("This is a prompt box!");
TestAlert.show();

Other Similarities

//Confirmation class
 var ConfirmClass=function(text){
    this.content=text;
 }
ConfirmClass.prototype.show=function(){
    confirm(this.content);
};
var TestConfirm=new ConfirmClass("This is a confirmation box!");
TestConfirm.show();
//Enter prompt class
 var PromptClass=function(text){
    this.content=text;
 }
PromptClass.prototype.show=function(){
    prompt(this.content);
};
var TestPrompt=new PromptClass("What's the weather like today?");
TestPrompt.show();

In this way, we can be easily managed after encapsulation into classes, but it is still troublesome because we need to instantiate different objects in different situations. At this time, we can solve this problem through simple factory mode.

Let's first define a factory.

var EjectFactory=function(name,text){
    switch(name){
        case 'alert':
        return new AlertClass(text);
        case 'confirm':
        return new confirm(text);
        case 'prompt':
        return new PromptClass(text);
    }
}

So we created a factory and we tried to call it.

var TestAgainAlert=EjectFactory('alert','This is a simple factory mode creation prompt box!');
TestAgainAlert.show();

Does it look simple, so that we can decide which class instance we want to instantiate through a factory? The idea of simple factory pattern is to create objects. As I just demonstrated, it is to instantiate different classes. Besides, simple factory pattern can also be used to create similar objects.

Let's also use the examples above. We can see that the examples above all have content attributes and show methods, so we can put them forward.

var CreateEjectFactory=function(type,text){
    //Let's first create an object and extend its properties and methods.
    var o=new Object();
    o.content=text;
    o.show=function(){
        if(type=="alert") alert(text);
        if(type=="confirm") confirm(text);
        if(type=="prompt") prompt(text);
    }
    return o;
}

Let's call it.

var TestAgainAlert=CreateEjectFactory('alert','This is also a simple factory mode creation prompt box!');
TestAgainAlert.show();

The first is to create instantiated objects, the second is to create a new object and then wrap its properties and functions. Our specific choice depends on our actual needs.

Thank you all for seeing this:) If you think my share can also be clicked on the recommendation, share with your friends so that we can progress together.~

Well, the above is the whole content of this sharing. This example refers to the book JavaScript Design Patterns. Let's accumulate a little bit and grow a little bit. I hope it will be helpful to you all.