JavaScript常用設計模式

2021-08-21 19:08:19 字數 2227 閱讀 5912

設計模式

設計模式是一種在長時間的經驗與錯誤中總結出來可復用的解決方案

設計模式主要分為三類:

創造型設計模式 :專注於處理物件的建立

constructor構造器模式、factory工廠模式,singleton單例模式、builder生成器模式

構造型設計模式 :物件間組合,簡歷物件之間的關係

decorator裝飾者模式、facede外觀模式、flyweight享元模式、adapter介面卡模式,proxy**模式

行為設計模式:簡化和改善物件間的通訊

mediator中介者模式、observer觀察者模式

常用的設計模式

1、觀察者模式

乙個目標物件維持著一系列依賴於它的物件,將有關狀態的任何變更自動通知觀察者們。在觀察者模式中,觀察者需要直接訂閱目標物件。觀察者與目標物件之間有一定的依賴關係。

有4個重要的概念

1>目標物件(被觀察者):維護一組觀察患者,提供管理觀察者的方法。

2>觀察者:提供乙個更新介面,用於收到通知時,進行更新

3>具體目標物件:代表具體的目標物件

4>具體觀察者:代表具體的觀察者

2、發布、訂閱模式

發布訂閱模式可以說是觀察這模式的一種變體,一種實現。它使用乙個主題/事件通道,介於發布者和訂閱者之間,避免了發布者和訂閱者之間的依賴關係。

3、工廠模式

工廠函式提供了乙個通用的介面來建立物件,我們可以指定我們希望常見的物件型別,我們通知工廠函式需要什麼型別的物件並提供對應的資料,返回對應的例項。

何時使用工廠模式

1>當我們的物件比較複雜的時候

2>當我們需要根據不同情況建立不同物件例項的時候

3>當我們需要建立許多相似物件的時候

缺點:使用不當會增加程式的複雜度

4、抽象工廠模式

抽象工廠模式,將物件的實現細節抽離出來。適用於需要和多種物件一起工作的場景。

5、單例模式

單體模式思想在於保證乙個特定類僅有乙個例項,意味著但當你第二次使用同乙個類建立新物件時,應得到和第一次建立物件完全相同。(限制乙個類只有乙個例項化物件。)

6、中介者模式

中介者模式就是提供乙個中心點給系統不同元件之間進行通訊,降低系統元件之間的耦合程度。

//實現與發布/訂閱模式類似

觀察者模式和發布訂閱模式專注於維護目標物件和觀察者之間的關係,當主題物件發生變化時,通知所有對改主題感興趣的觀察者。而中介者模式的話,專注於限制物件的通訊必須通過中介者來通訊。兩者都提倡耦合。

7、裝飾者模式

裝飾者模式,通過乙個裝飾類對現有動態新增行為,以及對原有行為進行裝飾。

8、介面卡模式

使用乙個新的介面對現有的介面進行包裝,處理資料與介面的不匹配

感謝原始碼時代教學講師提供此文章!  

JavaScript設計模式 架構型設計模式簡介

指的是一類框架結構,通過提供一些子系統,指定它們的職責,並且將它們調理清晰組織在一起。主要包含了同步模組模式 非同步模組模式 widget模式 mvc模式 mvp模式 mvvm模式 模組化把複雜的系統分解為高內聚 低耦合的模組,讓系統開發變得可控 可維護 可拓展,提高模組的復用率。同步模組模式 sm...

JavaScript設計模式九(模板方法模式)

定義 模板方法模式是一種只需要使用繼承就可以實現的非常簡單的模式 模板方法模式由兩部分組成,第一部分是抽象父類,另一部分是具體的實現子類。通常抽象父類中封裝了子類的演算法框架,包括實現一些公共的方法以及封裝子類中所有方法的執行順序。子類通過繼承這個類,然後繼承了這個演算法,然後重寫父類的方法 例子是...

JavaScript設計模式系列八 外觀模式

外觀模式 外觀模式是指提供乙個統一的介面去訪問多個子系統的多個不同的介面,為子系統中的一組介面提供統一的高層介面。使得子系統更容易使用,不僅簡化類中的介面,而且實現呼叫者和介面的解耦。外觀模式在我們的日常工作中十分常見。我們來看乙個例子 a.js export default b.js export...