通過說明與示例了解js五種設(shè)計(jì)模式
第一種模式：js工廠模式
var lev=function(){
return "啊打";
};
function Parent(){
var Child = new Object();
Child.name="李小龍";
Child.age="30";
Child.lev=lev;
return Child;
};
var x = Parent();
alert(x.name);
alert(x.lev());
說明：
1.在函數(shù)中定義對象,并定義對象的各種屬性，,雖然屬性可以為方法，但是建議將屬性為方法的屬性定義到函數(shù)之外，這樣可以避免重復(fù)創(chuàng)建該方法
2.引用該對象的時(shí)候，這里使用的是 var x = Parent()而不是 var x = new Parent();因?yàn)楹笳邥?huì)可能出現(xiàn)很多問題（前者也成為工廠經(jīng)典方式,后者稱之為混合工廠方式），不推薦使用new的方式使用該對象
3.在函數(shù)的最后返回該對象
4.不推薦使用這種方式創(chuàng)建對象，但應(yīng)該了解
第二種模式：js構(gòu)造函數(shù)模式
var lev=function(){
return "啊打";
};
function Parent(){
this.name="李小龍";
this.age="30";
this.lev=lev;
};
var x =new Parent();
alert(x.name);
alert(x.lev());
說明：
1.與工廠方式相比，使用構(gòu)造函數(shù)方式創(chuàng)建對象，無需再函數(shù)內(nèi)部重建創(chuàng)建對象，而使用this指代，并而函數(shù)無需明確return
2.同工廠模式一樣，雖然屬性的值可以為方法，扔建議將該方法定義在函數(shù)之外
3..同樣的，不推薦使用這種方式創(chuàng)建對象，但仍需要了解
第三種模式：js原型模式
var lev=function(){
return "啊打";
};
function Parent(){ };
Parent.prototype.name="李小龍";
Parent.prototype.age="30";
Parent.prototype.lev=lev;
var x =new Parent();
alert(x.name);
alert(x.lev());
說明：
1.函數(shù)中不對屬性進(jìn)行定義
2.利用prototype屬性對屬性進(jìn)行定義
3.同樣的，不推薦使用這樣方式創(chuàng)建對象
第四種模式：構(gòu)造函數(shù)+原型的js混合的模式（推薦）
function Parent(){
this.name="李小龍";
this.age=32;
};
Parent.prototype.lev=function(){
return this.name;
};
var x =new Parent();
alert(x.lev());
說明：
1.該模式是指混合搭配使用構(gòu)造函數(shù)方式和原型方式
2.將所有屬性不是方法的屬性定義在函數(shù)中（構(gòu)造函數(shù)方式）
將所有屬性值為方法的屬性利用prototype在函數(shù)之外定義（原型方式）
3.推薦使用這樣方式創(chuàng)建對象,這樣做有好處和為什么不單獨(dú)使用構(gòu)造函數(shù)方式和原型方式，由于篇幅問題這里不予討論
第五種模式：構(gòu)造函數(shù)+原型的動(dòng)態(tài)原型模式（推薦）
function Parent(){
this.name="李小龍";
this.age=32;
if(typeof Parent._lev=="undefined"){
Parent.prototype.lev=function(){
return this.name;
}
Parent._lev=true;
}
};
var x =new Parent();
alert(x.lev());
說明：
1.動(dòng)態(tài)原型方式可以理解為混合構(gòu)造函數(shù)，原型方式的一個(gè)特例
2.該模式中,屬性為方法的屬性直接在函數(shù)中進(jìn)行了定義，但是因?yàn)?br />
if(typeof Parent._lev=="undefined"){
Parent._lev=true;
}
從而保證創(chuàng)建該對象的實(shí)例時(shí)，屬性的方法不會(huì)被重復(fù)創(chuàng)建
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JavaScript門面模式詳解
- javascript設(shè)計(jì)模式之裝飾者模式
- javascript設(shè)計(jì)模式之迭代器模式
- js設(shè)計(jì)模式之單例模式原理與用法詳解
- 詳解javascript設(shè)計(jì)模式三：代理模式
- JavaScript設(shè)計(jì)模式之裝飾者模式實(shí)例詳解
- JavaScript設(shè)計(jì)模式之享元模式實(shí)例詳解
- JavaScript設(shè)計(jì)模式之觀察者模式實(shí)例詳解
- JavaScript設(shè)計(jì)模式之命令模式實(shí)例分析
- JavaScript設(shè)計(jì)模式之門面模式原理與實(shí)現(xiàn)方法分析
相關(guān)文章
JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題
json串屬于javascript的一個(gè)對象，有鍵和值對應(yīng)的對象。這篇文章主要介紹了JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題的相關(guān)資料,需要的朋友可以參考下2016-11-11
JavaScript判斷瀏覽器對CSS3屬性是否支持的多種方法
其實(shí)在使用css3的一些屬性時(shí)，為了兼顧低端瀏覽器對CSS3的不友好性，往往需要知道某些瀏覽器是否支持要使用的CSS3屬性，以此來做向下適配。比如常見的CSS3動(dòng)畫就很有必要檢測瀏覽器是否支持。下面本文就分享了幾種方法，有需要的朋友們可以參考借鑒。2016-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)左右輪播圖，實(shí)現(xiàn)手動(dòng)和自動(dòng)兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
當(dāng)點(diǎn)擊元素時(shí)，會(huì)發(fā)生 click 事件。當(dāng)鼠標(biāo)指針停留在元素上方，然后按下并松開鼠標(biāo)左鍵時(shí)，就會(huì)發(fā)生一次 click。click() 方法觸發(fā) click 事件，或規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)。2015-06-06
利用Js+Css實(shí)現(xiàn)折紙動(dòng)態(tài)導(dǎo)航效果實(shí)例源碼
這篇文章主要給大家介紹了利用Js+Css實(shí)現(xiàn)折紙動(dòng)態(tài)導(dǎo)航的效果，實(shí)現(xiàn)后的效果非常不錯(cuò)，文中給出了簡單的介紹和完整的實(shí)例代碼，對大家具有一定的參考價(jià)值，有需要的朋友們下面來一起看看吧。2017-01-01
移動(dòng)端觸摸滑動(dòng)插件swiper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端觸摸滑動(dòng)插件swiper的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
TypeScript是JavaScript的超集,擴(kuò)展了JavaScript的語法,因此現(xiàn)有的JavaScript代碼可與TypeScript一起工作無需任何修改,TypeScript通過類型注解提供編譯時(shí)的靜態(tài)類型檢查,下面這篇文章主要給大家介紹了關(guān)于TypeScript安裝與使用的詳細(xì)教程,需要的朋友可以參考下2023-01-01
Javascript 詳解封裝from表單數(shù)據(jù)為json串進(jìn)行ajax提交
這篇文章主要介紹了Javascript 詳解封裝from表單數(shù)據(jù)為json串進(jìn)行ajax提交的相關(guān)資料,需要的朋友可以參考下2017-03-03
本文主要介紹了TypeScript基本數(shù)據(jù)類型的相關(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
動(dòng)態(tài)加載JavaScript文件的兩種方法
第一種利用ajax方式，第二種是動(dòng)靜創(chuàng)建一個(gè)script標(biāo)簽，配置其src屬性，經(jīng)過把script標(biāo)簽拔出到頁面head來加載js，感樂趣的網(wǎng)友可以看下2016-04-04