JS设计模式总结笔记

开篇：前端工程师的成长论

能够决定一个前端工程师的本质的，不是那些瞬息万变的技术点，而是那些不变的东西。

所谓“不变的东西”，就是驾驭技术的能力。

具体来说，它分为以下三个层次：

• 能用健壮的代码去解决具体的问题；
• 能用抽象的思维去应对复杂的系统；
• 能用工程化的思想去规划更大规模的业务。

基础理论知识是一个人的基线，理论越强基线越高。再为自己定一个目标和向上攀附的阶梯，那么达到目标就是时间问题，而很多野路子工程师搞了半辈子也未达到优秀工程师的基线，很多他们绞尽脑汁得出的高深学问，不过是正规工程师看起来很自然的东西。—— 吴军

设计模式之“道”

• 设计模式是“拿来主义”。如使用数学公式，不会从头推导一个公式。

核心思想

• 设计模式的核心思想——封装变化
• 保证可维护性、可扩展性。
• 将变与不变分离，确保变化的部分灵活，不变的部分稳定。——这就是所谓的“健壮”的代码。

设计模式之“术”

即最经典的23种设计模式。按创建型、结构型、行为型划分。

创建型

1. 单例模式
2. 原型模式
3. 构造器模式
4. 工厂模式
5. 抽象工厂模式

结构型

1. 桥接模式
2. 外观模式
3. 组合模式
4. 装饰器模式
5. 适配器模式
6. 代理模式
7. 享元模式

行为型

1. 迭代器模式
2. 解释器模式
3. 观察者模式
4. 访问者模式
5. 状态模式
6. 备忘录模式
7. 策略模式
8. 模板方法模式
9. 职责链模式
10. 命令模式

小结：

• 创建型模型封装了创建对象过程中的变化。

• 结构型模式封装了对象之间组合方式的变化。目的在于灵活的表达对象间的配合与依赖关系。

• 行为型模式将对象千变万化的行为进行抽离，确保安全、方便的更改。

创建型：工厂模式-简单工厂——区分“变与不变”

先了解构造器模式，在JS中的构造函数即构造器。使用构造函数，即使用构造器模式。

构造器模式

function User(name, age, career){
  this.name = name
  this.age = age
  this.career = career
}
const user = New User('张三', 18, '前端工程师')

变与不变：user的属性(name, age, car)不变，即共性。变的是属性值，即个性。

简单工厂模式

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 = ['喝茶', '看报', '见客户']

        // 其它工种的职责分配
        //case 'xxx':
            //...

    return new User(name, age, career, work)
}

工厂模式就是将创建对象的过程单独封装。

其他更多详见 《JavaScript教程》-设计模式 (opens new window)。