30-10 之Presentation Layer - MVVM ( Model-View-ViewModel )

这个东东主要的概念来自 Martin Fowler 所写的《 Presentation Model 》这篇文章，MVVM 基本上算是 PM ( Presentation Model ) 的变体，不过当初 PM 主要是以 GUI 为主撰写，不太确定是否与 web 打架…

( 小备注: 这个人的 Blog 可以说是通往软件架构师必看之 Blog )

接下来谈谈 MVVM 的三个主题

Model : 基本上就是资料源，API 或是资料库都有可能。
ViewModel : 会从 model 抓取 view 所需要的资料，并且维护 state。
View : 纯 UI，以 web 来说就是纯 html。

图片来源: educative-Acing the JavaScript Design Patterns Interview

认真说，我第一眼看到就觉得，viewModel 的功能怎麽和 MVP 的 presenter 有点像呢 ? 这里有几个重点和 MVP 与 MVC 不太一样。

view 与 model 本身有 data binding，由 view model 这实作，
MVP 的 view 有一些画面逻辑，而 MVVM 的 view 就是纯画面例如 web html。

范例

这里的范例我直接从 educative 内的范例来抓下重点部份来说明。

Model : 这里主要有使用 pub/sub 模式，当 model 有什麽变化时，会去通知 observer ( Ex. setNameValue 这里面 )，这里没有用 EventEmitter (nodejs) 主要的原因在於，这个范例是前端用的。
ViewModel : 这个范例中，它几乎是实作了 date-binding 也就是将 view 与 model 进行双向绑定，当 model 资料有变动就会去更新 view，反之也是。
View : 就是纯 html 了。

// Model
class Model {
  constructor () {
    this.model = { name: 'Mark' }
    this.observers = []
  }

  subscribe (observer) {
    this.observers.push(observer)
  }

  notifyObservers (attrName, newVal) {
    for (let i = 0; i < this.observers.length; i++) {
      this.observers[i](attrName, newVal)
    }
  }

  getCurrentName (nameKey) {
    return this.model[nameKey]
  }

  setNameValue (nameKey, value) {
    this.model[nameKey] = value
    this.notifyObservers(nameKey, value)
  }
}

// ViewModel

class ViewModel {
  constructor (model) {
    this.bind = function (viewElement, modelElement) {
      // 将 view element 与 model element 绑在一起。
      viewElement.value = model.getCurrentName(modelElement)
      // 当 view 有什麽事件时，会执行 model 的事件
      viewElement.addEventListener('input', () => {
        model.setNameValue(viewElement.name, viewElement.value)
      })
      // 当 model 发生变化时，会自动修改 view 的值
      model.subscribe((attrName, newValue) => {
        document.getElementsByName(attrName).forEach((elem) => {
          elem.value = newValue.toUpperCase()
        })
      })
    }
  }
}

// View 纯 HTML
<input type="text" name = "name" id="name">

// 使用时
const nameInput = document.getElementById('name');
const model = new Model()
const viewModel = new ViewModel(model);
viewModel.bind(nameInput, 'name');