摘要：為什么要學(xué)習(xí)設(shè)計(jì)模式做事情之前問個(gè)為什么總是好的。設(shè)計(jì)模式的使用方法關(guān)于使用方式，像我這種初學(xué)者最容易犯的錯(cuò)誤就是生搬硬套，但是模仿本來也是學(xué)習(xí)的一個(gè)過程，最重要的事情是在模仿中要學(xué)會思考。

做事情之前問個(gè)為什么總是好的。關(guān)于設(shè)計(jì)模式的好壞，我在知乎上也看過一些討論，有知友對其提出過一些疑問，里面有一些關(guān)于設(shè)計(jì)模式的觀點(diǎn)：

設(shè)計(jì)模式有何不妥，所謂的荼毒體現(xiàn)在哪？
設(shè)計(jì)模式是不是有點(diǎn)太玄了？

任何事物的出現(xiàn)都有其道理，任何語言都有其不足之處，設(shè)計(jì)模式是對語言不足的補(bǔ)充（Peter Norvig)。設(shè)計(jì)模式也是編程經(jīng)驗(yàn)的總結(jié)，我想學(xué)習(xí)它對像我這樣的前端新手的能力會有很大的提升。

《Head First 設(shè)計(jì)模式》一書舉了一個(gè)非常有意思的例子：

兩個(gè)人點(diǎn)餐，一個(gè)人說：“我要一份涂了奶酪及果醬的白面包，加了香草冰淇淋的巧克力汽水..”；
另外一個(gè)人說：“給我一份C.J懷特，一個(gè)黑與白”。

表達(dá)同樣的意思，效果卻完全不同，這里就說到一個(gè)比較大的概念“共享詞匯”。

共享詞匯就是一組概念，行為，方法等等的集合，這個(gè)在任何行業(yè)都有用，就像中文菜名“回鍋肉”，廚子知道什么是回鍋肉，你也知道什么是回鍋肉，如果沒有回鍋肉這個(gè)共享詞匯，我好像真的想不到一個(gè)合適的描述來點(diǎn)這道菜。

回到設(shè)計(jì)模式，各種設(shè)計(jì)模式就是一個(gè)個(gè)的共享詞匯，它不僅僅是一個(gè)名稱，更是一整套模式背后所象征的質(zhì)量，特征，約束。

細(xì)說說它的好處：

設(shè)計(jì)模式能讓你用更少的詞匯做更充分的溝通；

談話在模式層次時(shí)，不會被壓低到對象和類這種瑣碎的事情上；

懂設(shè)計(jì)模式的團(tuán)隊(duì)，彼此之間對于設(shè)計(jì)的看法不容易產(chǎn)生誤解；

共享詞匯能幫助初級人員快速成長。

總結(jié)一下設(shè)計(jì)模式的作用：

幫助我們將應(yīng)用組織成容易了解，容易維護(hù)，具有彈性的架構(gòu)，建立可維護(hù)的OO系統(tǒng)，要訣在于隨時(shí)想到系統(tǒng)以后可能需要的變化以及應(yīng)付變化的原則。

關(guān)于使用方式，像我這種初學(xué)者最容易犯的錯(cuò)誤就是生搬硬套，但是模仿本來也是學(xué)習(xí)的一個(gè)過程，最重要的事情是在模仿中要學(xué)會思考。我也是設(shè)計(jì)模式的初學(xué)者，所以我會常用這句話來提醒自己，看過一句關(guān)于如何最好的使用設(shè)計(jì)模式的話：

“把模式裝進(jìn)腦子里，然后在你的設(shè)計(jì)和已有的應(yīng)用中，尋找何處可以使用它們”。

這就有點(diǎn)像是張無忌練習(xí)太極拳了，忘了所有的模式吧，你已經(jīng)在潛移默化的使用它了。當(dāng)然如果你不學(xué)設(shè)計(jì)模式，你可能也在無意識的使用一些設(shè)計(jì)模式了，但是這個(gè)在跟學(xué)過以后再無意識的使用設(shè)計(jì)模式，應(yīng)該隔著兩重境界吧。

當(dāng)然要達(dá)到這個(gè)境界，少不了大量的練習(xí)，當(dāng)然也不能忘了設(shè)計(jì)是一門藝術(shù)，總有許多可取舍的地方。

找出應(yīng)用中可能需要改變之處，把它們獨(dú)立出來，不要和哪些不需要改變的代碼混在一起（低耦合）；

針對接口編程，而不是針對實(shí)現(xiàn)編程；
關(guān)鍵在于多態(tài)，程序可以針對超類型編程，執(zhí)行時(shí)會根據(jù)實(shí)際狀況執(zhí)行到真正的行為，不會被綁死在超類型的行為上（在JavaScript中并沒有超類型的概念。）我的理解是，接口可以理解為一個(gè)動作，而動作的具體實(shí)現(xiàn)則不用確定。這一點(diǎn)在下文講解多態(tài)時(shí)會有一個(gè)更加具體的例子。

多用組合，少用繼承

可能還有一些其它的原則，目前，我還沒有涉及到，在之后的學(xué)習(xí)過程中，再補(bǔ)充。

要真正的理解設(shè)計(jì)模式，需要了解面向?qū)ο蟮囊恍┗A(chǔ)概念：抽象，多態(tài)，封裝和繼承。
就JavaScript而言，由于是一門動態(tài)語言，在此不考慮抽象這一概念。

概念：同一操作作用于不同的對象上時(shí)，可以產(chǎn)生不同的解釋和不同的執(zhí)行結(jié)果。

