【JS】面向对象相关设计模式

面向对象应该是一种思想，而不是代码的组织形式。

面向对象的特点：

封装
继承
多态

子类继承了父类的函数，同时覆盖实现了父类的某些行为。上面的setProgress函数即体现了多态又体现了继承

继承和组合#

集成商为了实现复用，组合其实也是为了实现复用。继承是is-a的关系，而组合是has-a的关系。

可以把上面的ProgressBar改成组合的方式。

1
class ProgressBar {
2
  constructor($container) {
3
    this.fullWidth = $container.width()
4
    this.$bar = null
5
  }
6
  // 设置宽度
7
  setProgress(percentage) {
8
    this.$bar.animate({
9
      width: this.fullWidth * percentage + 'px'
10
    })
11
  }
12
  // 完成
13
  finished() {
14
    this.$bar.hide()
15
  }
16
  // 失败
17
  failed() {
18
    this.addFailedText()
19
  }
20
  addFailedText() { }
21
}
22

23
class ProgressBarWithNumber extends ProgressBar {
24
  constructor($container) {
25
    super($container)
26
  }
27
  // 多态
28
  setProgress(percentage) {
29
    // 先借助继承父类的函数
30
    super.setProgress(percentage)
31
    this.showPercentageText(percentage)
32
  }
33
  showPercentageText(percentage) {}
34
}

在构造函数里面组合了一个progressBar的实例，然后在setProgress函数里面利用这个实例去设置进度条的百分比。

1
class ProgressBarWithNumber {
2
  constructor($container) {
3
    this.progressBar = new ProgressBar($container)
4
  }
5
  setProgress(percentage) {
6
    this.progressBar.setProgress(percentage)
7
    this.showPercentageText(percentage)
8
  }
9
  showPercentageText(percentage) {}
10
}

偏向于使用组合而非继承

因为继承的耦合性要大于组合，组合更加灵活。继承是编译阶段就决定了关系，而组合是运行阶段才决定关系。

面向对象编程原则和设计模式#

单例模式

1
var taskWorker = {
2
  tasks: [],
3
  draw() {},
4
  addTask(task) {
5
    Task.tasks.push(task)
6
  }
7
}
8
var mapTask = {
9
  add: function(task) {
10
    taskWorker.addTask(task)
11
  }
12
}

每次get的时候先判断mapTask有没有Task的新实例，如果没有则为第一次。先去实例化一个，并做些初始化工作，如果有则直接返回。然后执行mapTask.get()的时候就能够保证获取到的是一个单例。

破坏单例
```
1
  mapTask.aTask = null
```

策略模式

场景：注册弹框，不同的弹框文字。把文案当做一个个的策略，使用时根据不同类型，映射到不同的策略。这样比写if-else或者switch的好处在于：如果以后要增加或删除某种类型，只需要增删一个type就可以了，而不用去改动if-else逻辑。这就叫做开放封闭原则——对修改是封闭的，而对扩展是开放的。

1
var popType = {
2
  userReg: {
3
    title: 'Create your account'
4
  },
5
  favHouse: {
6
    title: 'Add home to favorite'
7
  },
8
  saveSearch: {
9
    title: 'Save this search'
10
  }
11
}
12

13
var tpl = `<section><h1>{{title}}</h1></section>`
14

15
Mustache.render(tpl, popType['userReg'])
16

17
// 把回调操作封装成一个策略
18
var popCallback = {
19
  userReg: function() {},
20
  favHouse: function() {},
21
  saveSearch: function() {}
22
}
23

24
util.ajax('/register', function() {
25
  var popType = 'favHouse' // 获取popType
26
  popCallback[popType]
27
})

观察者模式

观察者向消息的接受者订阅消息，一旦接受者收到消息后就把消息下发给它的观察者们。在一个回执搜索的应用里面，单击最后一个点关闭路径，要触发搜索。

1
class Input {
2
  constructor(inputDom) {
3
    this.inputDom = inputDom
4
    this.visitors = {
5
      click: []
6
    }
7
  }
8

9
  // 添加访问者
10
  on(eventType, visitor) {
11
    this.visitors.push(visitor)
12
  }
13

14
  // 收到消息，把消息分发给访问者
15
  trigger(type, event) {
16
    if (this.visitors[type]) {
17
      for (let i = 0; i < this.visitors[type]; i++) {
18
        this.visitors[type]()
19
      }
20
    }
21
  }
22
}

适配器模式

在一个响应式的页面里，假设小屏和大屏显示的分页样式不同，它们初始化和更新状态的函数都不同，如下：

