js設計模式 --- 橋接設計模式

jsdt 發(fā)布于2019-08-26 11:47 / 678人閱讀

摘要：他們兩個互相獨立，不會影響到對方對于兩個獨立變化的維度，使用橋接模式再適合不過了。

橋接設計模式

橋接設計模式是許多其他設計模式的基礎,比如裝飾模式, 代理模式都或多或少看到他的影子, 在面向對象設計中最重要的一個特點就是繼承, 然而作為拓展類的功能的方式有兩種 -- 繼承和橋接, 橋接用我簡單的理解就是放棄使用繼承的方式拓展類, 而是采用包含另一個具有一定功能的對象來拓展類, 下面來看兩種結構

首先我們假設有一個需求, 有一個圖形接口, 然后有長方形, 正方形, 圓形等圖形類, 我們需要各種顏色的圖形, 下面用繼承和橋接的方式來實現(xiàn)這種需求.

繼承

橋接

橋接模式結構

實現(xiàn)

圖形抽象類

let Shape = function(color) {
  this.color = color;
};
Shape.prototype.setColor = function(color) {
  this.color = color;
};
Shape.prototype.draw = function() {
  new  Error();
}

圖形類

let Rectangle = function (color) {
  Shape.call(this, color);
};
extend(Rectangle, Shape);
Rectangle.prototype.draw = function () {
  color.bepaint("長方形");
};

let Square = function (color) {
  Shape.call(this, color);
};
extend(Square, Shape);
Square.prototype.draw = function () {
  color.bepaint("正方形");
}

let Circle = function (color) {
  Shape.call(this, color);
};
extend(Circle, Shape);
Circle.prototype.draw = function () {
  color.bepaint("圓型");
};

顏色抽象類

let Color = function() {
};
Shape.prototype.bepaint = function() {
  new  Error();
};

顏色類

let Red = function () {
  Color.call(this);
};
extend(Red, Color);
Red.prototype.bepaint = function(shape) {
  console.log("白色的" + shape);
};

let Green = function () {
  Color.call(this);
};
extend(Green, Color);
Green.prototype.bepaint = function(shape) {
  console.log("綠色的" + shape);
};

let Blue = function () {
  Color.call(this);
};
extend(Blue, Color);
Blue.prototype.bepaint = function(shape) {
  console.log("藍色的" + shape);
};

使用

let red = new Red();

//正方形
let square = new Square();
//紅色的正方形
square.setColor(red);
square.draw();

//長方形
let rectange = new Rectangle();
//紅色長方形
rectange.setColor(red);
rectange.draw();

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

GPU云服務器云服務器橋接模式橋接模式linux JS設計模式 js繼承模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107559.html

JS 橋接模式

摘要：簡介橋接模式將抽象部分與它的實現(xiàn)部分分離，使它們都可以獨立地變化。同時橋接模式也有自己的缺點大量的類將導致開發(fā)成本的增加，同時在性能方面可能也會有所減少。 1. 簡介橋接模式（Bridge）將抽象部分與它的實現(xiàn)部分分離，使它們都可以獨立地變化。其實就是函數(shù)的封裝，比如要對某個DOM元素添加color和backgroundColor，可以封裝個changeColor函數(shù)，這樣可以在多個...

chemzqm 2019-08-21 18:19 評論0 收藏0
一個例子了解什么是橋接模式

摘要：更多前端技術和知識點，搜索訂閱號菌訂閱橋接模式實際上就是將邏輯抽象和具體的實現(xiàn)分離。以追加字符串到文件中為例代碼從變?yōu)樯厦娲a是讀取某個文件并在文件中追加字符串，最后調用回調函數(shù)。請關注我的訂閱號，不定期推送有關的技術文章，只談技術不談八卦 showImg(https://segmentfault.com/img/remote/1460000020002974?w=640&h=426)...

muzhuyu 2019-08-26 10:38 評論0 收藏0
橋接&組合

摘要：橋接實現(xiàn)的時候橋接模式非常有用可能正是由于這個該模式使用地不夠廣泛在設計時該模式可以弱化與使用它的類和對象之間的耦合該模式的作用在于將抽象與其實現(xiàn)隔離開讓他們獨立變化而且對于事件驅動編程有許多好處有以及其他基于動作的方法無論它們是用來創(chuàng)建鼓橋接實現(xiàn) API 的時候,橋接模式非常有用,可能正是由于這個,該模式使用地不夠廣泛.在設計 js API 時,該模式可以弱化API 與使用它的類...

yuanxin 2019-08-20 11:14 評論0 收藏0
JS 適配器模式

摘要：另外，適配器模式和其它幾個模式可能容易讓人迷惑，這里說一下大概的區(qū)別適配器和橋接模式雖然類似，但橋接的出發(fā)點不同，橋接的目的是將接口部分和實現(xiàn)部分分離，從而對他們可以更為容易也相對獨立的加以改變。 1. 簡介適配器模式（Adapter）是將一個類（對象）的接口（方法或屬性）轉化成客戶希望的另外一個接口（方法或屬性），適配器模式使得原本由于接口不兼容而不能一起工作的那些類（對象）可以一...

Jeffrrey 2019-08-22 11:18 評論0 收藏0
設計模式之橋接模式

摘要：橋接模式中的所謂脫耦，就是指在一個軟件系統(tǒng)的抽象化和實現(xiàn)化之間使用關聯(lián)關系組合或者聚合關系而不是繼承關系，從而使兩者可以相對獨立地變化，這就是橋接模式的用意。 0x01.定義與類型定義：將抽象部分與它的具體實現(xiàn)部分分離，使它們都可以獨立地變化。橋接模式將繼承關系轉化成關聯(lián)關系，它降低了類與類之間的耦合度，減少了系統(tǒng)中類的數(shù)量，也減少了代碼量。橋接模式中的所謂脫耦，就是指在一個軟...

kycool 2019-08-19 10:34 評論0 收藏0