• js五种设计模式


    1、js工厂模式

      

     1 var lev=function(){
     2        return  "嘿哈"; 
     3 };
     4 function Parent(){
     5     var Child = new object();
     6     Child.name = "李小龙";
     7     Child.age = "30";
     8     Child.lev = lev;
     9     return Child;
    10         
    11 };
    12 var x=Parent();
    13  alert(x.name);
    14  alert(x.lev());

    说明:

    1. 在函数中定义对象,并定义对象的各种属性,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法。
    2. 引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new object(); 因为后者可能会出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象。
    3. 在函数的最后返回该对象。
    4. 不推荐使用这种方式创建对象,但应该了解。  

    2、js构造函数模式

     1 var lev=function(){
     2        return  "嘿哈"; 
     3 };
     4 function Parent(){
     5     this.name = "李小龙";
     6     this.age = "30";
     7     this.lev = lev;     
     8 };
     9 var x=Parent();
    10  alert(x.name);
    11  alert(x.lev());

    说明:

    1. 与工厂方式相比,使用构造函数方式创建对象无需在函数内部创建对象,而使用this指代,并而函数无需明确return。
    2. 同工厂模式一样,虽然属性的值可以为方法,仍建议将该方法定义在函数之外。
    3. 同样的,不推荐使用这种方式创建对象,但仍需了解。

    3、js原型模式

     1 var lev=function(){
     2        return  "嘿哈"; 
     3 };
     4 function Parent(){
     5     Parent.prototype.name = "李小龙";
     6     Parent.prototype.age = "30";
     7     Parent.prototype.lev = lev;     
     8 };
     9 var x=Parent();
    10  alert(x.name);
    11  alert(x.lev());

    说明:

    1. 函数中不对属性进行定义。
    2. 利用prototype属性对属性进行定义。
    3. 同样的额,不推荐使用这样的方式创建对象。

    4、构造函数+原型的js混合模式(推荐)

     1 function Parent(){
     2     this.name = "李小龙";
     3     this.age = "30";     
     4 };
     5 Parent.prototype.lev=function(){
     6 return this.name;
     7 }
     8 var x=Parent();
     9  alert(x.name);
    10  alert(x.lev());

    说明:

    1. 该模式是指混合搭配使用构造函数和原型方式。
    2. 将所有的属性,不是方法的定义在函数中(构造函数的方式),将所有属性值为方法的利用prototype在函数之外定义(原型方式)。
    3. 推荐使用这样的方式创建对象,这样有好处。

    5、构造函数+原型的动态原型模式(推荐)

     1 function Parent(){
     2     this.name = "李小龙";
     3     this.age = "30"; 
     4     if(typeof Parent.lev == "undefined"){
     5         Parent.prototype.lev = function(){
     6             return this.name;
     7         }
     8         Parent.lev = true;
     9     }    
    10 };
    11 
    12 var x=Parent();
    13  alert(x.lev());

    说明:

    1. 动态原型方式可以理解为混合构造函数,原型方式的一个特例。
    2. 该模式中,属性为方法的属性直接在函数中进行了定义,但是因为
      if(typeof Parent.lev == "undefined"){
                Parent.prototype.lev = function(){
                    return this.name;
                }
                Parent.lev = true;
           }   从而保证创建该对象的实例时,属性的方法不会被重复的创建。 
  • 相关阅读:
    8月18号心得
    题解
    考试题
    1055心得
    1055解
    1055题
    心得
    考试三道题
    2017.8.1 居然是倒数第二天了……
    1055
  • 原文地址:https://www.cnblogs.com/liuhongli/p/6411479.html
Copyright © 2020-2023  润新知