標簽，第三個，傳遞一個元素。這三個例子的結(jié)果都是一樣的：返回一個jQuery對象的引用指向一個DOM節(jié)點。

在jQuery中$變量采用的就是建造模式，例如：返回的jQuery Dom對象可以訪問由jQuery庫提供的所有方法，但是并沒有顯示的調(diào)用document.createElement，JS 庫通常都是通過這種高級方法處理的。

想象有多少工作要做，如果我們顯示創(chuàng)建DOM元素然后插入內(nèi)容到里面。通過利用建造模式，我們可以專注于對象的類型和內(nèi)容，而不是顯示的去創(chuàng)建。

#p#

原型模式

之前，我們討論了在JavaScript中通過函數(shù)和添加方法到對象的原型中定義一個數(shù)據(jù)類型。原型模式通過原型允許對象繼承自其它對象。

“原型模式是一個基于已經(jīng)存在的模板對象克隆出新對象的模式”

在JavaScript中這是一種簡單自然的方式來實現(xiàn)繼承。例如：

 
 
 

  
  
  
var Person = { 
  
  
  
    numFeet: 2, 
  
  
  
    numHeads: 1, 
  
  
  
    numHands:2 
  
  
  
};  
  
  
  
  
  
  
  
//Object.create takes its first argument and applies it to the prototype of your new object. 
  
  
  
var tilo = Object.create(Person);  
  
  
  
  
  
  
  
console.log(tilo.numHeads); //outputs 1 
  
  
  
tilo.numHeads = 2; 
  
  
  
console.log(tilo.numHeads) //outputs 2
 
 
 

屬性(方法)在Person對象中應用到了tilo對象的原型，我們可以重新定義在tilo對象中的屬性，如果我們想要它不一樣的話。上面例子中，我們使用Object.create()，然而，IE8中不支持這個比較新的方法，在這種情況下，我們可以模擬他的行為：

 
 
 

  
  
  
var vehiclePrototype = {  
  
  
  
  
  
  
  
  init: function (carModel) { 
  
  
  
    this.model = carModel; 
  
  
  
  },  
  
  
  
  
  
  
  
  getModel: function () { 
  
  
  
    console.log( "The model of this vehicle is " + this.model); 
  
  
  
  } 
  
  
  
};  
  
  
  
  
  
  
  
function vehicle (model) {  
  
  
  
  
  
  
  
  function F() {}; 
  
  
  
  F.prototype = vehiclePrototype;  
  
  
  
  
  
  
  
  var f = new F();  
  
  
  
  
  
  
  
  f.init(model); 
  
  
  
  return f;  
  
  
  
  
  
  
  
}  
  
  
  
  
  
  
  
var car = vehicle("Ford Escort"); 
  
  
  
car.getModel();
 
 
 

唯一不好的地方就是這個方法你沒法指定為可讀的屬性，而使用Object.create()時可以指定。不管怎樣，原型模式展示了對象如何繼承自其它對象。

結(jié)構(gòu)化模式：

結(jié)構(gòu)化設計模式在當你想理解一個系統(tǒng)如果工作的時候顯得非常有幫助。它能使應用擴展方便，維護方便。我們將討論以下兩種模式：組合模式和門面模式

組合模式：

組合模式可以理解為一個對象的組合可以像單個對象一樣以一致的方式處理。這是什么意思呢？好吧，考慮下面這個例子：

 
 
 

  
  
  
$('.myList').addClass('selected'); 
  
  
  
$('#myItem').addClass('selected');  
  
  
  
  
  
  
  
//dont do this on large tables, it's just an example. 
  
  
  
$("#dataTable tbody tr").on("click", function(event){ 
  
  
  
    alert($(this).text()); 
  
  
  
});  
  
  
  
  
  
  
  
$('#myButton').on("click", function(event) { 
  
  
  
    alert("Clicked."); 
  
  
  
});
 
 
 

很多JavaScript庫提供了一致的API，不論是處理單個DOM元素還是一個DOM元素的數(shù)組。我們可以添加selected 類給所有含.myList的選擇器的元素。同樣我們可以使用相同的方法處理相似的DOM元素#myItem，類似的，我們可以使用on()方法附上事件處理器在多個節(jié)點或單個節(jié)點上。

#p#

門面模式：

隱藏內(nèi)部復雜結(jié)構(gòu)，提供給用戶簡單接口使用。

門面模式幾乎總是可以改善大部分軟件的可用性。使用jQuery作為例子，一個最受歡迎的方法ready()：

 
 
 

  
  
  
$(document).ready(function() {  
  
  
  
  
  
  
  
    //all your code goes here...  
  
  
  
  
  
  
  
});
 
 
 

ready()方法就實現(xiàn)的門面模式，如果你去查看源代碼，你將發(fā)現(xiàn)：

 
 
 

  
  
  
ready: (function() {  
  
  
  
  
  
  
  
    ...  
  
  
  
  
  
  
  
    //Mozilla, Opera, and Webkit 
  
  
  
    if (document.addEventListener) { 
  
  
  
        document.addEventListener("DOMContentLoaded", idempotent_fn, false); 
  
  
  
        ... 
  
  
  
    } 
  
  
  
    //IE event model 
  
  
  
    else if (document.attachEvent) {  
  
  
  
  
  
  
  
        // ensure firing before onload; maybe late but safe also for iframes 
  
  
  
        document.attachEvent("onreadystatechange", idempotent_fn);  
  
  
  
  
  
  
  
        // A fallback to window.onload, that will always work 
  
  
  
        window.attachEvent("onload", idempotent_fn);  
  
  
  
  
  
  
  
        ... 
  
  
  
    }  
  
  
  
  
  
  
  
})
 
 
 

ready()方法并不簡單，jQuery規(guī)范游覽器的一致性確保ready()在合適的時間被觸發(fā)。然而，作為一名開發(fā)者，你應該用簡單的接口展示出來。

總結(jié)：設計模式最讓人鼓舞的是有人在過去已經(jīng)成功實踐了。很多開源代碼實現(xiàn)了各種JavaScript中的是設計模式。作為程序員，我們需要意識到每種設計模式的應用場景。我希望這篇教程能幫助一步步回答這些問題。

英文原文：Tilo Mitra

譯文鏈接：http://blog.jobbole.com/25537/