設計模式

發布訂閱

訂閱/發布模式 (觀察者) pub/sub

這個應該?大家?用到最?的設計模式了了，
在這種模式中，并不是?個對象調?用另?個對象的?方法，?是一個對象訂閱另?個對象的 特定活動并在狀態改編后獲得通知。訂閱者因此也成為觀察者，?而被觀察的對象成為發布者或者主題。當發?了一個 重要事件時候
發布者會通知(調?)所有訂閱者并且可能經常已事件對象的形式傳遞消息

vue代碼里面的on,emit事件就是發布訂閱，雙向綁定也是。

單例

單例例模式的定義:保證?個類僅有?個實例例，并提供一個訪問它的全局訪問點。實現的?方法為先
判斷實例例存在與否，如果存在則直接返回，如果不存在就創建了了再返回，這就確保了一個類只有
?個實例例對象。

全局彈窗，element-UI源碼

策略模式

策略略模式的定義:定義?系列列的算法，把他們?個封裝起來，并且使他們可以相互替換。

element-ui里面form表單的校驗方法。

裝飾器器模式

裝飾者模式的定義:在不不改變對象?自身的基礎上，在程序運?行行期間給對象動態地添加?方法。

常見應?: react的?高階組件, 或者react-redux中的@connect 或者?自?己定義?一些?高階組件,類似于vue的TS寫法的幾個公共庫，就是裝飾器寫法

工廠模式

提供創建對象的接口，把成員對象的創建工作轉交給?個外部對象，好處在于消除對象之間的耦合(也就 是相互影響)

常見案例 vue源碼watch的新建，element-ui message 對外提供的api，都是調?用api，然后新建?個彈窗或者Message 的實例，就是典型的?廠模式，還有vue ssr服務端代碼也是工廠模式。

外觀模式

外觀模式即讓多個?方法?一起被調?用

涉及到兼容性，參數?支持多格式，有很多這種代碼，對外暴暴露露統?一的api，?比如上?面的$on ?支持數組，
￥off參數?支持多個情況， 對?面只?用?一個函數，內部判斷實現

代理模式

代理理模式的定義:為?個對象提供?個代?用品或占位符，以便便控制對它的訪問。

函數的節流防抖，圖片懶加載都是代理模式實現

中介者模式

中介者模式的定義:通過?個中介者對象，其他所有的相關對象都通過該中介者對象來通信，?而不不是相
互引?用，當其中的?個對象發?生改變時，只需要通知中介者對象即可。通過中介者模式可以解除對象與
對象之間的緊耦合關系。

redux，vuex 都屬于中介者模式的實際應?用，我們把共享的數據，抽離成?一個單獨的store， 每個都通 過store這個中介來操作對象

總結

以上是生活随笔為你收集整理的高级前端必备--设计模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。