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.