Preliminary Exploration of the JavaScript design pattern, and the javascript Design Pattern

Preliminary Exploration of the JavaScript design pattern, and the javascript Design Pattern

Purpose:There are many design patterns, so you can record the advantages and disadvantages of the different design patterns you have learned for future reference.

Preface:When I looked at the elevation six months ago, I saw the design pattern chapter. In the fog of the cloud, I did not understand it, but why it was so troublesome to create an object. It wasn't until I completed my first small project recently that I realized what a disaster it was when there were too many code volumes without proper specifications and restrictions. So I re-opened the elevation and summarized the advantages and disadvantages of several simple design patterns I learned.

Body:This article describes seven design patterns, their application scenarios, and advantages and disadvantages.

1. Factory Model

Directly use functions 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); 

Disadvantage: the problem of Object recognition is that all created objects are Object instances, which are difficult to distinguish.

2. constructor Mode

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

Advantage: the constructor mode can be used to mark an instance as a specific type.

Disadvantage: the methods of the created object are private. If you only want to generate a public method, it will cause unnecessary Performance Waste.

3. prototype mode

Use prototype chain inheritance

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

Disadvantage: All attributes and methods are shared by instances. When a property or method contains a value of the reference type, modifying the attribute or method of an instance affects all other instances.

4. Prototype + constructor Mode

Private attributes and methods are generated by constructors, and public attributes and methods are inherited by prototypes. Combine the advantages of the two 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); 

Disadvantage: Pay attention to prototype inheritance of reference type values.

Ps: the code overwrites the prototype Object of the Person constructor and points the prototype Object pointer to an Object. Therefore, the constructor attribute points to the Object instead of the Person Object at this time, therefore, you must explicitly set it to Person.

5. Dynamic Prototype

In essence, it is still a constructor. It is added to the prototype object only when 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); 

Disadvantage: you cannot use the object literal to override the prototype object. This causes the instance pointer to point to the new prototype object. That is to say, the sayName method added to the original object will become invalid.

6. Parasitic constructor Mode

When calling the new operator, I cannot see any difference with the factory model. Hope you can give advice.

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); // use the new operator here

7. Safe Construction of the function mode

If this is disabled, only necessary APIs are exposed for data calling. Applicable to fields requiring security.

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

The above code can only access the internal name attribute through the sayName method.

This article introduces seven design patterns, their advantages and disadvantages, and hopes to help you learn about js design patterns.

Articles you may be interested in:

• Suggestions on javascript design mode recommendation
• Analysis of combined JavaScript Design Patterns
• Javascript design pattern-basic for Object-Oriented Learning
• How to Learn the factory model of javascript Pattern Design
• JavaScript design mode Security Sandbox Mode
• JavaScript Object-Oriented Programming three prototype mode (I)
• Javascript learning notes (9) js Object Design Mode
• Interface introduction of javascript Design Mode
• Explanation of the interpreter mode in the javascript Design Mode
• JavaScript design pattern-Observer pattern (publisher-subscriber pattern)