JS Five design modes

Source: Internet
Author: User

1. JS Factory mode

  

1 varlev=function(){2        return"Hey, ha."; 3 };4 functionParent () {5     varChild =Newobject ();6Child.name = "Bruce Lee";7Child.age = "30";8Child.lev =Lev;9     returnChild ;Ten          One }; A varx=Parent (); - alert (x.name); -Alert (X.lev ());

Description

    1. Defining an object in a function and defining various properties of the object, although the property can be a method, is recommended to define a property as a method's property outside of the function, which avoids the need to create the method repeatedly.
    2. When referencing this object, it uses var x = Parent () instead of var x = new Object (); Because the latter may have many problems (the former also becomes a factory classic, the latter is called a hybrid factory approach), it is not recommended to use this object in the new way.
    3. The object is returned at the end of the function.
    4. It is not recommended to create objects this way, but you should understand.
2. JS constructor mode
1 varlev=function(){2        return"Hey, ha."; 3 };4 functionParent () {5      This. Name = "Bruce Lee";6      This. Age = "30";7      This. Lev =Lev; 8 };9 varx=Parent ();Ten alert (x.name); OneAlert (X.lev ());

Description

    1. Using the constructor to create an object is not necessary to create an object inside a function, rather than a factory approach, using this reference, and the function does not need to explicitly return.
    2. As with Factory mode, although the value of a property can be a method, it is still recommended that the method be defined outside the function.
    3. Similarly, it is not recommended to create objects this way, but you still need to know.
3. JS prototype mode
1 varlev=function(){2        return"Hey, ha."; 3 };4 functionParent () {5Parent.prototype.name = "Bruce Lee";6Parent.prototype.age = "30";7Parent.prototype.lev =Lev; 8 };9 varx=Parent ();Ten alert (x.name); OneAlert (X.lev ());

Description

    1. The attribute is not defined in the function.
    2. Attributes are defined using the prototype property.
    3. The same amount, it is not recommended to create objects in this way.
4. Construction function + Prototype JS mixed mode (recommended)
1 functionParent () {2      This. Name = "Bruce Lee";3      This. Age = "30"; 4 };5parent.prototype.lev=function(){6 return  This. Name;7 }8 varx=Parent ();9 alert (x.name);TenAlert (X.lev ());

Description

    1. This pattern refers to the mix and match use of constructors and prototypes.
    2. All of the attributes, not the method definition in the function (the way the constructor is), define all the property values as methods of using prototype outside of the function (prototype mode).
    3. It is recommended that you create objects in such a way that it is beneficial.
5. Dynamic prototype mode of constructor + prototype (recommended)
1 functionParent () {2      This. Name = "Bruce Lee";3      This. Age = "30"; 4     if(typeofParent.lev = = "undefined"){5Parent.prototype.lev =function(){6             return  This. Name;7         }8Parent.lev =true;9     }    Ten }; One  A varx=Parent (); -Alert (X.lev ());

Description

    1. The dynamic prototyping approach can be understood as a hybrid constructor, a special case of the prototype approach.
    2. In this mode, properties are defined directly in the function for the properties of the method, but because
      if (typeof Parent.lev = = "undefined") {          Parent.prototype.lev = function() {return this              . Name;          }          Parent.lev = True } thus guaranteeing that an instance of the object is created, the method of the property is not created repeatedly. 

JS Five design modes

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.