JavaScript-数据劫持

2021-12-22 21:01:58 阅读：233 来源： 互联网

标签：function 劫持 obj target 收集器 Dep JavaScript key 数据

let data = { a: 1 }// 数据响应性
observe(data)
// 初始化观察者 
new Watcher(data, 'name', updateComponent)
data.a = 2

// 依赖收集器 
class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    this.subs.push(sub)
  }
  notify() {
    this.subs.map(sub => {
      sub.update()
    })
  }
}
Dep.target = null
// 观察者 
class Watcher { 
  constructor(obj, key, cb) {
    Dep.target = this
    this.cb = cb
    this.obj = obj
    this.key = key
    this.value = obj[key]
    Dep.target = null
  }
  addDep(Dep) {
    Dep.addSub(this)
  }
  update() {
    this.value = this.obj[this.key]
    this.cb(this.value)
  }
  before() {
    callHook('beforeUpdate')
  }
}
// 简单表示用于数据更新后的操作 
function updateComponent() {
  // vm._update() // patchs
  console.log('bei修改！！！！！')
}

// 监视对象 
function observe(obj) {
  // 遍历对象，使用 get/set 重新定义对象的每个属性值
  Object.keys(obj).map(key => {
    defineReactive(obj, key, obj[key])
  })
}


function defineReactive(obj, k, v) {
  // 递归子属性
  if (typeof(v) == 'object') observe(v)
  // 新建依赖收集器
  let dep = new Dep()
  // 定义 get/set
  Object.defineProperty(obj, k, {
    enumerable: true, 
    configurable: true, 
    get: function reactiveGetter() {
      // 当有获取该属性时，证明依赖于该对象，因此被添加进收集器中
      if (Dep.target) {
        dep.addSub(Dep.target)
      }
      return v
    },// 重新设置值时，触发收集器的通知机制
    set: function reactiveSetter(nV) {
      v = nV
      dep.nofify()
    },
  })
}

标签：function,劫持,obj,target,收集器,Dep,JavaScript,key,数据
来源： https://blog.csdn.net/song854601134/article/details/122094779

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-数据劫持