目錄
1 什麼是橋接模式
Bridge模式允許兩個元件,即客戶端和服務一起工作,每個元件都有自己的介面。Bridge是一種高階架構模式,它的主要目標是透過兩級抽象來編寫更好的程式碼。它有利於物件之間非常鬆散的耦合,有時也被稱為雙介面卡模式。 橋接模式的作用在於將實現部分和抽象部分分離, 以便兩者可以獨立的變化。 這種型別的設計模式屬於結構型模式,它透過提供抽象化和實現化之間的橋接結構,來實現二者的解耦。Bridge模式弱化了程式碼之間的耦合,將抽象和其實現分離,便於二者獨立變化、讓API更加健壯,有利於分層,提高元件的模組化程度,提高可拓性,但同時增加了開發成本,在效能方面可能會有所降低。
Bridge模式的一個例子是一個應用程式(客戶端)和一個數據庫驅動(服務)。應用程式實現了一個數據庫API,例如ODBC,但在這個API背後,你會發現每個驅動程式對每個資料庫廠商(SQL Server、MySQL、Oracle等)的實現是完全不同的。
Bridge模式是一個很好的驅動開發模式,但在JavaScript中很少見到。
2 參與者
橋接模式的主要參與物件有:
客戶端(Client):呼叫到Abstraction中請求操作
抽象(Abstraction) :JavaScript中沒有使用,宣告一個第一層抽象的介面,維護對實施者的引用
RefinedAbstraction :實現並擴充套件了Abstraction定義的介面
執行者 (Implementor): JavaScript中未使用,為第二層或實現者抽象宣告一個介面。
ConcreteImplementor :實現了Implementor介面,並定義了它的效果。
3 例項講解
在下面的程式碼中使用橋式模式,使輸入和輸出裝置可以獨立變化(不需要改變程式碼),這些裝置透過兩層抽象鬆散地耦合。JavaScript不支援抽象類,因此不包括Abstraction和Implementor。但是,它們的介面(屬性和方法)始終在RefinedAbstraction和ConcreteImplementor中實現。在我們的示例程式碼中,Abstraction代表輸入裝置,Implementor代表輸出裝置。
觸控板和滑鼠是不同的輸入裝置,但它們的動作對映到一組共同的輸出指令:點選、移動、拖動等。螢幕和音訊是非常不同的輸出裝置,但它們響應的是同一組指令,當然效果是完全不同的。橋接模式允許任何輸入裝置與任何輸出裝置一起工作。日誌函式用來收集和顯示結果。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>橋接模式:公眾號AlbertYang</title>
- </head>
- <body>
- </body>
- <script>
- // 輸入裝置:觸控板
- var Gestures = function(output) {
- this.output = output;
-
- this.tap = function() {
- this.output.click();
- }
- this.swipe = function() {
- this.output.move();
- }
- this.pan = function() {
- this.output.drag();
- }
- this.pinch = function() {
- this.output.zoom();
- }
- };
- //輸入裝置:滑鼠
- var Mouse = function(output) {
- this.output = output;
-
- this.click = function() {
- this.output.click();
- }
- this.move = function() {
- this.output.move();
- }
- this.down = function() {
- this.output.drag();
- }
- this.wheel = function() {
- this.output.zoom();
- }
- };
-
- // 輸出裝置:螢幕
- var Screen = function() {
- this.click = function() {
- log.add("點選螢幕");
- }
- this.move = function() {
- log.add("移動螢幕");
- }
- this.drag = function() {
- log.add("拖拽螢幕");
- }
- this.zoom = function() {
- log.add("放大螢幕");
- }
- };
- // 輸出裝置:音響
- var Audio = function() {
- this.click = function() {
- log.add("點選音響");
- }
- this.move = function() {
- log.add("移動音響");
- }
- this.drag = function() {
- log.add("拖拽音響");
- }
- this.zoom = function() {
- log.add("加大音量");
- }
- };
-
- //日誌記錄函式
- var log = (function() {
- var log = "";
-
- return {
- add: function(msg) {
- log += msg + "\n";
- },
- show: function() {
- console.info("%c%s", "color:red; font-size:18px", log);
- log = "";
- }
- }
- })();
-
- function run() {
- var screen = new Screen();
- var audio = new Audio();
-
- var hand = new Gestures(screen);
- var mouse = new Mouse(audio);
-
- hand.tap();
- hand.swipe();
- hand.pinch();
-
- mouse.click();
- mouse.move();
- mouse.wheel();
-
- log.show();
- }
- run();
- </script>
- </html>
4 總結
橋式設計適用於一個類存在兩個或多個獨立變化的維度,且這兩個維度都需要進行擴充套件,橋接模式實現了抽象化與實現化的脫耦。它們兩個互相獨立,不會影響到對方, 對於兩個獨立變化的維度,使用橋接模式再適合不過了。
1.橋接模式可以將抽象和其實現分離,方便他們獨立變化, 而且實現細節對客戶透明。
2.在事件監聽中將事件處理函式的抽象部分與實現部分分離,也就是抽像部分只是提供一個介面,具體的實現由橋接函式來實現。
3.橋接模式對的好處是弱化了程式碼之間的耦合,有利於程式碼拓展。
今天的學習就到這裡,你可以使用今天學習的技巧來改善一下你曾經的程式碼,如果想繼續提高,歡迎關注我,每天學習進步一點點,就是領先的開始。如果覺得本文對你有幫助的話,歡迎點贊,評論,轉發!!!
本文章已修改原文用詞符合繁體字使用者習慣使其容易閱讀
版權宣告:此處為CSDN博主「Albert Yang」的原創文章,依據CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/qq_23853743/article/details/107775083