1
// 小屏
2
var pagination = new jqPagination({
3
})
4
pagination.showPage = function(curPage, totalPage) {
5
  pagination.setPage(curPage, totalPage)
6
}
7
// 大屏
8
var pagination = new Pagination({
9
})
10
pagination.showPage = function(curPage, totalPage) {
11
  pagination.showItem(curPage, totalPage)
12
}

如果每次调用都得判断一下不同的屏幕大小然后调用不同函数就很麻烦，所以用一个适配器，对外提供统一的接口：

1
var screen = $(window).width() < 800 ? 'small' : 'large'
2
var paginationAdapter = {
3
  init: function() {
4
    this.pagination = screen === 'small' ? new jqPagination() : new Pagination()
5
    if (screen === 'large') {
6
      this.pagination.showItem = this.pagination.setPage
7
    }
8
  },
9
  showPage: function(curPage, totalPage) {
10
    this.pagination.showItem(curPage, totalPage)
11
  }
12
}

使用者只要调用 paginationAdapter.showPage 就可以更新分页状态，它不需要去关心当前是大屏还是小屏，由适配器去处理这些细节

工厂模式

工厂模式是把创建交给一个工厂，使用者无需要关心创建细节，如下：

1
var taskCreator = {
2
  createTask: function(type) {
3
    switch(type) {
4
      case 'map':
5
        return new MapTask()
6
      case 'search':
7
        return new SearchTask()
8
    }
9
  }
10
}
11
var mapTask = taskCreator.createTask('map')

需要哪种类型的Task时就传一个类型或者name给以个工厂，工厂根据名字去生产相应的产品，不用关心它是怎么创建的，要不要单例之类。

外观/门面模式

在一个搜索逻辑里，为了显示搜索结果需要执行：

1
hideNoResult() // 隐藏没有结果的显示
2
removeOldResult() // 删除老的结果
3
showNewResult() // 显示新结果
4
showPageItem() // 更新分页
5
resizePhoto() // 结果图片大小重置

于是考虑用一个模块把它包起来

1
function showResult() {
2
  hideNoResult() // 隐藏没有结果的显示
3
  removeOldResult() // 删除老的结果
4
  showNewResult() // 显示新结果
5
  showPageItem() // 更新分页
6
  resizePhoto() // 结果图片大小重置
7
}
8
// 需要时调用 showResult()

把多个操作封装成一个模块，对外只提供一个门面叫showResult，使用者只要调一下该函数即可

状态模式

实现一个类似微博的消息框，要求是当数字为0或者超过140时，发推按钮可单击，且剩余数字会跟着变

可用一个state来保存当前的状态，然后当用户输入时，这个state的数据会跟着变，同时更新按钮状态

1
var tweetBox = {
2
  init() {
3
    // 初始化一个state
4
    this.state = {}
5
    tweetBox.bindEvent()
6
  },
7
  setState(key, val) {
8
    this.state[key] = val
9
  },
10
  changeSubmit() {
11
    // 通过获取当前的state
12
    $('#submit')[0].disabled = tweeetBox.state.text.length === 0
13
      || tweetBox.state.text.length > 140
14
  },
15
  showLeftTextCount() {
16
    $('#text-count').text(140 - this.state.text.length)
17
  },
18
  bindEvent() {
19
    $('.tweet-textarea').on('input', function() {
20
      // 改变当前的state
21
      tweetBox.setState('text', this.value)
22
      tweetBox.changeSubmit()
23
      tweetBox.showLeftTextCount()
24
    })
25
  }
26
}

用一个state保存当前状态，通过获取当前state进行下一步操作。

当然，上面的还有优化空间，代码如下：

1
var tweetBox = {
2
  setState(key, val) {
3
    this.state[key] = val
4
    renderDom($('.tweet'))
5
  },
6
  renderDom($currentDom) {
7
    diffAndChange($currentDom, renderVirtualDom(tweetBox.state))
8
  }
9
}
10
// `<input type="submit" disabled={{this.state.text.length === 0 || this.state.text.length > 140}} />`

这其实就是React的原型，不同的状态有不同的表现行为，所以可以认为是一个状态模式，并且通过状态去驱动DOM更改

代理模式

其实React不直接操作DOM，而是把数据给state，然后委托给state和虚拟DOM去操作真实DOM，所以它是一个代理模式

eventHandler -> state -> renderDom()

状态模式的另一个例子

改变一个房源的状态：

