前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 基础进阶

    • 基础篇
    • 进阶篇
    • 高频篇
    • 手写篇
    • 综合题型
    • 其他问题
    • 设计模式
  • 精选模块

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 1 创建型-工厂模式

# 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 抽象工厂模式

// 定义操作系统这类产品的抽象产品类
class OS {
    constructor() {
        if (new.target === OS) {
            throw new Error('不能实例化抽象类');
        }
    }
}

// 定义具体操作系统的具体产品类
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 基础进阶

    • 基础篇
    • 进阶篇
    • 高频篇
    • 手写篇
    • 综合题型
    • 其他问题
    • 设计模式
  • 精选模块