1 创建型-工厂模式

⚡ 30 秒速记

• 工厂模式 = 把「创建哪个具体对象」的判断收到一处，调用方只给参数、不碰 new 具体类
• 前端最常用的形态是一张映射表：const map = { input: Input, select: Select }，新增类型加一行
• 简单工厂：一个维度选一个产品；抽象工厂：一次造一整套配套的产品（产品族），保证不混搭
• 抽象工厂加新产品族容易（多写一个具体工厂），加新产品种类难（所有工厂都要改）
• 典型场景：低代码表单按 type 渲染、<component :is>、按环境创建请求客户端；值写成 lazy(() => import(...)) 还能按需加载

工厂模式说白了就是把「到底 new 哪个类」的判断集中到一个地方，调用方只说要什么。 不用它的话，if/else 和 switch 会散在各处，加一种类型要改一堆地方。前端里最实用的写法不是写个 Factory 类，而是一张 type → 组件 的映射表，低代码表单、动态组件都是这个套路，新增控件只加一行。抽象工厂再进一步，用一个工厂造一整套配套的对象，比如安卓系统配安卓硬件，业务层只选一次工厂，就不会出现苹果系统配高通硬件这种混搭。

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)