快捷導航

學習JavaScript設(shè)計模式(封裝)

更新時間：2015年11月26日 14:26:07 作者：小平果118

這篇文章主要帶領(lǐng)大家學習JavaScript設(shè)計模式，其中重點介紹封裝，舉例說明封裝的思想，對封裝進行詳細剖析，感興趣的小伙伴們可以參考一下

在JavaScript 中，并沒有對抽象類和接口的支持。JavaScript 本身也是一門弱類型語言。在封裝類型方面，JavaScript 沒有能力，也沒有必要做得更多。對于JavaScript 的設(shè)計模式實現(xiàn)來說，不區(qū)分類型是一種失色，也可以說是一種解脫。

從設(shè)計模式的角度出發(fā)，封裝在更重要的層面體現(xiàn)為封裝變化。

通過封裝變化的方式，把系統(tǒng)中穩(wěn)定不變的部分和容易變化的部分隔離開來，在系統(tǒng)的演變過程中，我們只需要替換那些容易變化的部分，如果這些部分是已經(jīng)封裝好的，替換起來也相對容易。這可以最大程度地保證程序的穩(wěn)定性和可擴展性。

javascript封裝的的基本模式有3種：

1、使用約定優(yōu)先的原則，將所有的私有變量以_開頭

 <script type="text/javascript">
  /**
   * 使用約定優(yōu)先的原則，把所有的私有變量都使用_開頭
   */
  var Person = function (no, name, age)
  {
   this.setNo(no);
   this.setName(name);
   this.setAge(age);
  }
  Person.prototype = {
   constructor: Person,
   checkNo: function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("學號必須為4位");
   },
   setNo: function (no)
   {
    this.checkNo(no);
    this._no = no;
   }, 
   getNo: function ()
   {
    return this._no;
   setName: function (name)
   {
    this._name = name;
   }, 
   getName: function ()
   {
    return this._name;
   }, 
   setAge: function (age)
   {
    this._age = age;
   }, 
   getAge: function ()
   {
    return this._age;
   }, 
   toString: function ()
   {
    return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
   }
  };
  var p1 = new Person("0001", "小平果", "22");
  console.log(p1.toString());  //no = 0001 , name = 小平果 , age = 22
  p1.setNo("0003");
  console.log(p1.toString());  //no = 0003 , name = 小平果 , age = 22
  p1.no = "0004";
  p1._no = "0004";
  console.log(p1.toString()); //no = 0004 , name =小平果 , age = 22

 </script>

看完代碼，是不是有種被坑的感覺，僅僅把所有的變量以_開頭，其實還是可以直接訪問的，這能叫封裝么，當然了，說了是約定優(yōu)先嘛。

下劃線的這種用法這一個眾所周知的命名規(guī)范，它表明一個屬性僅供對象內(nèi)部使用，直接訪問它或設(shè)置它可能會導致意想不到的后果。這有助于防止程序員對它的無意使用，卻不能防止對它的有意使用。

這種方式還是不錯的，最起碼成員變量的getter，setter方法都是prototype中，并非存在對象中，總體來說還是個不錯的選擇。如果你覺得，這不行，必須嚴格實現(xiàn)封裝，那么看第二種方式。

2、嚴格實現(xiàn)封裝

<script type="text/javascript">
  /**
   * 使用這種方式雖然可以嚴格實現(xiàn)封裝，但是帶來的問題是get和set方法都不能存儲在prototype中，都是存儲在對象中的
   * 這樣無形中就增加了開銷
   */
  var Person = function (no, name, age)
  {
   var _no , _name, _age ;
   var checkNo = function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("學號必須為4位");
   };
   this.setNo = function (no)
   {
    checkNo(no);
    _no = no;
   };
   this.getNo = function ()
   {
    return _no;
   }
   this.setName = function (name)
   {
    _name = name;
   }

   this.getName = function ()
   {
    return _name;
   }

   this.setAge = function (age)
   {
    _age = age;
   }
   this.
     getAge = function ()
   {
    return _age;
   }

   this.setNo(no);
   this.setName(name);
   this.setAge(age);
  }
  Person.prototype = {
   constructor: Person,
   toString: function ()
   {
    return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();
   }
  }
  ;
  var p1 = new Person("0001", "小平果", "22");
  console.log(p1.toString());  //no = 0001 , name =小平果 , age = 22
  p1.setNo("0003");
  console.log(p1.toString());  //no = 0003 , name = 小平果 , age = 22
  p1.no = "0004";
  console.log(p1.toString()); //no = 0003 , name = 小平果 , age = 22

 </script>

