类继承与工厂模式搭配：让演示制作更灵活高效

做演示时，常常需要创建多个风格统一但内容各异的页面元素。比如一个产品介绍PPT里，有不同型号的手机卡片，它们结构相似，但参数和颜色又各不相同。这时候如果每个都从头写，不仅费时还容易出错。用编程思维来解决这个问题，类继承和工厂模式的搭配就很管用。

类继承：复用基础结构

假设我们正在做一个可交互的电子演示文稿，里面要展示多种设备卡片。这些卡片都有标题、图片、描述，只是细节不同。我们可以先定义一个基础的 DeviceCard 类：

class DeviceCard {
    constructor(title, image, description) {
        this.title = title;
        this.image = image;
        this.description = description;
    }

    render() {
        return `
            <div class="card">
                <h3>${this.title}</h3>
                <img src="${this.image}" alt="${this.title}" />
                <p>${this.description}</p>
            </div>
        `;
    }
}

然后通过继承，创建具体的子类，比如 PhoneCard 和 LaptopCard，各自可以重写或扩展方法：

class PhoneCard extends DeviceCard {
    constructor(title, image, description, os) {
        super(title, image, description);
        this.os = os;
    }

    render() {
        const baseHTML = super.render();
        return baseHTML.replace(
            '</div>', 
            `<span class="tag">系统：${this.os}</span></div>`
        );
    }
}

工厂模式：按需生成实例

光有继承还不够。在实际演示中，你可能根据用户选择动态生成卡片。这时候手动 new 各种类会很乱。工厂模式就能派上用场——它像一个自动装配线，你告诉它类型，它就返回对应的对象。

写一个简单的工厂函数：

class CardFactory {
    static create(type, data) {
        switch(type) {
            case 'phone':
                return new PhoneCard(
                    data.title, 
                    data.image, 
                    data.description, 
                    data.os
                );
            case 'laptop':
                return new LaptopCard(
                    data.title, 
                    data.image, 
                    data.description, 
                    data.cpu
                );
            default:
                throw new Error(`不支持的类型：${type}`);
        }
    }
}

使用时就简单多了：

const phone = CardFactory.create('phone', {
    title: '旗舰手机X',
    image: 'x-phone.jpg',
    description: '高性能拍照旗舰',
    os: 'Android'
});

document.getElementById('cards').innerHTML += phone.render();

搭配使用的好处

类继承负责“长得像”，工厂模式负责“怎么造”。两者一结合，修改起来也方便。比如公司换了设计规范，只需要改基类的 render 方法，所有子类自动更新。新增设备类型？在工厂里加个 case 就行，不用到处找 new 的地方。

在做动态演示项目时，这种结构能让代码更清晰，维护成本更低。特别是多人协作的场景，谁也不用记一堆构造参数，照着工厂接口传数据就行。