JavaScript 中的数据双向绑定

// 这是将要被劫持的对象
const data = {
  name: '',
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function (key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function () {
      console.log(`get`)
    },
    set: function (newValue) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`set`)
      console.log(newValue)
    },
  })
})

data.name = 'new name'

// 首先实现一个订阅发布中心，即消息管理员（Dep），它负责储存订阅者和消息的分发，不管是订阅者还是发布者都需要依赖于它
const Vue = (function() {

  let uid = 0

  // 用于储存订阅者并发布消息
  class Dep {

    constructor() {
      this.id = uid++  // 设置 id 用于区分新 Watcher 和只改变属性值后新产生的 Watcher
      this.subs = []   // 储存订阅者的数组
    }

    // 触发 target 上的 Watcher 中的 addDep 方法，参数为 dep 的实例本身
    depend() {
      Dep.target.addDep(this)
    }

    // 添加订阅者
    addSub(sub) {
      this.subs.push(sub)
    }

    notify() {
      // 通知所有的订阅者（Watcher）触发订阅者的相应逻辑处理
      this.subs.forEach(sub => sub.update())
    }
  }

  // 为 Dep 类设置一个静态属性，默认为 null，工作时指向当前的 Watcher
  Dep.target = null
  
  // 现在我们需要实现监听者（Observer），用于监听属性值的变化
  // 监听者，监听对象属性值的变化
  class Observer {

    constructor(value) {
      this.value = value
      this.walk(value)
    }

    // 遍历属性值并监听
    walk(value) {
      Object.keys(value).forEach(key => this.convert(key, value[key]))
    }

    // 执行监听的具体方法
    convert(key, val) {
      defineReactive(this.value, key, val)
    }

  }

  function defineReactive(obj, key, val) {

    const dep = new Dep()

    // 给当前属性的值添加监听
    let chlidOb = observe(val)
    
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: () => {
        // 如果 Dep 类存在 target 属性，将其添加到 dep 实例的 subs 数组中
        // target 指向一个 Watcher 实例，每个 Watcher 都是一个订阅者
        // Watcher 实例在实例化过程中，会读取 data 中的某个属性，从而触发当前 get 方法
        if (Dep.target) {
          dep.depend()
        }
        return val
      },
      set: newVal => {
        if (val === newVal) return
        val = newVal
        // 对新值进行监听
        chlidOb = observe(newVal)
        // 通知所有订阅者，数值被改变了
        dep.notify()
      },
    })
  }

  function observe(value) {
    // 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
    if (!value || typeof value !== 'object') {
      return
    }
    return new Observer(value)
  }


  // 我们还需要实现一个订阅者（Watcher）
  class Watcher {

    constructor(vm, expOrFn, cb) {
      this.depIds = {}        // hash 储存订阅者的 id，避免重复的订阅者
      this.vm = vm            // 被订阅的数据一定来自于当前 Vue 实例
      this.cb = cb            // 当数据更新时想要做的事情
      this.expOrFn = expOrFn  // 被订阅的数据
      this.val = this.get()   // 维护更新之前的数据
    }

    // 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员（Dep）调用
    update() {
      this.run()
    }

    addDep(dep) {
      // 如果在 depIds 的 hash 中没有当前的 id，可以判断是新 Watcher，因此可以添加到 dep 的数组中储存
      // 此判断是避免同 id 的 Watcher 被多次储存
      if (!this.depIds.hasOwnProperty(dep.id)) {
        dep.addSub(this)
        this.depIds[dep.id] = dep
      }
    }

    run() {
      const val = this.get()
      console.log(val)
      if (val !== this.val) {
        this.val = val
        this.cb.call(this.vm, val)
      }
    }

    get() {
      // 当前订阅者（Watcher）读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
      Dep.target = this
      const val = this.vm._data[this.expOrFn]
      // 置空，用于下一个 Watcher 使用
      Dep.target = null
      console.log(Dep.target, 2)
      return val
    }
  }

  
  // 将上述方法挂载在 Vue 上
  class Vue {

    constructor(options = {}) {
      // 简化了 $options 的处理
      this.$options = options
      // 简化了对 data 的处理
      let data = (this._data = this.$options.data)
      // 将所有 data 最外层属性代理到 Vue 实例上
      Object.keys(data).forEach(key => this._proxy(key))
      // 监听数据
      observe(data)
    }

    // 对外暴露调用订阅者的接口，内部主要在指令中使用订阅者
    $watch(expOrFn, cb) {
      new Watcher(this, expOrFn, cb)
    }

    _proxy(key) {
      Object.defineProperty(this, key, {
        configurable: true,
        enumerable: true,
        get: () => this._data[key],
        set: val => {
          this._data[key] = val
        },
      })
    }

  }

  return Vue
})()


// 使用
let demo = new Vue({
  data: {
    text: '',
  },
})

const p = document.getElementById('p')
const input = document.getElementById('input')

input.addEventListener('keyup', function(e) {
  demo.text = e.target.value
});

demo.$watch('text', str => p.innerHTML = str)

let demo = new Vue({
  data: {
    list: [1],
  },
})

const list = document.getElementById('list')
const btn = document.getElementById('btn')

btn.addEventListener('click', function () {
  demo.list.push(1)
})

const render = arr => {
  const fragment = document.createDocumentFragment()
  for (let i = 0; i < arr.length; i++) {
    const li = document.createElement('li')
    li.textContent = arr[i]
    fragment.appendChild(li)
  }
  list.appendChild(fragment)
}

// 监听数组，每次数组变化则触发渲染函数，然而却无法监听
demo.$watch('list', list => render(list))

setTimeout(
  function () {
    alert(demo.list)
  },
  5000,
)

// 首先获取 Array 原型
const oldMethod = Object.create(Array.prototype)
const newMethod = []

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  // 在 newMethod 上进行方法的重写
  // 这里需要注意的是重写的方法是定义在 newMethod 的属性上而不是其原型属性（newMethod.__proto__ 没有改变）
  newMethod[method] = function () {
    console.log(`监听到数组的变化`)
    return oldMethod[method].apply(this, arguments)
  }
})

let list = [1, 2]
// 将需要监听的数组的原型指针指向我们重新定义的新对象
list.__proto__ = newMethod
list.push(3)

// 如果不设定指向，则默认使用原生的方法
let list2 = [1, 2]
list2.push(3)

Object.keys(value).forEach(key => this.convert(key, value[key]))

const list = document.getElementById('list')
const btn = document.getElementById('btn')

// 渲染列表
const Render = {

  // 初始化
  init: function(arr) {
    const fragment = document.createDocumentFragment()
    for (let i = 0; i < arr.length; i++) {
      const li = document.createElement('li')
      li.textContent = arr[i]
      fragment.appendChild(li)
    }
    list.appendChild(fragment)
  },

  // 我们只考虑了增加的情况，仅作为示例
  change: function(val) {
    const li = document.createElement('li')
    li.textContent = val
    list.appendChild(li)
  },
};

// 初始数组
const arr = [1, 2, 3, 4]

// 监听数组
const newArr = new Proxy(arr, {
  get: function(target, key, receiver) {
    console.log(key)
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, value, receiver) {
    console.log(target, key, value, receiver)
    if (key !== 'length') {
      Render.change(value)
    }
    return Reflect.set(target, key, value, receiver)
  },
})

// 初始化
window.onload = function() {
  Render.init(arr)
}

// push 数字
btn.addEventListener('click', function() {
  newArr.push(6)
})