Preliminary Study on JavaScript design Pattern

Objective: There are many design patterns, try to record the advantages and disadvantages of different design patterns learned, so as to facilitate future reference.

Preface: Half a year ago, When I looked at the elevation, I saw the chapter of design patterns. It was not because I couldn't understand it, but because I didn't understand why I had to go to so much trouble to create an object. Until recently, when I finished my first small project, I realized how disastrous it is to have too much code without proper specifications and limitations. So I turned over the elevation again and summarized the advantages and disadvantages of several simple design patterns I learned.

Text: This article 1 introduces 7 design patterns and their application scenarios, pros and cons.

1. Factory mode

Use functions directly to wrap objects as return values.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25); 

Disadvantages: Object recognition problems, all created objects are instances of Object, difficult to distinguish.

2. Constructor pattern

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25); 

Advantage: Using the constructor pattern, you can mark an instance as a specific type.

Cons: The methods of the objects you create are private, and simply trying to produce common methods can cause unnecessary performance waste.

3. Prototype mode

Inheritance using the prototype chain

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

Disadvantages: All properties and methods are Shared by instances. When a property or method contains a value of a reference type, modifying the property or method of one instance affects all other instances.

4. Prototype + constructor pattern

Private properties and methods are generated by constructors, while public properties and methods are inherited by stereotypes. Combine the advantages of both approaches.

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25); 

Cons: Note the stereotype inheritance of reference type values.

ps: The above code overrides the prototype object of the Person constructor, pointing the prototype object to one object, so the constructor attribute points to Object instead of Person, so explicitly set it to Person.

5. Dynamic prototype mode

Essentially, a constructor is added to the prototype object only if the specified method does not exist.

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25); 

Disadvantages: Prototype objects cannot be overridden with object literals. This will cause the instance pointer to the new prototype object. This means that the sayName method added to the prototype object in the figure above will fail.

6. Parasitic constructor patterns

The new operator is used when the call is made, and other than that I don't see any difference from factory mode. Look to others for guidance.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); // Used here new The operator  

7. Secure constructor patterns

There are no public properties, this is disabled, and only the necessary API is exposed for data calls. Suitable for areas where there is a need for security.

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

In the code above, the internal name attribute can only be accessed through the sayName method.

This paper introduces 7 design patterns and their advantages and disadvantages respectively. It is hoped that it will be helpful for you to learn js design patterns.