常用 JavaScript 设计模式

发表于 | 分类于

JavaScript 设计模式

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。

设计模式原则

S – Single Responsibility Principle 单一职责原则

1.一个程序只做好一件事
2.如果功能过于复杂就拆分开，每个部分保持独立

O – OpenClosed Principle 开放/封闭原则

1.对扩展开放，对修改封闭
2.增加需求时，扩展新代码，而非修改已有代码

L – Liskov Substitution Principle 里氏替换原则

1.子类能覆盖父类
2.父类能出现的地方子类就能出现

I – Interface Segregation Principle 接口隔离原则

1.保持接口的单一独立

D – Dependency Inversion Principle 依赖倒转原则

1.面向接口编程，依赖于抽象而不依赖于具体

设计模式

创建型

1.单例模式

一个类只有一个实例，并提供一个访问它的全局访问点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class LoginForm {
  constructor() {
    this.state = 'hide'
  }
  show() {
    console.log('show')
  }
  hide() {
    console.log('hide')
  }
}

LoginForm.getInstance = (function() {
  let instance
  return function() {
    if(!instance) {
      instance = new LoginForm()
    }
    return instance
  }
})()

let obj1 = LoginForm.getInstance()
let obj2 = LoginForm.getInstance()
console.log(obj1 === obj2)

优点
1.划分命名空间，减少全局变量
2.增强模块性，把自己的代码组织在一个全局变量名下，放在单一位置，便于维护
3.且只会实例化一次。简化了代码的调试和维护

缺点
单一访问点，有可能导致模块强耦合。

场景例子
vuex 和 redux 中的 store

2.工厂模式

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Product {
  constructor(name) {
    this.name = name
  }
  init() {
    console.log('init')
  }
}

class Factory {
  create(name) {
    return new Product(name)
  }
}

const factory = new Factory()
const p = factory.create('name1')
p.init()

优点
可以不让子系统与较大的对象之间形成强耦合。
创建对象的过程很复杂，但是只注意关心结果。
构造函数和创建者分离, 符合“开闭原则”。

缺点
单一访问点，有可能导致模块强耦合。

结构型

参考

JavaScript 23种设计模式
[JavaScript 常用的设计模式](JavaScript 的一些常用设计模式)
webpack