比如說有兩只動物，雞和鴨，當(dāng)發(fā)出命令“叫”時(shí)，雞會“咯咯咯“，鴨會”嘎嘎嘎“；
多態(tài)背后的思想是將“做什么”和“誰去做以及怎么去做”分離開來，也就是將“不變的事”和“可變的事物”分離開來。

多態(tài)的實(shí)現(xiàn)：歸根到底是要消除類型之間的耦合關(guān)系，JS的變量類型在運(yùn)行時(shí)是可變的，這意味著JS對象的多態(tài)性是與生俱來的。

多態(tài)的作用：通過把過程化的條件分支語句轉(zhuǎn)化為對象的多態(tài)性，從而消除這些條件分支語句。

看一個(gè)例子來理解多態(tài)：

// 只使用谷歌地圖
var googleMap = {
    show: function() {
        console.log("開始渲染谷歌地圖");
    }
};

var renderMap = function() {
    googleMap.show();
};

renderMap(); //輸出：開始渲染谷歌地圖

// 好吧，谷歌在某些地方不好用，在某些要換成百度地圖了，
var googleMap = {
    show: function() {
        console.log("開始渲染谷歌地圖");
    }
};

var baiduMap = {
    show: function() {
        console.log("開始渲染百度地圖");
    }
};

var renderMap = function(type) {
    if (type === "google") {
        googleMap.show();
    } else if (type = "baidu") {
        baiduMap.show();
    };
};

renderMap("google"); //輸出：開始渲染谷歌地圖
renderMap("baidu"); //輸出：開始渲染百度地圖

// 上述代碼有一點(diǎn)的彈性，但是如果在更換地圖，改變的地方太多了，這里就可以運(yùn)用多態(tài)性這個(gè)理念了,這里也把做什么和怎么做分開了
// 抽象出相同部分,條件分支語句轉(zhuǎn)化為對象的多態(tài)性
var renderMap = function(map){                    //做什么
    if (map.show() instanceof Function) {
        map.show();
    }
};

renderMap("google"); //輸出：開始渲染谷歌地圖
renderMap("baidu"); //輸出：開始渲染百度地圖

// 再添加一個(gè)搜搜地圖
var sosoMap = {                                  // 怎么做
    show: function() {
        console.log("開始渲染搜搜地圖");
    }
};

renderMap("soso"); //輸出：開始渲染搜搜地圖

// 本例來自于《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》

封裝的目的是將信息隱藏,包括隱藏?cái)?shù)據(jù)，隱藏實(shí)現(xiàn)細(xì)節(jié)，設(shè)計(jì)細(xì)節(jié)以及隱藏對象的類型等。

封裝分為四類：封裝數(shù)據(jù)，封裝實(shí)現(xiàn)，封裝類型和封裝變化

封裝數(shù)據(jù)：

在許多面相對象系統(tǒng)中，封裝數(shù)據(jù)是由語法解析來實(shí)現(xiàn)的（private public proctected）;

JavaScript中沒有對這些變量的支持，只能利用變量的作用域來實(shí)現(xiàn)封裝，只能模擬出 public、private 兩種封裝性。（ES6可用let），一般用函數(shù)來創(chuàng)建作用域。

封裝實(shí)現(xiàn)：

使得對象內(nèi)部的變化對其他對象而言是不可見的，對象對其自己的行為負(fù)責(zé)，使得對象之間的耦合變得松散，對象之間只通過暴露API接口來通信，修改一個(gè)對象時(shí)，可以隨意地修改它的內(nèi)部實(shí)現(xiàn)，只要對外的接口沒有變化，就不會影響到程序的其它功能。

封裝類型：

對靜態(tài)語言而言，是一種重要的封裝方式，把對象的真正類型隱藏在抽象類或者接口之后，Javascript沒有這方面的支持，因此也沒有這方面的需要；

封裝變化：

把系統(tǒng)中穩(wěn)定不變的部分和容易變化的部分隔離開來，在系統(tǒng)的演變過程中，我們只需要替換那些容易變化的部分，如果這些部分是已經(jīng)封裝好的，替換起來也相對容易，這可以最大程度的保證程序的穩(wěn)定性和可擴(kuò)展性

說到繼承，JavaScript最重要的概念可能在于原型鏈。

基于原型鏈的委托機(jī)制就是原型繼承的本質(zhì)。

所有的數(shù)據(jù)都是對象，JS的根對象是Object.prototype對象，它是一個(gè)空對象；

要得到一個(gè)對象，不是通過實(shí)例化類而是找到一個(gè)對象作為原型來克隆它；

對象會記住它的原型；就JS而言，對象的原型其實(shí)是其構(gòu)造器的原型（new），包含在其隱藏屬性_proto_中；

如果對象無法響應(yīng)某個(gè)請求，它會把這個(gè)請求委托給自己的原型。

JavaScript的原型最初都是由Object.prototype對象克隆而來；

對象構(gòu)造器的原型并不限于Object.prototype,可以動態(tài)的指向其他對象； A.prototype=obj

原型鏈并非無限長，到頂（Object.prototype）以后，如果沒有找到就會返回undefined；

本文是我學(xué)習(xí)設(shè)計(jì)模式的第一篇筆記，里面若有不恰當(dāng)?shù)牡胤剑瑲g迎隨時(shí)指出，也希望您看完本文，跟我一樣有所收獲。

參考書籍

Head First 設(shè)計(jì)模式

JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