麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 語言 > JavaScript > 正文

學(xué)習(xí)JavaScript設(shè)計(jì)模式(封裝)

2024-05-06 16:25:21
字體:
供稿:網(wǎng)友
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹封裝,舉例說明封裝的思想,對(duì)封裝進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下
 

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

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

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

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("學(xué)號(hào)必須為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>

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

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

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

2、嚴(yán)格實(shí)現(xiàn)封裝

<script type="text/javascript">  /**   * 使用這種方式雖然可以嚴(yán)格實(shí)現(xiàn)封裝,但是帶來的問題是get和set方法都不能存儲(chǔ)在prototype中,都是存儲(chǔ)在對(duì)象中的   * 這樣無形中就增加了開銷   */  var Person = function (no, name, age)  {   var _no , _name, _age ;   var checkNo = function (no)   {    if (!no.constructor == "string" || no.length != 4)     throw new Error("學(xué)號(hào)必須為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)建對(duì)象的模式有什么不同呢,在上面的例子中,我們?cè)趧?chuàng)建和引用對(duì)象的屬性時(shí)總要使用this關(guān)鍵字。而在本例中,我們用var聲明這些變量。這意味著它們只存在于Person構(gòu)造器中。checkno函數(shù)也是用同樣的方式聲明的,因此成了一個(gè)私用方法。

需要訪問這些變量和函數(shù)的方法只需要聲明在Person中即可。這些方法被稱為特權(quán)方法,因?yàn)樗鼈兪枪梅椒ǎ珔s能夠訪問私用屬性和方法。為了在對(duì)象外部能訪問這些特權(quán)函數(shù),它們的前面被加上了關(guān)鍵字this。因?yàn)檫@些方法定義于Person構(gòu)造器的作用域,所以它們能訪問到私用屬性。引用這些屬性時(shí)并沒有使用this關(guān)鍵字,因?yàn)樗鼈儾皇枪_的。所有取值器和賦值器方法都被改為不加this地直接引用這些屬性。

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

看上面的代碼,去掉了this.屬性名,嚴(yán)格的實(shí)現(xiàn)了封裝,只能通過getter,setter訪問成員變量了,但是存在一個(gè)問題,所有的方法都存在對(duì)象中,增加了內(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("學(xué)號(hào)必須為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引擎加載完后,會(huì)直接執(zhí)行Person = 立即執(zhí)行函數(shù),然后此函數(shù)返回了一個(gè)子函數(shù),這個(gè)子函數(shù)才是new Person所調(diào)用的構(gòu)造函數(shù),又因?yàn)樽雍瘮?shù)中保持了對(duì)立即執(zhí)行函數(shù)中checkNo(no) ,times的引用,(很明顯的閉包)所以對(duì)于checkNo和times,是所有Person對(duì)象所共有的,創(chuàng)建3個(gè)對(duì)象后,times分別為0,1,2 。這種方式的好處是,可以使Person中需要復(fù)用的方法和屬性做到私有且對(duì)象間共享。

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

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

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



注:相關(guān)教程知識(shí)閱讀請(qǐng)移步到JavaScript/Ajax教程頻道。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表

圖片精選

主站蜘蛛池模板: 国产精品1区,2区,3区 | 欧美在线观看视频网站 | 一区二区久久精品66国产精品 | 久久网站热最新地址4 | 九九热精品视频在线 | 毛片大全在线观看 | 亚欧美一区二区 | 日韩av片网站 | 中文字幕综合在线观看 | 91麻豆精品国产91久久久无需广告 | 日韩黄色片网站 | 91久久另类重口变态 | 中文字幕激情视频 | 欧美特黄一级高清免费的香蕉 | 韩国精品视频在线观看 | 中文字幕在线看第二 | 美女网站黄在线观看 | 激情视频免费看 | 国产在线观看91一区二区三区 | 久久99精品久久久久久236 | 噜噜噜躁狠狠躁狠狠精品视频 | 欧洲精品久久久久69精品 | 国产成人高潮免费观看精品 | 91短视频在线免费观看 | 国产精品久久久久久久久粉嫩 | av中文字幕免费在线观看 | 视频一区二区中文字幕 | 国产精品成人一区二区三区电影毛片 | 国产精品久久久久久久久久10秀 | 成人午夜免费av | 欧美日韩一区二区综合 | 4p一女两男做爰在线观看 | 精品一区二区6 | 欧美中文字幕一区二区三区亚洲 | 成人羞羞在线观看网站 | 少妇的肉体2无删减版 | 精品久久久久久久久久 | 日本精品视频一区二区三区四区 | 国产人成免费爽爽爽视频 | 日本在线一区二区 | 色综合久久99 |