Javascript 中怎么实现桥接模式

在JavaScript中实现桥接模式主要涉及将抽象与实现分离、以便两者能独立变化。核心观点包括：抽象化、实现化、解耦合。特别地，抽象化是该模式的一个关键特点，它涉及定义一个高层控制逻辑，这逻辑不直接执行具体的操作，而是通过委托给实现化结构来完成。这样，即使实现细节发生变化，高层逻辑也无需变动，实现了灵活性与扩展性的提升。

一、桥接模式概念

桥接模式是一种结构型设计模式，旨在“将抽象部分与实现部分分离，使它们都可以独立地变化”。这个模式通过创建两个独立变化的维度，一边关注抽象层面的操作，一边关注实际操作的实现，可以大大减少彼此之间的耦合。

抽象化与实现化

在桥接模式中，抽象化（Abstraction）指的是客户端调用的接口，它含有一个指向实现化角色的引用。实现化（Implementation）则是真正执行操作的类的接口，也就是抽象化角色所引用的对象。两者之间的桥接，即是桥接模式的关键——通过抽象化角色的引用指向不同的实现化对象，达到分离抽象与实现的目的。

二、桥接模式的实现步骤

定义实现化角色

实现化角色通常由一个接口或抽象类定义，这个接口定义了实现类需要实现的具体方法。在JavaScript中，由于其灵活的类型系统，这一角色可以通过定义一个类或对象来实现。

class DrawingAPI {
    drawCircle(radius, x, y) {
        // Implementation goes here
    }
}

定义抽象化角色

抽象化角色通常包含一个对实现化对象的引用。它定义了基于实现化角色的高层操作。这层的方法通常会调用实现化角色的方法来完成具体的操作。

class Shape {
    constructor(drawingAPI) {
        this.drawingAPI = drawingAPI;
    }
    draw() {
        // Call drawing methods from drawingAPI
    }
}

三、案例分析：绘制不同风格的圆

为了更好地理解桥接模式，我们来分析一个绘制不同风格的圆的案例。

实现化角色定义

首先，我们定义两个绘制API，分别为SolidDrawingAPI和DottedDrawingAPI，它们分别实现了画实线圆和画虚线圆的功能。

class SolidDrawingAPI extends DrawingAPI {
    drawCircle(radius, x, y) {
        console.log(`Drawing Circle [Solid] with radius ${radius} at (${x}, ${y})`);
    }
}
class DottedDrawingAPI extends DrawingAPI {
    drawCircle(radius, x, y) {
        console.log(`Drawing Circle [Dotted] with radius ${radius} at (${x}, ${y})`);
    }
}

抽象化角色定义

接下来，定义CircleShape类，扩展自Shape类，并实现了draw方法，用于画圆。

class CircleShape extends Shape {
    constructor(radius, x, y, drawingAPI) {
        super(drawingAPI);
        this.radius = radius;
        this.x = x;
        this.y = y;
    }
    draw() {
        this.drawingAPI.drawCircle(this.radius, this.x, this.y);
    }
}