JavaScript設計模式初探_javascript技巧

目的：設計模式眾多，嘗試記錄下學到的不同設計模式的優劣，方便以後查閱。

前言：半年前看高程的時候看到設計模式這章，雲裡霧裡，不是看不明白，而是不明白為啥要如此麻煩只為創建一個對象。直到最近完成了自己第一個小項目，才體會到當程式碼量多起來時沒有適當的規範與限制是多麼大的災難。於是重新翻開高程，總結下幾種我學到的簡單設計模式的優劣。

正文：本文一共介紹7種設計模式以及他們的應用場景、優劣。

1.工廠模式

直接用函數來封裝對象，並將物件作為回傳值。

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

缺點：物件辨識的問題，所有建立的物件都是Object的實例，不好區分。

2.建構子模式

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

優點：運用建構函式模式可以將實例標示為一種特定的型別。

缺點：建立的物件的方法都是私有的，如果只是想產生公用的方法，會造成不必要的效能浪費。

3.原型模式

利用原型鏈繼承

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

缺點：所有屬性和方法被實例共用。當屬性、方法包含引用類型的值時，修改一個實例的屬性、方法會影響所有其他實例。

4.原型+建構子模式

私有屬性、方法用建構子產生，公有屬性、方法用原型來繼承。融合兩種方法的優點。

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建構函式的原型對象，將原型物件指標指向了一個對象，所以constructor屬性此時指向Object而不是Person，所以要明確的將其設定成Person。

5.動態原型模式

本質上還是建構函數，只在指定方法不存在時在原型物件中加入他。

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.寄生建構子模式

 調用時使用new操作符，除此之外我看不出和工廠模式有什麼區別。望高人指點。

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.穩健建構子模式

沒有公有屬性，停用this，僅暴露必須的API用於資料呼叫。適用於對安全有需求的領域。

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

如上程式碼，只能透過sayName方法存取到內部的name屬性。

本文為大家介紹了七種設計模式，分別介紹了他們的優缺點，希望對學習js設計模式相關知識有所幫助。