MVVM学习记录

2017-08-16  本文已影响9人  放风筝的小小马

使用Object.defineProperty方法,然后通过get和set方法设置对象属性,可以让我们知道对象什么时候被更改了,也就是说,别人对对象的操作,我们都可以知道,记住这句话

image.png

MVVM

M:指Model
V:值View
实现过程:当M变化时通知V,V变化时通知M;

一个简单的代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .red{
    color: red;
  }
  </style>
</head>
<body>
  <form>
    <p>姓名<input type="text" name="name">
    <p>年龄<input type="number" name="age">
    <p><input type="submit" value="提交">
  </form>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
var frank = {
  _data: {
    age: 18,
    name: 'frank'
  }
}
Object.defineProperty(frank, 'age', {
  get: function(){
    console.log('frank.age 被读取了')
    return frank._data.age
  },
  set: function(xxx){
    console.log('frank.age 被设置了')
    $('input[name="age"]').val(xxx)
    frank._data.age = xxx
    if(xxx>20){
      $('form').addClass('red')
    }
  }
})

Object.defineProperty(frank, 'name', {
  get: function(){
    console.log('frank.name 被读取了')
    return frank._data.name
  },
  set: function(xxx){
    console.log('frank.name 被设置了')
    $('input[name="name"]').val(xxx)
    frank._data.name = xxx
    

  }
})

$('form').on('input', 'input[name]', function(e){
  let $input = $(e.currentTarget)
  let name = $input.attr('name')
  let value = $input.val()
  frank[name] = value
})

$('input[name="name"]').val(frank.name)
$('input[name="age"]').val(frank.age)

$('form').on('submit', function(e){
  e.preventDefault()
  console.log(frank)
})

setInterval(function(){
  frank.age ++
},1000)

MVVM的缺点

image.png

Vue Tip

image.png

知识点

经验

上一篇 下一篇

猜你喜欢

热点阅读