A preliminary study of JavaScript design patterns _javascript Skills

Source: Internet
Author: User

Objective: Many design patterns, try to record the different design patterns of the pros and cons, convenient to consult later.

Preface: six months ago to see the elevation of the design pattern this chapter, fog, not to see not understand, but do not understand why it is so troublesome only to create an object. It was only recently that the first small project was completed, and it was realized how disastrous it was that there was no proper specification and limitation when the number of modern yards was up. So I turned over the elevation, summed up the next few I learned the advantages and disadvantages of the simple design pattern.

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

1. Factory mode

Encapsulates the object directly with a function, using the object as the return value.

function Person (name,age) {
  var obj=new Object ();
  Obj.name=name;
  Obj.age=age;
  Obj.sayname=function () {
    alert (this.name);
  };
  return obj;
}

Disadvantage: Object recognition problem, all created objects are instances of object, bad distinction.

2. Constructor pattern

function Person (name,age) {
  this.name=name;
  This.age=age;
  This.sayname=function () {
    alert (this.name);
  };
}

Advantages: The use of a constructor pattern can mark an instance as a specific type.

Disadvantage: The methods of creating objects are private, and if you just want to generate common methods, it can cause unnecessary performance waste.

3. Prototype mode

Using the prototype chain to inherit

function person () {}
person.prototype.name= "Su";
Person.prototype.sayname=function () {
alert (this.name);}

Disadvantage: All properties and methods are shared by the instance. When a property, method contains a value of a reference type, modifying an instance's properties, methods affect all other instances.

4. prototype + Structural function pattern

Private properties, methods are generated with constructors, public properties, methods are inherited by prototypes. The advantages of merging the two methods.

function Person (name,age) {
  this.name=name;
  this.age=age;
}
person.prototype={
  Constructor:person,
  sayname:function () {
      alert (this.name);
  }
}

Disadvantage: Note the stereotype inheritance of reference type values.

PS: The code above 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 explicitly set it to person.

5. Dynamic Prototyping Mode

is essentially a constructor, adding a 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);
    }
  }
}

Disadvantage: You cannot override a prototype object with object literals. Because this causes the pointer of the instance to point to the new prototype object. That is to say, the Sayname method added to the prototype object in the above diagram will fail.

6. Parasitic structural function pattern

Use the new operator when calling, and I don't see any difference from the factory pattern. Look at the expert advice.

function Person (name,age) {
  var obj=new Object ();
  Obj.name=name;
  Obj.age=age;
  Obj.sayname=function () {
    alert (this.name);
  };
  return obj;
}

7. Safe constructor Mode

No public properties, disable this, exposing only the necessary APIs for data invocation. Applicable to areas where there is a need for security.

function person (name) {
 var o=new Object ();
 O.sayname=function () {
 alert (name);  
 }  
 return o;
}

As above code, you can access the internal Name property only through the Sayname method.

This article has introduced seven kinds of design patterns, respectively introduced their advantages and disadvantages, I hope to learn about JS design Patterns related knowledge to help.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.