設(shè)計(jì)模式

發(fā)布訂閱

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

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

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

單例

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

全局彈窗，element-UI源碼

策略模式

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

element-ui里面form表單的校驗(yàn)方法。

裝飾器器模式

裝飾者模式的定義:在不不改變對象?自身的基礎(chǔ)上，在程序運(yùn)?行行期間給對象動態(tài)地添加?方法。

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

工廠模式

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

常見案例 vue源碼watch的新建，element-ui message 對外提供的api，都是調(diào)?用api，然后新建?個彈窗或者M(jìn)essage 的實(shí)例，就是典型的?廠模式，還有vue ssr服務(wù)端代碼也是工廠模式。

外觀模式

外觀模式即讓多個?方法?一起被調(diào)?用

涉及到兼容性，參數(shù)?支持多格式，有很多這種代碼，對外暴暴露露統(tǒng)?一的api，?比如上?面的$on ?支持?jǐn)?shù)組，
￥off參數(shù)?支持多個情況， 對?面只?用?一個函數(shù)，內(nèi)部判斷實(shí)現(xiàn)

代理模式

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

函數(shù)的節(jié)流防抖，圖片懶加載都是代理模式實(shí)現(xiàn)

中介者模式

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

redux，vuex 都屬于中介者模式的實(shí)際應(yīng)?用，我們把共享的數(shù)據(jù)，抽離成?一個單獨(dú)的store， 每個都通 過store這個中介來操作對象

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。