把本身对这MVVM设想形式的明白整顿并纪录，仅作本身今后查询之用。

先说前端为何须要 MVVM 或许 FLUX。在我看来，是为了保证不那么优异的前端er在团队中写出不那么渣滓的代码，纵然确切非常渣滓，也不会污染到团队中其他同事的代码，别的的设想形式应当也具有这类作用。

经由过程代码对照明白MVVM

MVVM 是 Model-View-ViewModel （双向数据绑定）的简写。不管是 MVVM 或许是 FLUX， 都强调的是视图和数据的星散。MVVM 是将视图和数据星散以后，经由过程 ViewModel 将数据和视图举行绑定。

View 平常是指模板，比方 Handlerbars ,或许 ES6 的字符串模板,写法以下:

let message = 'hello,world!!'
let demo = `
<div id="demo">
    <p>${message}</p>
</div>
`

然后经由过程 jQuery 插进去 body 中

  $('body').html(demo)

关于 demo 就是 View，message 是此 View 指定的 Model。因为在这个例子中并没有交互，仅仅只是为了申明视图和模子, 所以并没有 VM 部份。

下面的例子是一个完全的用 JQuery 完成的 MVVM 形式写法

//------ Model
let model = {
  value: 1,
  fns: [],
  set: function(v) {
    this.value = v
    this.fns.forEach(fn => fn.call(this, this.value))
  },
  on: function(fn) {
    this.fns.push(fn)
  }
};


//------ View
let demo = `
<div>
<p>${model.value}</p>
<input value='${model.value}' />
<button id="button1">+1</button>
</div>
`

$('body').html(demo)

//------ ViewModel

$('input').on('keyup', function() {
    model.set($(this).val()|0)
})


$('button#button1').on('click', function() {
    model.set(model.value + 1)
})


model.on(function(value) {
  $('p').html(value)
  $('input').val(value)
})

在这个例子中， input输入的内容会及时显现在p标签中，而button被点击以后，也会对p标签的值和input标签的值都做+1处置惩罚；假如我们根据一般的 jQuery 来处置惩罚的话应当怎么做?

$('input').on('keyup', function() {
  let value = $(this).val()|0;
  $('p').html(value)
  $('input').val(value)
})

$('button').on('click', function() {
    let value = $('input').val()|0 + 1;
    $('p').html(value)
    $('input').val(value)
})

从这两段代码来看，并没有太大区分，以至下面一段代码看起来更短。但是下面一段代码将 视图和模子的处置惩罚写到了一同，试想一下，当我们想再增添一个 -1 的button 呢？关于 MVVM的形式，只需再写

<button id='button2'>-1</button>
$('button#button2').on('click', function() {
    model.set(model.value - 1)
})

即可。

而关于传统的体式格局，还须要先取得当前input值或p的值，然后再举行-1操纵，末了还须要将input和p的innerHTML都修正一次。
跟着DOM的增添，处置惩罚难度的差异愈来愈大，愈来愈不容易明白，修正一次，小心翼翼。

经由过程这个小例子能够看出 MVVM 相对传统的写法的最大的上风：

1. 视图和模子的星散，视图能够自力模子举行开辟；只需商定模子的构造即可。

2. 双向数据绑定，视图和模子能够经由过程VM相互转变。

3. 基于商定俗成的形式，能够将烂代码控制在最小范围内，也很难写出烂代码。

ps: 根据我的明白 Angular 中关于基本的VM举行了封装，所以在模板中绑定数据以后，数据更新，会自动更新视图。