结构型设计模式简析 — 了解JavaScript中的代码组合之道

2024-01-18 11:12:24

在软件开发中，设计模式是解决常见问题的有效方法。其中，结构型设计模式专注于如何将类或对象组合成更大的结构，以简化设计，提高代码的可读性和可维护性。本文将探讨JavaScript中的几种主要结构型设计模式，并提供相应的代码示例和操作步骤。

适配器模式

适配器模式用于将一个类的接口转换成另一个类的接口，以便两个原本不兼容的类能够协同工作。在JavaScript中，这通常用于适配第三方库的接口。

示例：

class OldAPI {
    fetchData() {
        return "Old Data";
    }
}

class NewAPIAdapter {
    constructor(oldApi) {
        this.oldApi = oldApi;
    }

    getData() {
        return this.oldApi.fetchData();
    }
}

const oldApi = new OldAPI();
const newApi = new NewAPIAdapter(oldApi);
console.log(newApi.getData()); // 输出: Old Data

桥接模式

桥接模式将抽象部分和实现部分分离，以便可以独立地修改这两部分。在JavaScript中，这有助于解耦对象的抽象和实现。

示例：

abstract class Shape {
    draw() {
        if (this.implementation) {
            this.implementation.draw();
        }
    }
}

class RedImplementation {
    draw() {
        console.log("Drawing in red");
    }
}

class GreenImplementation {
    draw() {
        console.log("Drawing in green");
    }
}

class Circle extends Shape {
    constructor(implementation) {
        super();
        this.implementation = implementation;
    }
}

const circleRed = new Circle(new RedImplementation());
circleRed.draw(); // 输出: Drawing in red

组合模式

组合模式将对象组合成树形结构，以表示“部分-整体”的关系。在JavaScript中，这常用于构建复杂的数据结构，如菜单或文件系统。

示例：

class MenuComponent {
    constructor(name, children = []) {
        this.name = name;
        this.children = children;
    }

    addChild(child) {
        this.children.push(child);
    }

    removeChild(child) {
        this.children = this.children.filter(c => c !== child);
    }

    display() {
        console.log(`${this.name}`);
        this.children.forEach(child => child.display());
    }
}

const fileMenu = new MenuComponent("File");
fileMenu.addChild(new MenuComponent("New"));
fileMenu.addChild(new MenuComponent("Open"));
const editMenu = new MenuComponent("Edit");
editMenu.addChild(new MenuComponent("Cut"));
editMenu.addChild(new MenuComponent("Copy"));
const menu = new MenuComponent("Main", [fileMenu, editMenu]);
menu.display();

装饰器模式

装饰器模式动态地将附加的功能添加到一个对象，而无需修改该对象的源代码。在JavaScript中，这常用于增强对象的功能。

示例：

function Coffee() {
    this.cost = function() {
        return 5;
    };
}

function MilkDecorator(coffee) {
    coffee.cost = function() {
        return coffee.cost() + 1;
    };
}

function SugarDecorator(coffee) {
    coffee.cost = function() {
        return coffee.cost() + 0.5;
    };
}

const myCoffee = new Coffee();
MilkDecorator(myCoffee);
SugarDecorator(myCoffee);
console.log(myCoffee.cost()); // 输出: 6.5

外观模式

外观模式为一组复杂的子系统提供一个统一的接口，简化客户端与子系统的交互。在JavaScript中，这有助于隐藏复杂性，提供简单的接口。

示例：

class SubSystemOne {
    methodOne() {
        console.log("SubSystemOne MethodOne");
    }
}

class SubSystemTwo {
    methodTwo() {
        console.log("SubSystemTwo MethodTwo");
    }
}

class Facade {
    constructor() {
        this.subSystemOne = new SubSystemOne();
        this.subSystemTwo = new SubSystemTwo();
    }

    operation() {
        this.subSystemOne.methodOne();
        this.subSystemTwo.methodTwo();
    }
}

const facade = new Facade();
facade.operation(); // 输出: SubSystemOne MethodOne 
 SubSystemTwo MethodTwo

享元模式

享元模式减少对象的数量，从而提高性能。在JavaScript中，这常用于处理大量相似对象的情况。

示例：

class FlyweightFactory {
    constructor() {
        this.pool = {};
    }

    getFlyweight(key) {
        if (!this.pool[key]) {
            this.pool[key] = new Flyweight(key);
        }
        return this.pool[key];
    }
}

class Flyweight {
    constructor(key) {
        this.key = key;
    }
}

const factory = new FlyweightFactory();
const flyweight1 = factory.getFlyweight("A");
const flyweight2 = factory.getFlyweight("A");
console.log(flyweight1 === flyweight2); // 输出: true

代理模式

代理模式为另一个对象提供一个替代的接口，以控制对该对象的访问。在JavaScript中，这常用于控制对敏感数据的访问。

示例：

class RealSubject {
    request() {
        console.log("RealSubject: Handling request");
    }
}

class Proxy {
    constructor(realSubject) {
        this.realSubject = realSubject;
    }

    request() {
        console.log("Proxy: Checking access prior to firing request.");
        this.realSubject.request();
    }
}

const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);
proxy.request(); // 输出: Proxy: Checking access prior to firing request. 
 RealSubject: Handling request