// 一個(gè)快速賦值的語(yǔ)法糖函數(shù), 可以創(chuàng)建結(jié)構(gòu)為 { value: a { b: { val: ''} } } 的對(duì)象
vx.set('value.a.d', { val: '' })
// 對(duì)某個(gè)屬性進(jìn)行偵聽(tīng), 如果發(fā)生改變, 則執(zhí)行相應(yīng)函數(shù)(可多次watch以執(zhí)行多個(gè)函數(shù))
vx.watch('value.a.d.val', newVal => {
 console.log(`val改變?yōu)?: `, newVal)
})
value.a.d.val = 3 // val改編為 : 3

class Dep {
 constructor () {
 this.subs = []
 }
 // 將回調(diào)添加到數(shù)組中
 addSub (fn) { /*...*/ }
 delSub (fn) { /*...*/ }
 // 執(zhí)行數(shù)組中每一項(xiàng)函數(shù)
 notify (newVal, oldVal) {
 this.subs.forEach(func => func(newVal, oldVal))
 }
}

// @param obj 要在其上定義屬性的對(duì)象
// @param key 要定義或修改的屬性的名稱
Object.defineProperty(obj, key, {
 // 該屬性是否能被枚舉
 enumerable: true,
 // 該屬性能否被刪除
 configurable: true,
 // 訪問(wèn)該屬性則會(huì)執(zhí)行此方法
 get: () => {
 return val
 },
 // 修改該屬性時(shí)會(huì)執(zhí)行此方法
 set: newVal => {
 val = newVal
 },
 // value & writeble 不能和 getter/setter 同時(shí)出現(xiàn)
})

set (key, val, options = {}, obj = this.store) {
 const dep = new Dep()
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: () => {
  return val
 },
 set: newVal => {
  if (newVal === val) {
  return
  }
  dep.notify(newVal, val)
  val = newVal
 }
 })
}

set (key, val, options = {}, obj = this.store) {
 const dep = new Dep()
 Object.defineProperty(obj, key, {})
+ return dep
}
const valueDep = set('value', b, {})
valueDep.addSub(() => { console.log('value changed!') })

class VX {
 constructor () {
 this.store = Object.create(null)
 }
 watch (key, fn, obj = this.store) {}
 set (key, val, options = {}, obj = this.store) {}
}
const vx = new VX()

+ // 一開(kāi)始沒(méi)有持有dep實(shí)例
+ let handleDep = null
 class VX {
 watch (key, fn, obj = this.store) {
+  console.log(obj.key) // 使用任意操作觸發(fā)obj.key的getter, 那么handleDep將自動(dòng)引用obj.key的dep實(shí)例
+  handleDep.addSub(fn)
 }
 set (key, val, options = {}, obj = this.store) {
  const dep = new Dep()
  Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: () => {
+   handleDep = dep
   return val
  },
  set: newVal => {}
  })
 }
 }

let handleFn = null
class Dep {
 addSub (fn) {}
 delSub (fn) {}
 clear () {}
 collect (fn = handleFn) {
 if (fn && !this.subs.find(x => x === fn)) {
  this.addSub(fn)
 }
 }
 notify (newVal, oldVal) {}
}

let handleDep = null
class VX {
 watch (key, fn, obj = this.store) {
 handleFn = fn
 console.log(obj.key)
 }
 set (key, val, options = {}, obj = this.store) {
 const dep = new Dep()
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: () => {
  handleDep = dep
  handleDep.collect()
  return val
  },
  set: newVal => {}
 })
 }
}

// 通過(guò)將字符串'a.b'分割為['a', 'b'], 再使用一個(gè)while循環(huán)就可以走完這個(gè)對(duì)象鏈
function walkChains (key, obj) {
 const segments = key.split('.')
 let deepObj = obj
 while (segments.length) {
 deepObj = deepObj[segments.shift()]
 }
}
class VX {
 watch (key, fn, obj = this.store) {
 handleFn = fn
 walkChains(key, obj)
 }
}

set (key, val, obj) {
 const segments = key.split('.')
 // 這里需要注意, 我們只處理到倒數(shù)第二個(gè)屬性
 while (segments.length > 1) {
 const handleKey = segments.shift()
 const handleVal = obj[handleKey]
 // 存在'obj.a'的情況
 if (typeof handleVal === 'object') {
  obj = handleVal
 // 不存在'obj.a'則給a屬性賦一個(gè)非響應(yīng)式的對(duì)象
 } else if (!handleVal) {
  obj = (
  key = handleKey,
  obj[handleKey] = {},
  obj[handleKey]
  )
 } else {
  console.trace('already has val')
 }
 }
 // 最后一個(gè)屬性要手動(dòng)賦值
 key = segments[0]
}

// app.js
import VX from '@/utils/suites/vx'
const vx = new VX()
app.vx = vx
app.store = vx.store
app.vx.set('userType', '商戶')

// page a
onLoad () {
 app.vx.watch('userType', userType => {
 if (userType === '商戶') {
  // ...
 } else if (userType === '管理員') {
  // ...
 }
 }, {
 immediate: true
 })
}

// page b
switchUserType () {
 app.store.userType = '管理員'
}

class VX {
 async watch (key, fn, options = { immediately: false }, obj = this.store) {
 handleDep = fn
 walkChains(key, obj)
 options.immediately && await fn(options.defaultParams)
 }
}

+ function walkChains (key, obj, fn) {
 const segments = key.split('.')
 let deepObj = obj
 while (segments.length) {
  deepObj = deepObj[segments.shift()]
+  fn && fn()
 }
 }
del (key, obj = this.store) {
 walkChains(key, obj, handleDep.clear)
 delete obj[key]
}

del (key, obj = this.store) {
+ walkChains(key, obj, () => handleDep.clear())
 delete obj[key]
 }