目的：設(shè)計(jì)模式眾多，嘗試記錄下學(xué)到的不同設(shè)計(jì)模式的優(yōu)劣，方便以后查閱。

前言：半年前看高程的時(shí)候看到設(shè)計(jì)模式這章，云里霧里，不是看不明白，而是不明白為啥要如此麻煩只為創(chuàng)建一個(gè)對(duì)象。直到最近完成了自己第一個(gè)小項(xiàng)目，才體會(huì)到當(dāng)代碼量多起來(lái)時(shí)沒(méi)有適當(dāng)?shù)囊?guī)范與限制是多么大的災(zāi)難。于是重新翻開(kāi)高程，總結(jié)下幾種我學(xué)到的簡(jiǎn)單設(shè)計(jì)模式的優(yōu)劣。

正文：本文一共介紹7種設(shè)計(jì)模式以及他們的應(yīng)用場(chǎng)景、優(yōu)劣。

1.工廠模式

直接用函數(shù)來(lái)封裝對(duì)象，將對(duì)象作為返回值。

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); 

缺點(diǎn)：對(duì)象識(shí)別的問(wèn)題，所有創(chuàng)建出的對(duì)象都是Object的實(shí)例，不好區(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)點(diǎn)：運(yùn)用構(gòu)造函數(shù)模式可以將實(shí)例標(biāo)示為一種特定的類型。

缺點(diǎn)：創(chuàng)建的對(duì)象的方法都是私有的，如果只是想產(chǎn)生公用的方法，會(huì)造成不必要的性能浪費(fèi)。

3.原型模式

利用原型鏈繼承

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

缺點(diǎn)：所有屬性和方法被實(shí)例共享。當(dāng)屬性、方法中包含引用類型的值時(shí)，修改一個(gè)實(shí)例的屬性、方法會(huì)影響所有其他實(shí)例。

4.原型+構(gòu)造函數(shù)模式

私有屬性、方法用構(gòu)造函數(shù)產(chǎn)生，公有屬性、方法用原型來(lái)繼承。融合兩種方法的優(yōu)點(diǎn)。

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); 

缺點(diǎn)：注意引用類型值的原型繼承。

ps：上圖代碼重寫了Person構(gòu)造函數(shù)的原型對(duì)象，將原型對(duì)象指針指向了一個(gè)對(duì)象，所以constructor屬性此時(shí)指向Object而不是Person，所以要顯式的將其設(shè)置成Person。

5.動(dòng)態(tài)原型模式

本質(zhì)上還是構(gòu)造函數(shù)，只在指定方法不存在時(shí)在原型對(duì)象中添加他。

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); 

缺點(diǎn)：不能使用對(duì)象字面量重寫原型對(duì)象。因?yàn)檫@會(huì)使實(shí)例的指針指向新的原型對(duì)象。也就是說(shuō)上圖中原型對(duì)象中添加的sayName方法會(huì)失效。

6.寄生構(gòu)造函數(shù)模式

 調(diào)用時(shí)使用new操作符，除此以外我看不出和工廠模式有什么區(qū)別。望高人指點(diǎn)。

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ù)模式

沒(méi)有公共屬性，禁用this，僅暴露必須的API用于數(shù)據(jù)調(diào)用。適用于對(duì)安全有需求的領(lǐng)域。

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

如上代碼，只能通過(guò)sayName方法才能訪問(wèn)到內(nèi)部的name屬性。

本文給大家介紹了七種設(shè)計(jì)模式，分別介紹了他們的優(yōu)缺點(diǎn)，希望對(duì)學(xué)習(xí)js設(shè)計(jì)模式相關(guān)知識(shí)有所幫助。

最新評(píng)論