js数据劫持升级版（解决基础版的问题）

针对上篇文章遗留的问题进行分析设计

 // 准备原始数据

    // const data = { name: 'Jack', age: 18 }

    // // 开始劫持

    // // 进行 data 的遍历

    for (let k in data) {

      // 使用数据劫持

      Object.defineProperties(data, {

        // 当 k === 'name' 的时候, 设置的 _name = xxx

        // 当 k === 'age' 的时候, 设置的 _age = xxx

        ['_' + k]: {

          value: data[k],

          writable: true

        },

        // 继续去劫持

        // 劫持 data 内的 _name 和 _age

        [k]: {

          get () { return data['_' + k] },

          set (val) {

            data['_' + k] = val

            console.log('渲染页面的操作')

          }

        }

      })

    }

    console.log(data)

 实现的代码如下

    // 一个小小的案例
    const box = document.querySelector('div')

    // 提前记录 div 内的文本内容
    const text = box.innerHTML

    // 准备原始数据
    const data = { name: 'Rose', age: 20, gender: '男' }

    // 准备一个渲染页面的函数
    bindHtml()
    function bindHtml() {
      let res = text
      for (let k in data) {
        const reg = new RegExp(`{{ ${ k } }}`)
        res = res.replace(reg, data[k])
      }
      box.innerHTML = res
    }

    // 今后只要你的数据变化, 就要从新渲染页面
    // 对 data 进行劫持
    for (let k in data) {
      Object.defineProperties(data, {
        ['_' + k]: {
          value: data[k],
          writable: true
        },
        [k]: {
          enumerable: true,
          get () { return data['_' + k] },
          set (val) {
            data['_' + k] = val
            bindHtml()
            console.log('会重新渲染页面')
          }
        }
      })
    }

    // 从今以后, 我只要关注, data 内的数据什么时候改变即可
    // console.log(data)

    // 关注数据
    data.classRoom = '001'
    console.log(data)

运行结果：