js设计模式 --- 桥接设计模式

jsdt 发布于2019-08-26 11:47 / 649人阅读

摘要：他们两个互相独立，不会影响到对方对于两个独立变化的维度，使用桥接模式再适合不过了。

桥接设计模式

桥接设计模式是许多其他设计模式的基础,比如装饰模式, 代理模式都或多或少看到他的影子, 在面向对象设计中最重要的一个特点就是继承, 然而作为拓展类的功能的方式有两种 -- 继承和桥接, 桥接用我简单的理解就是放弃使用继承的方式拓展类, 而是采用包含另一个具有一定功能的对象来拓展类, 下面来看两种结构

首先我们假设有一个需求, 有一个图形接口, 然后有长方形, 正方形, 圆形等图形类, 我们需要各种颜色的图形, 下面用继承和桥接的方式来实现这种需求.

继承

桥接

桥接模式结构

实现

图形抽象类

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();

桥式设计适用于一个类存在两个或多个独立变化的维度，且这两个维度都需要进行扩展, 
桥接模式实现了抽象化与实现化的脱耦。他们两个互相独立，不会影响到对方, 对于两个独立变化的维度，使用桥接模式再适合不过了。

GPU云服务器云服务器桥接模式桥接模式linux JS设计模式 js继承模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107559.html

JS 桥接模式

摘要：简介桥接模式将抽象部分与它的实现部分分离，使它们都可以独立地变化。同时桥接模式也有自己的缺点大量的类将导致开发成本的增加，同时在性能方面可能也会有所减少。 1. 简介桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。其实就是函数的封装，比如要对某个DOM元素添加color和backgroundColor，可以封装个changeColor函数，这样可以在多个...

chemzqm 2019-08-21 18:19 评论0 收藏0
一个例子了解什么是桥接模式

摘要：更多前端技术和知识点，搜索订阅号菌订阅桥接模式实际上就是将逻辑抽象和具体的实现分离。以追加字符串到文件中为例代码从变为上面代码是读取某个文件并在文件中追加字符串，最后调用回调函数。请关注我的订阅号，不定期推送有关的技术文章，只谈技术不谈八卦 showImg(https://segmentfault.com/img/remote/1460000020002974?w=640&h=426)...

muzhuyu 2019-08-26 10:38 评论0 收藏0
桥接&组合

摘要：桥接实现的时候桥接模式非常有用可能正是由于这个该模式使用地不够广泛在设计时该模式可以弱化与使用它的类和对象之间的耦合该模式的作用在于将抽象与其实现隔离开让他们独立变化而且对于事件驱动编程有许多好处有以及其他基于动作的方法无论它们是用来创建鼓桥接实现 API 的时候,桥接模式非常有用,可能正是由于这个,该模式使用地不够广泛.在设计 js API 时,该模式可以弱化API 与使用它的类...

yuanxin 2019-08-20 11:14 评论0 收藏0
JS 适配器模式

摘要：另外，适配器模式和其它几个模式可能容易让人迷惑，这里说一下大概的区别适配器和桥接模式虽然类似，但桥接的出发点不同，桥接的目的是将接口部分和实现部分分离，从而对他们可以更为容易也相对独立的加以改变。 1. 简介适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一...

Jeffrrey 2019-08-22 11:18 评论0 收藏0
设计模式之桥接模式

摘要：桥接模式中的所谓脱耦，就是指在一个软件系统的抽象化和实现化之间使用关联关系组合或者聚合关系而不是继承关系，从而使两者可以相对独立地变化，这就是桥接模式的用意。 0x01.定义与类型定义：将抽象部分与它的具体实现部分分离，使它们都可以独立地变化。桥接模式将继承关系转化成关联关系，它降低了类与类之间的耦合度，减少了系统中类的数量，也减少了代码量。桥接模式中的所谓脱耦，就是指在一个软...

kycool 2019-08-19 10:34 评论0 收藏0