MVVM

1. MVVM
   在说MVVM之前我们首先使用一下Object.defineProperty()方法。

let frank = {
  _data: {
    name: 'frank',
    age: 18
  }
}
Object.defineProperty(frank,'age',{
  get: function(){
    console.log('frank.age被读取了')
    return frank._data.age
    //读age的时候，返回上面那个，为什么我们会多添加一个_data，然后返回的也是frank._data.age，而不是frank.age，可以修改尝试一下，无限循环。
  },
  set: function(xxx){
    console.log('frank.age被设置了')
    frank._data.age = xxx
    console.log(frank)
  }
})

当我们写下这段代码时，frank会添加一个新的属性age，然后当我们读取或改变这个属性的时候，都会有相应的通知。

frank.age   //'frank.age被读取了'
frank.age = 20   //'frank.age被设置了'

接下来，我们在html中添加一个form表单，其中含有一些input元素。

<form >
    <p>姓名<input type="text" name="name"></p>
    <p>年龄<input type="number" name="age"></p>
    <input type="submit" value="提交">
  </form>

将JavaScript中的代码改成：

let frank = {
  _data: {
    name: 'frank',
    age: 18
  }
}
for(let key in frank._data){
  Object.defineProperty(frank,key,{
    get: function(){
      console.log('frank.'+key+'被读取了')
      return frank._data[key]
    },
    set: function(xxx){
      console.log('frank.'+key+'被设置了')
      //当我修改frank的属性时，input中的值会立即改变
      $('input[name='+key+']').val(xxx)   
      frank._data[key] = xxx
      console.log(frank)
    }
  })
}
$('form').on('input','input[name]',function(e){
  let $input = $(e.target)
  let name = $input.attr('name')
  let val = $input.val()
//当我修改视图中的值时，frank中的值会立即改变
  frank[name] = val
})
$('input[name="name"]').val(frank.name)
$('input[name="age"]').val(frank.age)

上面的代码基本实现了数据层M和视图层V的相互交互，两头相互监听，一旦一方改变，另一方就会有变化。上面的defineProperty和我们DOM事件都是同步的。
缺点：

• MVVM里一个缺点就是V和M是同步的，当我们有一点改变时，另一方都会立马改变，这样会非常占用cpu。如果用户频繁的改动就会造成卡顿。
• 另一个缺点就是，如果我们的html里有
  <p>爱好<input type="text" name="hobby"></p>
  而_data里面没有相应的属性值，我们就不能设置其与数据的同步，这时候，我们需要一个API，将hobby设置到_data和frank中
  createGetAndSet('hobby',0)

http://js.jirengu.com/magef/1/edit?html,js,output