JavaScript设计模式-桥接模式

[bojue]

JavaScript设计模式-桥接模式

桥接模式：在系统沿着多个维度变化，使得实现业务代码和抽象部分代码进行解耦。

组件开发

在开发Web编辑器开发过程中，我们需要支持不同组件的动态生成，样式属性绑定和业务接口绑定，根据功能的不同，基础组件（如图片等）只需要绑定样式属性，业务组件（如列表等）需要绑定样式属性和后台业务接口。

根据业务背景我们尝试开发两种不同需求的组件开发DEMO版本：图片组件ImgComponent和人员列表组件PersonListComponent，其中：

• ImgComponent：color和border-round样式的设置
• PersonListComponent：color样式设置和api后台接口

class StyleColor {
    constructor(color) {
        this.color = color;
    }
    info() {
        console.log(`color is ${this.color}`)
    }
}

class StyleBorderRound {
    constructor(borderRound) {
        this.borderRound = borderRound;
    }
    info() {
        console.log(`border-roundis ${this.borderRound}`)
    }
}

class ApiInterface {
    constructor(api) {
        this.api = api;
    }

    info() {
        console.log(`Api is ${this.api}`)
    }
}

class ImgComponent {
    constructor(color, borderRound) {
        this.style_color = new StyleColor(color);
        this.style_border_round = new StyleBorderRound(borderRound);
    }
    
    initDate() {
        this.style_color.info();
        this.style_border_round.info();
    }
}

class PersonListComponent {
    constructor(color, api) {
        this.style_color = new StyleColor(color);
        this.api = new StyleColor(api);
    }

    initData() {
        this.style_color.info();
        this.api.info();
    }
}

let imgComp = new ImgComponent('red', '50%');
imgComp.initDate();

let personListComp = new PersonListComponent('blue', 'api/persons');
personListComp.initData();

我们尝试将组件拆分成独立的类，每种属性，API接口都由单独的类创建，当我们创建具体的组件的时候，我们根据需要自由组合属性设置和API接口，用来达到组件实现也公共抽象类解耦的目的。