监听属性改变defineProperty和文档碎片createDocumentFragment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ll</title>
</head>
<body>
<div id="el">
  <div>xxx</div>
  <div>yyy</div>
</div>
<script>
  const obj = {aaa: 111};
  Object.defineProperty(obj, 'aaa', {
    // value: 222,//不可与getter/setter同时使用
    // writable: true,//属性不是对象的初始属性,默认false,否则默认为true,不可重新赋值,不可与getter/setter同时使用
    // configurable: true,//默认false,属性不可被删除(浏览器严格模式下delete属性会报错)
    // enumerable: true,//属性不是对象的初始属性,默认false,否则默认为true,不可被枚举
    get() {
      return value
    },
    set(newValue) {
      console.log('赋值时会运行')
      value = newValue
    }
  });
  obj.aaa = 333
  console.log(obj)
  console.log(Object.keys(obj))

  var el = document.getElementById('el')
  var df = document.createDocumentFragment()
  let child = null
  while (child = el.firstChild) {
    df.appendChild(child)
  }
  df.childNodes.forEach(li => {
    if (li.nodeType === 1) {//元素节点
      li.innerText = new Date().getTime()
    } else if (li.nodeType === 3) {//文本节点
    } else {
    }
  })
  el.appendChild(df)
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/linding/p/14481837.html