那么這與我們先前講過的其他創(chuàng)建對象的模式有什么不同呢，在上面的例子中，我們在創(chuàng)建和引用對象的屬性時總要使用this關(guān)鍵字。而在本例中，我們用var聲明這些變量。這意味著它們只存在于Person構(gòu)造器中。checkno函數(shù)也是用同樣的方式聲明的，因此成了一個私用方法。

需要訪問這些變量和函數(shù)的方法只需要聲明在Person中即可。這些方法被稱為特權(quán)方法，因為它們是公用方法，但卻能夠訪問私用屬性和方法。為了在對象外部能訪問這些特權(quán)函數(shù)，它們的前面被加上了關(guān)鍵字this。因為這些方法定義于Person構(gòu)造器的作用域，所以它們能訪問到私用屬性。引用這些屬性時并沒有使用this關(guān)鍵字，因為它們不是公開的。所有取值器和賦值器方法都被改為不加this地直接引用這些屬性。

任何不需要直接訪問的私用屬性的方法都可以像原來那樣在Person.prototype中聲明。像toString()方法。只有那些需要直接訪問私用成員的方法才應(yīng)該被設(shè)計為特權(quán)方法。但特權(quán)方法太多又會占用過多的內(nèi)存，因為每個對象實例都包含所有特權(quán)方法的新副本。

看上面的代碼，去掉了this.屬性名，嚴格的實現(xiàn)了封裝，只能通過getter，setter訪問成員變量了，但是存在一個問題，所有的方法都存在對象中，增加了內(nèi)存的開銷。

3、以閉包的方式封裝

<script type="text/javascript">

  var Person = (function ()
  {
   //靜態(tài)方法（共享方法）
   var checkNo = function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("學號必須為4位");
   };
   //靜態(tài)變量（共享變量）
   var times = 0;

    //return the constructor.
   return function (no, name, age)
   {
    console.log(times++); // 0 ,1 , 2
    var no , name , age; //私有變量
    this.setNo = function (no) //私有方法
    {
     checkNo(no);
     this._no = no;
    };
    this.getNo = function ()
    {
     return this._no;
    }
    this.setName = function (name)
    {
     this._name = name;
    }

    this.getName = function ()
    {
     return this._name;
    }

    this.setAge = function (age)
    {
     this._age = age;
    }
    this.getAge = function ()
    {
     return this._age;
    }

    this.setNo(no);
    this.setName(name);
    this.setAge(age);
   }
  })();

  Person.prototype = {
   constructor: Person,
   toString: function ()
   {
    return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
   }
  };

  var p1 = new Person("0001", "小平果", "22");
  var p2 = new Person("0002", "abc", "23");
  var p3 = new Person("0003", "aobama", "24");


  console.log(p1.toString());  //no = 0001 , name = 小平果 , age = 22
  console.log(p2.toString());  //no = 0002 , name = abc , age = 23
  console.log(p3.toString()); //no = 0003 , name = aobama , age = 24

 </script>

上述代碼，js引擎加載完后，會直接執(zhí)行Person = 立即執(zhí)行函數(shù)，然后此函數(shù)返回了一個子函數(shù)，這個子函數(shù)才是new Person所調(diào)用的構(gòu)造函數(shù)，又因為子函數(shù)中保持了對立即執(zhí)行函數(shù)中checkNo(no) ，times的引用，（很明顯的閉包）所以對于checkNo和times，是所有Person對象所共有的，創(chuàng)建3個對象后，times分別為0，1，2 。這種方式的好處是，可以使Person中需要復用的方法和屬性做到私有且對象間共享。

這里的私用成員和特權(quán)成員仍然被聲明在構(gòu)造器。但那個構(gòu)造器卻從原來的普通函數(shù)變成了一個內(nèi)嵌函數(shù)，并且被作為包含它的函數(shù)的返回值給變量Person。這就創(chuàng)建了一個閉包，你可以把靜態(tài)的私用成員聲明在里面。位于外層函數(shù)聲明之后的一對空括號很重要，其作用是代碼一載入就立即執(zhí)行這個函數(shù)。這個函數(shù)的返回值是另一個函數(shù)，它被賦給Person變量，Person因此成了一個構(gòu)造函數(shù)。在實例華Person時，所調(diào)用的這個內(nèi)層函數(shù)。外層那個函數(shù)只是用于創(chuàng)建一個可以用來存儲靜態(tài)成員的閉包。

在本例中，checkno被設(shè)計成為靜態(tài)方法，原因是為Person的每個實例都生成這個方法的一個新副本毫無道理。此外還有一個靜態(tài)屬性times，其作用在于跟蹤Person構(gòu)造器的總調(diào)用次數(shù)。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，大家可以更深入的學習了解封裝的意義。

您可能感興趣的文章: