设计模式

单例模式

一个类只有一个实例

发布-订阅模式

// Node中的EventEmitter 就是用的发布订阅模式
class EventEmitter {
      constructor() {
          this.list = {}
      }

      on(name, fn, type = 1) {
          if (!this.list[name]) {
              this.list[name] = []
          }
          this.list[name].push([fn, type])

      }

      once(name, fn, type = 0) {
          this.on(name, fn, type)
      }

      emit(name, ...args) {
          let fns = this.list[name]
          if (!fns || fns.length === 0) return
          fns.forEach((fn, index) => {
              fn[0].apply(this, args)
              if (fn[1] === 0) {
                  fns.splice(index, 1)
              }
          })
      }

      remove(name, func) {
          let fns = this.list[name]
          if (!fns) {
              this.list[name] = []
          }
          fns.forEach((fn, index) => {
              if (fn[0] === func) {
                  fns.splice(index, 1)
              }
          })
      }
  }

let bus = new EventEmitter()

bus.on("click", (value) => {
    console.log(value)
})

bus.emit("click", 111)

观察者模式

class Publisher {
      constructor() {
          this.list = []
      }

      addListener(listener) {
          this.list.push(listener)
      }

      removeListener(listener) {
          this.list.forEach((item, index) => {
              if (listener === item) {
                  this.list.splice(index, 1)
              }
          })
      }

      notify(obj) {
          this.list.forEach((item) => {
              item.process(obj)
          })
      }
  }

class Subscriber {
    process(obj) {
        console.log(obj.name)
    }
}

MVC

MVC (Model-View-Controller) 分为三部分

• Model（数据模型）：数据
• View（视图）：用户界面
• Controller（控制器）：业务逻辑

通信过程如下，所有通信都是单向的。

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈

MVVM

MVVM（Model-View-ViewModel）也分为三部分，数据模型，视图，视图模型。

与MVC的区别之一在于View和Model之间要借助ViewModel进行通信。