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

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

正文：本文一共介紹7種設(shè)計(jì)模式以及他們的應(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); 

缺點(diǎn)：對象識別的問題，所有創(chuàng)建出的對象都是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)建的對象的方法都是私有的，如果只是想產(chǎn)生公用的方法，會造成不必要的性能浪費(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í)例的屬性、方法會影響所有其他實(shí)例。

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

私有屬性、方法用構(gòu)造函數(shù)產(chǎn)生，公有屬性、方法用原型來繼承。融合兩種方法的優(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ù)的原型對象，將原型對象指針指向了一個對象，所以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); 

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

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

 調(diào)用時使用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ù)模式

沒有公共屬性，禁用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è)計(jì)模式，分別介紹了他們的優(yōu)缺點(diǎn)，希望對學(xué)習(xí)js設(shè)計(jì)模式相關(guān)知識有所幫助。

最新評論