1
if (newState === 'sold') {
2
  if (currentState === 'building' || currentState === 'dold') {
3
    return 'error'
4
  } else if (currentState === 'ready') {
5
    currentState = 'sold'
6
    return 'ok'
7
  }
8
} else if (newState === 'ready') {
9
  if (currentState === 'building') {
10
    currentState = 'toBeSold'
11
    return 'ok'
12
  }
13
}

更改一个房源的状态之前先要判断一下当前的状态，如果当前状态不支持那么不允许修改。对上面的代码我们可以用代理模式重构一下，如下：

1
var stateChange = {
2
  ready: {
3
    building: 'error',
4
    ready: 'error',
5
    sold: 'ok'
6
  },
7
  building: {
8
    building: 'error',
9
    ready: 'ok',
10
    sold: 'error'
11
  }
12
}
13
if (stateChange[currentState][newState] !== 'error') {
14
  currentState = newState
15
}
16
return stateChange[currentState][newState]

你会发现状态模式和策略模式是孪生兄弟，它们形式相同，只是目的不同。

策略模式封装成策略，状态模式封装成状态。这样的代码就比写很多个if-else强多了，特别是当切换关系比较复杂的时候

装饰者模式

要实现一个贷款的计算器，点计算按钮后，除了要计算结果，还要把结果发给后端做一个埋点。所以写了一个calculateResult函数：

1
function calculateResult(form) {
2
  var data = $(form).serializeForm()
3
  var l = data.rate / 1200
4
  var o = Math.pow(1 + l, data.term * 12)
5
  var e = data.price * (1 - data.payment / 100)
6
  var result = (e * l * o / (o - 1))
7
  var formatResult = util.formatMoney(result).toFixed(0))
8

9
  var $calResult = $('.loan-cal .cal-result-con')
10
  $calResult.find('.pi-result').text(formatResult)
11
  // 这个函数包含了两个功能，一个计算结果，一个改变DOM
12
  return result
13
}
14
// 计算按钮click回调
15
var result = calculateResult(form)
16
// 发送一个埋点请求
17
util.ajax('/cal-load', {result})

因为要把结果返回出来，所以这个函数有两个功能，一个是计算结果，第二个是改变DOM，这样写在一起感觉不太好。于是我们把函数拆了，首先有一个LoanCalculator的类专门负责计算小数结果：

1
// 计算结果
2
class LoanCalculator {
3
  constructor(form) {
4
    this.form = form
5
  }
6
  calResult() {
7
    var result = 'xxx'
8
    this.result = result
9
    return result
10
  }
11
  getResult() {
12
    if (!this.result) this.result = this.calResult()
13
  }
14
}

它还提供了一个getResult的函数，如果结果没算过那先算一下保存起来，如果已经计算过了那就直接用算好的结果。然后再写一个NumberFormater，它负责把小数结果格式化成带逗号的形式：

1
class NumberFormater {
2
  constructor(calculator) {
3
    this.calculator = calculator
4
  }
5
  calResult() {
6
    var result = this.calculator.calResult()
7
    this.result = result
8
    return util.formatMoney(result)
9
  }
10
}

在它的构造函数里传一个calculator给它，这个calculator可以是上面的LoanCalculator，获取到它的计算结果然后格式化。接着写一个DOMRenderer的类，它负责把结果下显示出来：

1
// 显示结果
2
class DOMRenderer {
3
  constructor(calculator) {
4
    this.calculator = calculator
5
  }
6
  calResult() {
7
    let result = this.calculator.calResult()
8
    $('.pi-result').text(result)
9
  }
10
}

最后代码调用如下：

1
let loadCalculator = new LoanCalculator(form)
2
let numberFormator = new NumberFormator(loadCalculator)
3
let domRenderer = new DOMRenderer(numberFormator)
4
domRenderer.calResult()
5
util.ajax('/cal-loan', {result: loadCalculator.getResult()})

可以看到它就是一个装饰的过程，一层一层地装饰：

DOMRenderer -> NumberFormator -> LoanCalculator

下一个装饰者调用上一个calResult函数，对它的结果进一步地装饰。如果这些装饰者的返回结果类型比较平行时，可以一层层地装饰下去。

使用装饰者模式，逻辑是清晰了，但是系统的复杂性增加了，有时候能用简单方式实现还是用简单方式。

总结#

总结一下上文提到的面向对象的编程原则：

把共性和特性或者会变和不变的部分分离出来
少用继承，多用组合
低耦合高聚合
开放封闭原则（对修改封闭，对扩展开放）
单一职责原则

音乐

音乐

继承和组合#

面向对象编程原则和设计模式#

总结#

支持与分享

评论区

文章目录