《JavaScript設計模式 張》整理

最近在研讀另一本關於設計模式的書《JavaScript設計模式》，這本書中描述了更多的設計模式。

1、建立型設計模式

包括簡單工廠、工廠方法、抽象工廠、建造者、原型和單例模式。

1）簡單工廠

又叫靜態工廠方法，由一個工廠對象決定建立某一種產品對象類的實例。

兩種實現方式，第一種是經過類實例化對象建立，第二種是建立一個新對象而後包裝加強其屬性和功能。

demo代碼。

 

2）工廠方法

經過對產品類的抽象使其建立業務主要負責用於建立多類產品的實例。

將工廠方法看做是一個實例化對象的工廠類。

demo代碼。

 

3）抽象工廠

經過對類的工廠抽象使其業務用於對產品類簇的建立，而不負責建立某一類產品的實例。

用它做爲父類來建立一些子類。

demo代碼。

 

4）建造者

將一個複雜對象的構建層與其表示層相互分離，一樣的構建過程可採用不一樣的表示。

它更關心的是建立這個對象的整個過程，甚至於建立對象的各個細節。

demo代碼。

 

5）原型模式

用原型實例指向建立對象的類，使用於建立新的對象的類共享原型對象的屬性以及方法。

原型模式就是將可複用的、可共享的、耗時大的從基類中提取出來，放在其原型中，子類經過組合繼承或寄生繼承將方法和屬性繼承下來。

demo代碼。

 

6）單例模式

只容許實例化一次的對象類。有時咱們也用一個對象來規劃一個命名空間，層次分明的管理對象上的屬性和方法。

demo代碼。

 

2、結構型設計模式

1）外觀模式

爲一組複雜的子系統接口提供一個更高級的統一接口，經過這個接口使得對子系統接口的訪問更容易。

在JS中有時也會用於對底層結構兼容性作統一封裝來簡化用戶使用。

demo代碼。

 

2）適配器模式

將一個類（對象）的接口（方法或屬性）轉化成另一個接口，知足用戶需求，使類（對象）之間接口的不兼容問題經過適配器解決。

適配異類框架，參數適配器，適配數據。

dmeo代碼。

 

3）代理模式

因爲一個對象不能直接引用另外一個對象，因此須要代理對象在這兩個對象之間起到中介的做用。

站長統計、JSONP、代理模版。

 

4）裝飾者模式

在不改變原對象的基礎上，經過對其進行包裝拓展（添加屬性或方法）使原有對象可以知足更復雜的需求。

demo代碼。

 

5）橋接模式

在系統沿着多個緯度變化的同時，不增長其複雜度並已達到解耦。

提取共同點，事件與業務邏輯之間的橋樑，多元化對象。

將實現層（如元素的綁定事件）與抽象層（如修飾頁面UI邏輯）解耦分離，使兩部分能夠獨立變化。

demo代碼。

 

6）組合模式

又稱部分-總體模式，將對象組合成樹形結構以表示「部分總體」的層次結構。

組合模式使得用戶對單個對象和組合對象的使用具備一致性。

組合對象類經過繼承同一個父類使其具備統一的方法，此時單體成員和組合成員行爲表現就比較一致。

demo代碼。

 

7）享元模式

運用共享技術有效的支持大量的細粒度對象，避免對象間擁有相同內容形成多餘的開銷。

享元對象，享元動做。將共有的方法和數據提取，以提升頁面效率。

demo代碼。

 

3、行爲型設計模式

1）模版方法模式

父類中定義一組操做算法骨架，而將一些實現步驟延遲到子類中，使得子類能夠不改變父類的結構算法的同時可從新定義算法中某些步驟的實現。

提示框歸一化。

 

2）觀察者模式

又被稱做發佈-訂閱模式或消息機制，定義了一種依賴關係，解決了主體對象與觀察者之間功能的耦合。

最大的做用是解決類或對象之間的耦合，解決兩個相互依賴的對象，使其依賴於觀察者的消息機制。

demo代碼。

 

3）狀態模式

當一個對象的內部狀態發生改變時，會致使其行爲的改變，這看起來像是改變了對象。

狀態模式既是解決程序中臃腫的分支判斷語句問題，將每一個分支轉化爲一種狀態獨立出來，方便每種狀態的管理又不至於每次執行時遍歷全部分支。

demo代碼。

 

4）策略模式

將定義的一組算法封裝起來，使其相互之間能夠替換。封裝的算法具備必定的獨立性，不會隨客戶端變化而變化。

策略模式使得算法脫離於模塊邏輯而獨立管理，使咱們專心研發算法，而沒必要受模塊邏輯所約束。

對分支語句的優化目前有3種，工廠方法、狀態模式與策略模式。

 

