没事写了个双向绑定(defineProperty&&Proxy) #14

xiaohesong · 2018-12-04T09:41:48Z

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试</title>
</head>
<body>
  Name: <input class='input' name='input'/>
  add: <button class='button'>+</button>
</body>
<script>
let input = document.querySelector('.input')
let button = document.querySelector('.button')
let num = 0

button.addEventListener('click', function(){
  num++
  input.value = num
})

let proxy = new Proxy(input, {
  set(trapTarget, key, value, receiver) {
    if (isNaN(value)) {
      throw new TypeError("Property must be a number.");
    }

    return Reflect.set(trapTarget, key, value, receiver);
  }
})

Object.defineProperty(input, 'value', {
  enumerable: true,
  value: '',
  get: function () {
    console.log('get this value is', this._value)
    return this._value
  },
  set: function (val) {
    console.log('set this value is', val)
    this._value = val
  }
})


</script>
</html>

xiaohesong added the example 一些例子 label Dec 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

没事写了个双向绑定(defineProperty&&Proxy) #14

没事写了个双向绑定(defineProperty&&Proxy) #14

xiaohesong commented Dec 4, 2018

没事写了个双向绑定(defineProperty&&Proxy) #14

没事写了个双向绑定(defineProperty&&Proxy) #14

Comments

xiaohesong commented Dec 4, 2018