android

設計模式(9)[JS版]-JavaScript設計模式之如何實現橋接模式？？？

發佈於 jack

目錄

1 什麼是橋接模式

2 參與者

3 例項講解

4 總結

1 什麼是橋接模式

Bridge模式允許兩個元件，即客戶端和服務一起工作，每個元件都有自己的介面。Bridge是一種高階架構模式，它的主要目標是透過兩級抽象來編寫更好的程式碼。它有利於物件之間非常鬆散的耦合，有時也被稱為雙介面卡模式。 橋接模式的作用在於將實現部分和抽象部分分離， 以便兩者可以獨立的變化。 這種型別的設計模式屬於結構型模式，它透過提供抽象化和實現化之間的橋接結構，來實現二者的解耦。Bridge模式弱化了程式碼之間的耦合，將抽象和其實現分離，便於二者獨立變化、讓API更加健壯，有利於分層，提高元件的模組化程度，提高可拓性，但同時增加了開發成本，在效能方面可能會有所降低。

Bridge模式的一個例子是一個應用程式（客戶端）和一個數據庫驅動（服務）。應用程式實現了一個數據庫API，例如ODBC，但在這個API背後，你會發現每個驅動程式對每個資料庫廠商（ Server、、Oracle等）的實現是完全不同的。

Bridge模式是一個很好的驅動開發模式，但在JavaScript中很少見到。

2 參與者

橋接模式的主要參與物件有：

客戶端（Client）：呼叫到Abstraction中請求操作

抽象(Abstraction) ：JavaScript中沒有使用，宣告一個第一層抽象的介面，維護對實施者的引用

RefinedAbstraction ：實現並擴充套件了Abstraction定義的介面

執行者 (Implementor)： JavaScript中未使用，為第二層或實現者抽象宣告一個介面。

ConcreteImplementor ：實現了Implementor介面，並定義了它的效果。

3 例項講解

在下面的程式碼中使用橋式模式，使輸入和輸出裝置可以獨立變化（不需要改變程式碼），這些裝置透過兩層抽象鬆散地耦合。JavaScript不支援抽象類，因此不包括Abstraction和Implementor。但是，它們的介面（屬性和方法）始終在RefinedAbstraction和ConcreteImplementor中實現。在我們的示例程式碼中，Abstraction代表輸入裝置，Implementor代表輸出裝置。

觸控板和滑鼠是不同的輸入裝置，但它們的動作對映到一組共同的輸出指令：點選、移動、拖動等。螢幕和音訊是非常不同的輸出裝置，但它們響應的是同一組指令，當然效果是完全不同的。橋接模式允許任何輸入裝置與任何輸出裝置一起工作。日誌函式用來收集和顯示結果。

  1. <!DOCTYPE >
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>橋接模式:公眾號AlbertYang</title>
  6. 	</head>
  7. 	<body>
  8. 	</body>
  9. 	<script>
  10. 		// 輸入裝置:觸控板
  11. 		var Gestures = function(output) {
  12. 			this.output = output;
  13.  
  14. 			this.tap = function() {
  15. 				this.output.click();
  16. 			}
  17. 			this.swipe = function() {
  18. 				this.output.move();
  19. 			}
  20. 			this.pan = function() {
  21. 				this.output.drag();
  22. 			}
  23. 			this.pinch = function() {
  24. 				this.output.zoom();
  25. 			}
  26. 		};
  27. 		//輸入裝置:滑鼠
  28. 		var Mouse = function(output) {
  29. 			this.output = output;
  30.  
  31. 			this.click = function() {
  32. 				this.output.click();
  33. 			}
  34. 			this.move = function() {
  35. 				this.output.move();
  36. 			}
  37. 			this.down = function() {
  38. 				this.output.drag();
  39. 			}
  40. 			this.wheel = function() {
  41. 				this.output.zoom();
  42. 			}
  43. 		};
  44.  
  45. 		// 輸出裝置：螢幕
  46. 		var Screen = function() {
  47. 			this.click = function() {
  48. 				log.add("點選螢幕");
  49. 			}
  50. 			this.move = function() {
  51. 				log.add("移動螢幕");
  52. 			}
  53. 			this.drag = function() {
  54. 				log.add("拖拽螢幕");
  55. 			}
  56. 			this.zoom = function() {
  57. 				log.add("放大螢幕");
  58. 			}
  59. 		};
  60. 		// 輸出裝置：音響
  61. 		var Audio = function() {
  62. 			this.click = function() {
  63. 				log.add("點選音響");
  64. 			}
  65. 			this.move = function() {
  66. 				log.add("移動音響");
  67. 			}
  68. 			this.drag = function() {
  69. 				log.add("拖拽音響");
  70. 			}
  71. 			this.zoom = function() {
  72. 				log.add("加大音量");
  73. 			}
  74. 		};
  75.  
  76. 		//日誌記錄函式
  77. 		var log = (function() {
  78. 			var log = "";
  79.  
  80. 			return {
  81. 				add: function(msg) {
  82. 					log += msg + "\n";
  83. 				},
  84. 				show: function() {
  85. 					console.info("%c%s", "color:red; font-size:18px", log);
  86. 					log = "";
  87. 				}
  88. 			}
  89. 		})();
  90.  
  91. 		function run() {
  92. 			var screen = new Screen();
  93. 			var audio = new Audio();
  94.  
  95. 			var hand = new Gestures(screen);
  96. 			var mouse = new Mouse(audio);
  97.  
  98. 			hand.tap();
  99. 			hand.swipe();
  100. 			hand.pinch();
  101.  
  102. 			mouse.click();
  103. 			mouse.move();
  104. 			mouse.wheel();
  105.  
  106. 			log.show();
  107. 		}
  108. 		run();
  109. 	</script>
  110. </html>

4 總結

橋式設計適用於一個類存在兩個或多個獨立變化的維度，且這兩個維度都需要進行擴充套件,橋接模式實現了抽象化與實現化的脫耦。它們兩個互相獨立，不會影響到對方, 對於兩個獨立變化的維度，使用橋接模式再適合不過了。

   1.橋接模式可以將抽象和其實現分離，方便他們獨立變化， 而且實現細節對客戶透明。

   2.在事件監聽中將事件處理函式的抽象部分與實現部分分離,也就是抽像部分只是提供一個介面，具體的實現由橋接函式來實現。

   3.橋接模式對的好處是弱化了程式碼之間的耦合，有利於程式碼拓展。

今天的學習就到這裡，你可以使用今天學習的技巧來改善一下你曾經的程式碼，如果想繼續提高，歡迎關注我，每天學習進步一點點，就是領先的開始。如果覺得本文對你有幫助的話，歡迎點贊，評論，轉發！！！

 

本文章已修改原文用詞符合繁體字使用者習慣使其容易閱讀

版權宣告：此處為CSDN博主「Albert Yang」的原創文章，依據CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。

原文連結:https://blog.csdn.net/qq_23853743/article/details/107775083

Tags: , , , , , ,