JS 中的設計模式瞭解一下？

Elevenbeans發表於2018-04-24
JS設計模式

更多文章參見： github.com/elevenbeans…

前言

本系列可以看作是我個人對於 Addy Osmani 的著作《Learning JavaScript Design Patterns》中內容的提煉，類似閱讀筆記，目的是為了簡單快速、又不失全面地瞭解設計模式的相關概念、特點、分類及其在 Javascript 中的實際用法。

分為五篇，基本上涵蓋了絕大部分設計模式型別。如果想深入瞭解，推薦原著。

  1. 概述（本篇）
  2. 建立型
  3. 結構型
  4. 行為型設計模式
  5. MV*

基本概念

設計模式是一種可用於解決軟體設計中問題的可複用的解決方案。

主要特點

  • 是在沒有顯而易見的方案（語言本身的 feature 或其執行環境提供的 API）下的一種間接解決問題的方案
  • 能解決實際問題，可複用
  • 是經過多方驗證的，描述與實際作用一致的
  • 可以抽象為一種關係的描述，富有表達力

一些經典的設計模式類別

1. 建立型設計模式

  • Constructor(構造器) 模式
  • Factory(工廠) 模式
  • Abstract(抽象) 模式
  • Prototype(原型) 模式
  • Singleton(單例) 模式
  • Builder(生成器) 模式

2. 結構型設計模式

  • Decorator(裝飾者) 模式
  • Facade(外觀) 模式
  • Flyweight(享元) 模式
  • Adapter(介面卡) 模式
  • Proxy(代理) 模式

3. 行為設計模式

  • Iterator(迭代器) 模式
  • Mediator(中介著) 模式
  • Observer(觀察者) 模式
  • Visitor(訪問者) 模式

JavaScript 中一些反模式的例子

  • 大量的全域性變數，對於全域性名稱空間的汙染
  • 對於 setTimeout()``setInterval() 傳遞字串，引發eval()的使用
  • 修改原生 Object 物件的原型
  • Inline JavaScript
  • 濫用 document.write

持續關注請 Star and Watch This github repo， 謝謝 ：）

相關文章