開發中，我們或多或少地接觸了設計模式，但是很多時候不知道自己使用了哪種設計模式或者說該使用何種設計模式。本文意在梳理常見設計模式的特點，從而對它們有比較清晰的認知。
JavaScript 中常見設計模式
單例模式 策略模式 代理模式 迭代器模式 釋出-訂閱模式 命令模式 組合模式 模板方法模式 享元模式 職責鏈模式 中介者模式 裝飾者模式 狀態模式 適配者模式 觀察者模式
各設計模式關鍵詞 看完了上述設計模式後，把它們的關鍵詞特點羅列出來，以後提到某種設計模式，進而聯想相應的關鍵詞和例子，從而心中有數。
| 設計模式 | 特點 | 案例 |
|---|---|---|
| 單例模式 | 一個類只能構造出唯一例項 | 建立選單物件 |
| 策略模式 | 根據不同引數可以命中不同的策略 | 動畫庫裡的演算法函式 |
| 代理模式 | 代理物件和本體物件具有一致的介面 | 圖片預載入 |
| 迭代器模式 | 能獲取聚合物件的順序和元素 | each([1, 2, 3], cb) |
| 釋出-訂閱模式 | PubSub | 瀑布流庫 |
| 命令模式 | 不同物件間約定好相應的介面 | 按鈕和命令的分離 |
| 組合模式 | 組合模式在物件間形成一致對待的樹形結構 | 掃描資料夾 |
| 模板方法模式 | 父類中定好執行順序 | 咖啡和茶 |
| 享元模式 | 減少建立例項的個數 | 男女模具試裝 |
| 職責鏈模式 | 通過請求第一個條件，會持續執行後續的條件，直到返回結果為止 | if else 優化 |
| 中介者模式 | 物件和物件之間藉助第三方中介者進行通訊 | 測試結束告知結果 |
| 裝飾者模式 | 動態地給函式賦能 | 天冷了穿衣服，熱了脫衣服 |
| 狀態模式 | 每個狀態建立一個類，狀態改變會產生不同行為 | 電燈換擋 |
| 適配者模式 | 一種資料結構改成另一種資料結構 | 列舉值介面變更 |
| 觀察者模式 | 當觀察物件發生變化時自動呼叫相關函式 | vue 雙向繫結 |
這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。