使用 JavaScript Proxy 实现简单的数据绑定 #29

hanyueqiang · 2020-12-13T15:53:38Z

<body>
  <input type="text" id="model">
  <p id="word"></p>
</body>

<script>
  const model = document.getElementById("model")
  const word = document.getElementById("word")
  var obj= {};

  const newObj = new Proxy(obj, {
      get: function(target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
      },
      set: function(target, key, value, receiver) {
        console.log('setting',target, key, value, receiver);
        if (key === "text") {
          model.value = value;
          word.innerHTML = value;
        }
        return Reflect.set(target, key, value, receiver);
      }
    });

  model.addEventListener("keyup",function(e){
    newObj.text = e.target.value
  })
</script>

hanyueqiang · 2020-12-13T15:54:02Z

参考：Advanced-Frontend/Daily-Interview-Question#123

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

使用 JavaScript Proxy 实现简单的数据绑定 #29

使用 JavaScript Proxy 实现简单的数据绑定 #29

hanyueqiang commented Dec 13, 2020

hanyueqiang commented Dec 13, 2020

使用 JavaScript Proxy 实现简单的数据绑定 #29

使用 JavaScript Proxy 实现简单的数据绑定 #29

Comments

hanyueqiang commented Dec 13, 2020

hanyueqiang commented Dec 13, 2020