1 创建型-工厂模式

⚡ 30 秒速记

• 核心是把"创建什么"的判断收在一处，调用方只传参数、不关心具体是哪个类
• 前端最实用的形态不是写一个 Factory 类，而是一张映射表：const map = { input: Input, select: Select }
• 收益是开闭原则：新增类型只加一行映射，不动渲染主流程；映射表还能被遍历、被外部扩展（插件注册）
• 典型场景：低代码表单按 type 渲染控件、动态组件 <component :is>、按环境创建不同的请求客户端
• 组件很重时映射表的值可以是 lazy(() => import(...))，顺带做了按需加载

工厂模式的核心是把对象创建过程集中封装，让调用方只描述需求，不依赖具体实现类。 简单工厂适合根据一个参数创建同类对象；抽象工厂则面向一组相关产品，通过抽象接口约束不同产品族。这样能把变化点收拢起来，新增实现时尽量少改调用流程。前端里可以用映射表按 type 选择表单控件，也可以结合 lazy(() => import(...)) 做动态组件和按需加载。

1.1 简单工厂模式

其实就是将创建对象的过程单独封装，同时它的应用场景也非常容易识别：有构造函数的地方，我们就应该想到简单工厂；在写了大量构造函数、调用了大量的 new、自觉非常不爽的情况下，我们就应该思考是不是可以掏出工厂模式重构我们的代码了

// 给不同工种分配职责说明
function User(name, age, career, work) {
    this.name = name;
    this.age = age;
    this.career = career;
    this.work = work;
}

function Factory(name, age, career) {
    let work;
    switch (career) {
        case 'coder': {
            work = ['写代码', '写系分', '修bug']
            break;
        }
        case 'product-manager': {
            work = ['订会议室', '写PRD', '催更']
            break;
        }
        case 'boss': {
            work = ['喝茶', '看报', '见客户']
            break;
        }
    }
    return new User(name, age, career, work)
}

const wang = new Factory('wang', 50, 'boss');
const sun = new Factory('sun', 25, 'coder');
const li = new Factory('li', 30, 'product-manager');

console.log(wang)
console.log(sun)
console.log(li)

1.2 抽象工厂模式