android

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

目錄

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. this.tap = function() {
  14. this.output.click();
  15. }
  16. this.swipe = function() {
  17. this.output.move();
  18. }
  19. this.pan = function() {
  20. this.output.drag();
  21. }
  22. this.pinch = function() {
  23. this.output.zoom();
  24. }
  25. };
  26. //輸入裝置:滑鼠
  27. var Mouse = function(output) {
  28. this.output = output;
  29. this.click = function() {
  30. this.output.click();
  31. }
  32. this.move = function() {
  33. this.output.move();
  34. }
  35. this.down = function() {
  36. this.output.drag();
  37. }
  38. this.wheel = function() {
  39. this.output.zoom();
  40. }
  41. };
  42. // 輸出裝置:螢幕
  43. var Screen = function() {
  44. this.click = function() {
  45. log.add("點選螢幕");
  46. }
  47. this.move = function() {
  48. log.add("移動螢幕");
  49. }
  50. this.drag = function() {
  51. log.add("拖拽螢幕");
  52. }
  53. this.zoom = function() {
  54. log.add("放大螢幕");
  55. }
  56. };
  57. // 輸出裝置:音響
  58. var Audio = function() {
  59. this.click = function() {
  60. log.add("點選音響");
  61. }
  62. this.move = function() {
  63. log.add("移動音響");
  64. }
  65. this.drag = function() {
  66. log.add("拖拽音響");
  67. }
  68. this.zoom = function() {
  69. log.add("加大音量");
  70. }
  71. };
  72. //日誌記錄函式
  73. var log = (function() {
  74. var log = "";
  75. return {
  76. add: function(msg) {
  77. log += msg + "\n";
  78. },
  79. show: function() {
  80. console.info("%c%s", "color:red; font-size:18px", log);
  81. log = "";
  82. }
  83. }
  84. })();
  85. function run() {
  86. var screen = new Screen();
  87. var audio = new Audio();
  88. var hand = new Gestures(screen);
  89. var mouse = new Mouse(audio);
  90. hand.tap();
  91. hand.swipe();
  92. hand.pinch();
  93. mouse.click();
  94. mouse.move();
  95. mouse.wheel();
  96. log.show();
  97. }
  98. run();
  99. </script>
  100. </html>

4 總結

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

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

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

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

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

 

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

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

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