摘要：實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的訂閱觀察者類，這個(gè)類被用于在數(shù)據(jù)修改時(shí)通知各個(gè)以觸發(fā)對(duì)應(yīng)的更新，從而實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)，這個(gè)會(huì)在后續(xù)的數(shù)據(jù)響應(yīng)化里提到。

observer 實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的訂閱觀察者類，這個(gè)類被用于在數(shù)據(jù)修改時(shí)通知各個(gè) watcher 以觸發(fā)對(duì)應(yīng)的更新，從而實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)，這個(gè)會(huì)在后續(xù)的數(shù)據(jù)響應(yīng)化里提到。

原文地址
項(xiàng)目地址

dep 被 watcher 引用

A dep is an observable that can have multiple

directives subscribing to it.
(dep 是一個(gè)可以被多個(gè)指令訂閱的觀察者)

// src/observer/dep.js

import { toArray } from "../util/index"

let uid = 0

export default function Dep () {
  this.id = uid++
  this.subs = []
}

Dep.target = null

Dep.prototype.addSub = function (sub) {
  this.subs.push(sub)
}

Dep.prototype.removeSub = function (sub) {
  this.subs.$remove(sub)
}

Dep.prototype.depend = function () {
  Dep.target.addDep(this)
}

Dep.prototype.notify = function () {
  var subs = toArray(this.subs)
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update()
  }
}

代碼量很少，但是幾個(gè)點(diǎn)暫時(shí)不明，一個(gè)是 this.subs.$remove(sub), 貌似是給數(shù)組添加了一個(gè) remove 方法， target 擁有 addDep 方法， subs的 item 擁有 update 方法

更正，dep 類用來(lái)做依賴采集，是一個(gè)簡(jiǎn)單的訂閱-觀察者模式，而 target 和 subs 用于存放 watcher，dep 類用于數(shù)據(jù)響應(yīng)化的實(shí)現(xiàn)，在后續(xù)會(huì)講到這個(gè)

實(shí)現(xiàn)了 arrayMethods 類，該類繼承了 array 對(duì)象：

...
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
...

同時(shí)還對(duì) array 拓展了 $set $remove 方法， 這就是在 dep.js 里使用到的 $remove 方法

def(
  arrayProto,
  "$set",
  function $set (index, val) {
    if (index >= this.length) {
      this.length = index + 1
    }
    return this.splice(index, 1, val)[0]
  }
)
def(
  arrayProto,
  "$remove",
  function $remove (item) {
    /* istanbul ignore if */
    if (!this.length) return
    var index = indexOf(this, item)
    if (index > -1) {
      return this.splice(index, 1)
    }
  }
)

def 方法的實(shí)現(xiàn)：

export function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

除此之外， arrayMethods 重寫了

"push",
"pop",
"shift",
"unshift",
"splice",
"sort",
"reverse"

這些原型方法：

;[
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse"
]
.forEach(function (method) {
  // cache original method
  var original = arrayProto[method]
  def(arrayMethods, method, function mutator () {
    // avoid leaking arguments: 避免泄露參數(shù) arguments
    // http://jsperf.com/closure-with-arguments
    var i = arguments.length
    var args = new Array(i)
    while (i--) {
      args[i] = arguments[i]
    }
    var result = original.apply(this, args)
    var ob = this.__ob__
    var inserted
    switch (method) {
      case "push":
        inserted = args
        break
      case "unshift":
        inserted = args
        break
      case "splice":
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

通過改寫數(shù)組的幾個(gè)原型方法，從而能夠在開發(fā)者操作 data 數(shù)組時(shí)，能夠觸發(fā)更新事件： ob.dep.notify()

index.js 實(shí)現(xiàn)了 Observer 類， 觀察者類綁定了每一個(gè)被觀察的對(duì)象，一旦綁定，Observer 類會(huì)將目標(biāo)對(duì)象的屬性property keys 轉(zhuǎn)化為 getter/setters, 以收集依賴關(guān)系和分派更新

/**
 * Observer class that are attached to each observed
 * object. Once attached, the observer converts target
 * object"s property keys into getter/setters that
 * collect dependencies and dispatches updates.
 *
 * @param {Array|Object} value
 * @constructor
 */
export function Observer (value) {
  this.value = value
  this.dep = new Dep()
  def(value, "__ob__", this)
  if (isArray(value)) {
    var augment = hasProto
      ? protoAugment
      : copyAugment
    augment(value, arrayMethods, arrayKeys)
    this.observeArray(value)
  } else {
    this.walk(value)
  }
}
...

從構(gòu)造函數(shù)可以知道之前代碼里一直出現(xiàn)的 _ob_ 屬性就是指 Observer 類

其中 hasProto 實(shí)現(xiàn)在 util/env 中：

export const hasProto = "__proto__" in {}

實(shí)現(xiàn)的原理是利用 Object 的 Geeter 和 Setter：

/**
 * Define a reactive property on an Object.
 *
 * @param {Object} obj
 * @param {String} key
 * @param {*} val
 */

export function defineReactive (obj, key, val) {
  var dep = new Dep()

  // cater for pre-defined getter/setters
  var getter, setter
  if (config.convertAllProperties) {
    var property = Object.getOwnPropertyDescriptor(obj, key)
    if (property && property.configurable === false) {
      return
    }
    getter = property && property.get
    setter = property && property.set
  }

  var childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
        }
        if (isArray(value)) {
          for (var e, i = 0, l = value.length; i < l; i++) {
            e = value[i]
            e && e.__ob__ && e.__ob__.dep.depend()
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val
      if (newVal === value) {
        return
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = observe(newVal)
      dep.notify()
    }
  })
}