A preliminary study on JavaScript design patterns_javascript skills

Purpose: There are many design patterns. Try to record the pros and cons of different design patterns learned so that you can refer to them later.

Foreword: When I read Elevation half a year ago, I saw the chapter on design patterns. I was confused, not because I couldn’t understand it, but because I didn’t understand why it was so troublesome just to create an object. It wasn't until I recently completed my first small project that I realized how disastrous it would be without appropriate specifications and restrictions when the amount of code increases. So I turned to elevation again and summarized the pros and cons of several simple design patterns I learned.

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

1. Factory mode

Use functions directly to encapsulate objects and use 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: Problems with object recognition. All created objects are instances of Object and are 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); 

Advantages: Using the constructor pattern can mark instances as a specific type.

Disadvantages: The methods of the created objects are all private. If you just want to generate public methods, it will cause unnecessary waste of performance.

3. Prototype mode

Utilize prototype chain inheritance

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 properties and methods contain reference type values, modifying the properties and methods of one instance will affect all other instances.

4. Prototype + constructor pattern

Private properties and methods are generated using constructors, and public properties and methods are inherited using prototypes. Combining the advantages of both methods.

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

Disadvantages: Pay attention to prototypal inheritance of reference type values.

ps: The code in the above picture rewrites the prototype object of the Person constructor and points the prototype object pointer to an object, so the constructor property points to Object instead of Person, so it must be explicitly set to Person.

5. Dynamic Prototype Mode

Essentially, it is still a constructor function. It only adds the specified method to the prototype object when it 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); 

Disadvantage: Prototype objects cannot be overridden using object literals. Because this will make the instance pointer point to the new prototype object. In other words, the sayName method added to the prototype object in the above figure will be invalid.

6. Parasitic constructor pattern

Use the new operator when calling. Other than that, I don’t see any difference from the factory mode. Looking for advice from experts.

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); //这里使用new操作符 

7. Safe Constructor Pattern

No public attributes, disable this, and only expose necessary APIs for data calls. Suitable for areas with security requirements.

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

As shown in the above code, the internal name attribute can only be accessed through the sayName method.

This article introduces seven design patterns to you, and introduces their advantages and disadvantages respectively. I hope it will be helpful to learn about js design patterns.