詳解JS設(shè)計模式之橋接模式用法
定義
橋接設(shè)計模式(Bridge Pattern)是一種結(jié)構(gòu)型設(shè)計模式,它用于將抽象部分與其具體實現(xiàn)部分分離,使它們可以獨立地變化。
組成
在橋接模式中,有兩個關(guān)鍵角色:
抽象部分(Abstraction):抽象部分定義了高層的接口和功能,它持有一個對實現(xiàn)部分的引用。抽象部分通常包含被抽象了的方法或接口,用于定義高層接口的操作。 注意這里被抽象了的方法或接口不是Ts中的抽象方法。
實現(xiàn)部分(Implementation):實現(xiàn)部分定義了具體的實現(xiàn)邏輯,它通常是一個接口或抽象類,并提供了供抽象部分調(diào)用的具體方法。
通過將抽象部分和實現(xiàn)部分分離,橋接模式允許它們可以獨立地變化。這種解耦的好處在于,當(dāng)需要新增一個抽象部分或?qū)崿F(xiàn)部分時,不需要修改已有的代碼。
代碼
// 實現(xiàn)部分 - 具體實現(xiàn)A class DomElementHandler { constructor(elementId) { this.elementId = elementId; } setText(text) { const element = document.getElementById(this.elementId); element.textContent = text; } } // 抽象部分 - 橋接類 class DomBridge { constructor(handler) { this.handler = handler; } /* 錯誤的寫法 constructor(){ this.handler = new DomElementHandler("myElement"); } */ setText(text) { this.handler.setText(text); } } // 示例用法 const domHandler = new DomElementHandler("myElement"); // 創(chuàng)建具體實現(xiàn)A對象 const domBridge = new DomBridge(domHandler); // 使用具體實現(xiàn)A創(chuàng)建橋接對象 domBridge.setText("Hello, Bridge Pattern!");
符合DIP原則
依賴倒置原則:依賴倒置原則是面向?qū)ο笤O(shè)計中的一個重要原則,它主張高層模塊不應(yīng)該依賴于低層模塊,兩者都應(yīng)該依賴于抽象。也就是說,【抽象不應(yīng)該依賴于具體實現(xiàn)細(xì)節(jié),具體實現(xiàn)細(xì)節(jié)應(yīng)該依賴于抽象】。
橋接模式通過引入一個橋接接口或抽象類來實現(xiàn)依賴倒置原則。
抽象部分和實現(xiàn)部分之間通過組合關(guān)系進行關(guān)聯(lián)。這樣,抽象部分不依賴于具體實現(xiàn)類,而是依賴于抽象接口或抽象類,從而實現(xiàn)了依賴倒置。
對比策略模式
- 策略模式提供了一個修改策略的接口,而橋接模式注入實現(xiàn)的過程是在構(gòu)造函數(shù)中,所以是不可變的
- 橋接模式強調(diào)抽象和實現(xiàn)的解耦,所以方法名必須一致,都是setText,而策略模式可能會用到多個策略,并且使用的方法不抽象
- 策略模式使用多個策略的時候可以將它們隨意組合,而橋接模式必須保證抽象方法和實現(xiàn)方法同名,不能將實現(xiàn)對象組合使用
使用場景
原生js中沒有直接對此模式的使用,但是在UI庫開發(fā),動畫,主題,獲取數(shù)據(jù)源的業(yè)務(wù)場景中用得較多。
總結(jié)
橋接模式解決的是:統(tǒng)一提調(diào)來自不同類的實例對象上的同名方法的問題。
到此這篇關(guān)于詳解JS設(shè)計模式之橋接模式用法的文章就介紹到這了,更多相關(guān)JS橋接模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap編寫一個同時適用于PC、平板、手機的登陸頁面
這篇文章主要為大家詳細(xì)介紹了Bootstrap編寫一個同時適用于PC、平板、手機的登陸頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-06-06瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個特性,從字面上來看,二者的功能很好理解,分別是"延遲腳本"和"異步腳本"的作用2016-01-01javascript appendChild,innerHTML,join性能比較代碼
在實際應(yīng)用中,應(yīng)該避免直接用innerHTML,對于大量的字符連接運算,應(yīng)該考慮先運算再輸出。2009-08-08如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個需求,需要顯示溫濕度,網(wǎng)上找了一圈沒找到解決方法,所以只能自己寫一個,這篇文章主要給大家介紹了關(guān)于如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度的相關(guān)資料,需要的朋友可以參考下2022-03-03Javascript 完美運動框架(逐行分析代碼,讓你輕松了運動的原理)
這篇文章主要介紹了Javascript 完美運動框架,逐行分析代碼,讓你輕松了運動的原理,需要的朋友可以參考下2015-01-01javascript實現(xiàn) 百度翻譯 可折疊的分享按鈕列表
這篇文章主要介紹了javascript實現(xiàn) 百度翻譯 可折疊的分享按鈕列表的方法,需要的朋友可以參考下2015-03-03