5）職責鏈模式

解決請求的發送者與請求的接收者之間的耦合，經過職責鏈上的多個對象分解請求流程，實現請求在多個對象之間的傳遞，直到最後一個對象完成請求的處理。

分解需求，把每件事情分解成一個模塊對象處理，需求分解成相互獨立的部分，分工合做只作本身分內的事情，無關的事情傳到下一個對象中，直到完成。

請求模塊==》響應數據適配模塊==》建立組件模塊==》單元測試

 

6）命令模式

將建立模塊的邏輯封裝在一個對象裏，這個對象提供一個參數化的請求接口，經過調用這個接口並傳遞參數實現對象內部的一些方法。

封裝功能，提供簡單而高效的API，解決命令的發起者和命令的執行者之間的耦合。

demo代碼。

 

7）訪問者模式

針對於對象結構中的元素，定義在不改變對象的前提下訪問結構中元素的新方法。

 

8）中介者模式

經過中介者對象封裝一系列對象之間的交互，使對象之間再也不相互引用，下降他們之間的耦合。

觀察者模式中的訂閱者是相互的，而中介者模式訂閱者是單向的，消息統一由中介者對象發佈，全部的訂閱者間接的被中介者管理。

 

9）備忘錄模式

在不破壞對象的封裝性的前提下，在對象以外捕獲並保存該對象內部的狀態以便往後對象使用，或者對象恢復恢復到之前的某個狀態。

緩存數據，MVC中的M部分，不少時候都會緩存一些數據。

 

10）迭代器模式

在不暴露對象內部結構的同時，能夠順序的訪問聚合對象內部的元素。

迭代器是優化循環語句的一種可行方案，使得程序清晰易讀，解決了對象的使用者與對象內部結構之間的耦合。

demo代碼。

 

4、技巧型設計模式

1）委託模式

多個對象接收並處理同一請求，他們將請求委託給另外一個對象統一處理請求。

委託父元素、預言將來、數據分發。

demo代碼。

 

2）節流模式

對重複的業務進行節流控制，執行最後一次操做並取消其餘操做，以提升性能。

節流器、圖片延遲加載、統計打包。

 

3）簡單模版模式

經過格式化字符串拼湊出視圖，避免創造視圖時大量節點操做。

用正則匹配方式去格式化字符串性能要遠高於拼接視圖執行性能。

包括三部分：字符串模版庫，格式化方法，字符串拼接操做。

demo代碼。

 

4）惰性模式

減小每次代碼執行時的重複性分支判斷，經過對對象重定義來屏蔽原對象中的分支判斷。

惰性模式分爲兩種：第一種文件加載後當即執行對象方法來重定義，第二種是當第一次使用方法對象時來重定義。

demo代碼。

 

5）參與者模式

在特定的做用域中執行給定的函數，並將參數原封不動地傳遞。

參與者模式是兩種技術的結晶，函數綁定和函數柯里化。

demo代碼。

 

6）等待者模式

經過對多個異步進程監聽，來觸發將來發生的動做。

等待者模式意在處理耗時比較長的操做，定時器操做、異步操做等。

在耗時操做內埋入監聽者對象，在某個時刻改變監聽者對象的狀態，當全部監聽者對象都是已完成的時候，執行完成回調，若是有一個是中斷，就執行中斷回調。

demo代碼。

 

5、架構型設計模式

1）同步模塊

請求發出後，不管模塊是否存在，當即執行後續的邏輯，實現模塊開發中對模塊的當即使用。

demo代碼。

 

2）異步模塊

AMD，請求發出後，繼續其餘業務邏輯，直到模塊加載完成後執行後續的邏輯，實現模塊開發中對模塊加載完成後的引用。

 

3）MVC

用一種將業務邏輯、數據、視圖分離的方式組織架構代碼。

在視圖層建立界面的時候，會用到模型層內的數據，使這兩層耦合在一塊兒。下降了視圖建立的靈活性和複用性。

demo代碼。

4）MVP

View層不直接引用Model層的數據，而是經過Presenter層實現對Model層的數據訪問。

全部層次的交互都發生在Presenter層中，解決View層和Model層之間的耦合。

但視圖層還不夠獨立，建立怎樣的視圖由Presenter控制。

demo代碼。

5）MVVM

爲View層量身訂作一套ViewMode層，並在ViewMode中建立屬性和方法，爲View層綁定Model層的數據，並實現交互。

一個ViewMode能夠對應多個View層或Model層，ViewMode中的代碼變得高度複用。

View層的獨立開發，可使那些不懂JS的人，只需瞭解HTML內容並按照View層規範格式，建立視圖，便可完成一個複雜的頁面開發。