JavaScript設(shè)計模式初探
目的:設(shè)計模式眾多,嘗試記錄下學(xué)到的不同設(shè)計模式的優(yōu)劣,方便以后查閱。
前言:半年前看高程的時候看到設(shè)計模式這章,云里霧里,不是看不明白,而是不明白為啥要如此麻煩只為創(chuàng)建一個對象。直到最近完成了自己第一個小項目,才體會到當(dāng)代碼量多起來時沒有適當(dāng)?shù)囊?guī)范與限制是多么大的災(zāi)難。于是重新翻開高程,總結(jié)下幾種我學(xué)到的簡單設(shè)計模式的優(yōu)劣。
正文:本文一共介紹7種設(shè)計模式以及他們的應(yīng)用場景、優(yōu)劣。
1.工廠模式
直接用函數(shù)來封裝對象,將對象作為返回值。
function person (name,age) {
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayName=function () {
alert(this.name);
};
return obj;
}
var me=person("Su",25);
缺點:對象識別的問題,所有創(chuàng)建出的對象都是Object的實例,不好區(qū)分。
2.構(gòu)造函數(shù)模式
function Person (name,age) {
this.name=name;
this.age=age;
this.sayName=function () {
alert(this.name);
};
}
var me=new Person("Su",25);
優(yōu)點:運用構(gòu)造函數(shù)模式可以將實例標(biāo)示為一種特定的類型。
缺點:創(chuàng)建的對象的方法都是私有的,如果只是想產(chǎn)生公用的方法,會造成不必要的性能浪費。
3.原型模式
利用原型鏈繼承
function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person();
缺點:所有屬性和方法被實例共享。當(dāng)屬性、方法中包含引用類型的值時,修改一個實例的屬性、方法會影響所有其他實例。
4.原型+構(gòu)造函數(shù)模式
私有屬性、方法用構(gòu)造函數(shù)產(chǎn)生,公有屬性、方法用原型來繼承。融合兩種方法的優(yōu)點。
function Person (name,age) {
this.name=name;
this.age=age;
}
Person.prototype={
constructor:Person,
sayName:function () {
alert(this.name);
}
}
var me=new Person("Su",25);
缺點:注意引用類型值的原型繼承。
ps:上圖代碼重寫了Person構(gòu)造函數(shù)的原型對象,將原型對象指針指向了一個對象,所以constructor屬性此時指向Object而不是Person,所以要顯式的將其設(shè)置成Person。
5.動態(tài)原型模式
本質(zhì)上還是構(gòu)造函數(shù),只在指定方法不存在時在原型對象中添加他。
function Person (name,age) {
this.name=name;
this.age=age;
if (typeof this.sayName!="function") {
Person.prototype.sayName=function () {
alert(this.name);
}
}
}
var me =new Person("Su",25);
缺點:不能使用對象字面量重寫原型對象。因為這會使實例的指針指向新的原型對象。也就是說上圖中原型對象中添加的sayName方法會失效。
6.寄生構(gòu)造函數(shù)模式
調(diào)用時使用new操作符,除此以外我看不出和工廠模式有什么區(qū)別。望高人指點。
function person (name,age) {
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayName=function () {
alert(this.name);
};
return obj;
}
var me=new person("Su",25); //這里使用new操作符
7.穩(wěn)妥構(gòu)造函數(shù)模式
沒有公共屬性,禁用this,僅暴露必須的API用于數(shù)據(jù)調(diào)用。適用于對安全有需求的領(lǐng)域。
function Person (name) {
var o=new Object();
o.sayName=function () {
alert(name);
}
return o;
}
var me=Person("Su");
如上代碼,只能通過sayName方法才能訪問到內(nèi)部的name屬性。
本文給大家介紹了七種設(shè)計模式,分別介紹了他們的優(yōu)缺點,希望對學(xué)習(xí)js設(shè)計模式相關(guān)知識有所幫助。
- 大型JavaScript應(yīng)用程序架構(gòu)設(shè)計模式
- JavaScript設(shè)計模式經(jīng)典之命令模式
- 常用的Javascript設(shè)計模式小結(jié)
- 學(xué)習(xí)JavaScript設(shè)計模式(單例模式)
- 學(xué)習(xí)JavaScript設(shè)計模式(鏈?zhǔn)秸{(diào)用)
- JavaScript設(shè)計模式之工廠方法模式介紹
- JavaScript設(shè)計模式之原型模式(Object.create與prototype)介紹
- JavaScript設(shè)計模式之觀察者模式(發(fā)布者-訂閱者模式)
- javascript設(shè)計模式之解釋器模式詳解
- 常用的javascript設(shè)計模式
相關(guān)文章
Javascript 判斷兩個IP是否在同一網(wǎng)段實例代碼
javascript功能的強大之處是我們大家有目共睹的,幾天小編向大家介紹Javascript 判斷兩個IP是否在同一網(wǎng)段,感興趣的朋友可以參考一下2016-11-11
TypeScript轉(zhuǎn)javaScript的方法示例
本文主要介紹了TypeScript轉(zhuǎn)javaScript的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06

