四大类设计模式精解与应用，HTML 开发工具有哪些？常用 HTML 开发工具推荐、学习路线与实战经验分享。

原创于 2025-11-05 13:44:49 发布 · 296 阅读

7 ·

CC 4.0 BY-SA版权

基于类的四种设计模式解析

设计模式是软件开发中解决常见问题的可重用方案。基于类的设计模式主要通过类和对象的关系来实现灵活、可维护的代码结构。以下是四种经典的基于类设计模式及其应用场景。

工厂方法模式

工厂方法模式定义了一个创建对象的接口，但让子类决定实例化哪个类。这种模式将对象的创建延迟到子类，避免了直接调用构造函数。

应用场景包括需要动态创建对象的系统，或希望将对象的创建与使用解耦的情况。例如，一个图形编辑工具可能需要根据用户输入创建不同的图形对象。

class Product {
    use() {}
}

class ConcreteProduct extends Product {
    use() {
        console.log('Using ConcreteProduct');
    }
}

class Creator {
    factoryMethod() {
        return new Product();
    }
}

class ConcreteCreator extends Creator {
    factoryMethod() {
        return new ConcreteProduct();
    }
}

抽象工厂模式

抽象工厂模式提供一个创建一系列相关或依赖对象的接口，而无需指定它们的具体类。与工厂方法模式不同，抽象工厂模式关注的是产品家族的创建。

典型应用场景包括需要确保一系列相关产品一起使用的系统，如不同操作系统的UI组件套件。抽象工厂使得更换整个产品家族变得容易。

class AbstractFactory {
    createProductA() {}
    createProductB() {}
}

class ConcreteFactory1 extends AbstractFactory {
    createProductA() {
        return new ProductA1();
    }
    createProductB() {
        return new ProductB1();
    }
}

单例模式

单例模式确保一个类只有一个实例，并提供全局访问点。这种模式通过控制实例化过程来实现对资源的集中管理。

适合使用单例模式的场景包括需要控制共享资源访问的情况，如数据库连接、配置管理或日志系统。单例模式可以避免资源冲突和重复创建的开销。

class Singleton {
    static instance;
    
    constructor() {
        if (Singleton.instance) {
            return Singleton.instance;
        }
        Singleton.instance = this;
    }
    
    static getInstance() {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton();
        }
        return Singleton.instance;
    }
}

适配器模式

适配器模式将一个类的接口转换成客户端期望的另一个接口，使原本不兼容的类可以一起工作。这种模式通过包装已有的接口来实现兼容性。

常见应用场景包括集成遗留系统、使用第三方库或统一不同子系统的接口。适配器模式可以帮助系统逐步演化而不需要大规模重构。

class Target {
    request() {
        return 'Target: default behavior';
    }
}

class Adaptee {
    specificRequest() {
        return 'Adaptee specific request';
    }
}

class Adapter extends Target {
    constructor(adaptee) {
        super();
        this.adaptee = adaptee;
    }
    
    request() {
        const result = this.adaptee.specificRequest();
        return `Adapter: ${result}`;
    }
}