千家信息网

Java中怎么实现实现一个简单得数据响应系统

发表于:2024-10-25 作者:千家信息网编辑
千家信息网最后更新 2024年10月25日,这篇文章主要介绍"Java中怎么实现实现一个简单得数据响应系统",在日常操作中,相信很多人在Java中怎么实现实现一个简单得数据响应系统问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希
千家信息网最后更新 2024年10月25日Java中怎么实现实现一个简单得数据响应系统

这篇文章主要介绍"Java中怎么实现实现一个简单得数据响应系统",在日常操作中,相信很多人在Java中怎么实现实现一个简单得数据响应系统问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"Java中怎么实现实现一个简单得数据响应系统"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1、Dep

其实,这就是一个依赖收集的容器, depend 收集依赖, notify 触发依赖

class Dep{  constructor() {    this._subs = [];  }  depend () {    this._subs.push(Dep.target)  }  notify() {    this._subs.forEach(item => {      item.fn();    })  }}// 其实就是 dep 和 watcher 基情满满的开始,watcher 中用到// 通过一个全局属性来存 watcherDep.target = null;function pushTarget(watch) {  Dep.target = watch;}function popTarget() {  Dep.target = null;}

2、了解 obverser

递归,将 data 对象所有属性转化为访问器属性

// 转为访问器属性function defineReactive (obj, key, val, shallow) {  // 创建一个依赖收集容器  let dep = new Dep();  let childOb = !shallow && observe(val)  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactiveGetter () {      if(Dep.target) {        // 收集依赖        dep.depend();      }      return val;      // ...    },    set: function reactiveSetter (newVal) {      if(newVal === val) return;      // 继续递归遍历      observe(newVal);      // 触发依赖      dep.notify();      // ...    }  })}class Observer{  constructor(data) {    this.walk(data);  }  walk(data) {    const keys = Object.keys(data)    for (let i = 0; i < keys.length; i++) {      defineReactive(data, keys[i], data[keys[i]])    }  }}// 递归,将 data 对象所有属性转化为访问器属性function observe (data) {  if(Object.prototype.toString.call(data) !== '[object Object]') return;  new Observer(data);}

此时就可以把任意一个对象的全部属性转为访问器

3、了解 watch 和 observer

const data = {  a: 1,  b: 2}// 首先监控一个对象observe(data);

watcher 的主要功能是检测某个属性,当属性变化时触发一个回调

class Watcher{  /**  * @params {Function} exp 一个属性表达式  * @params {Function} fn 回调  */  constructor(exp, fn) {    this.exp = exp;    this.fn = fn;    // 存 watcher    // Dep.target = this;    pushTarget(this);    // 先执行一次表达式函数,会在调用过程中,    // 触发到 data.a 的访问器, data.a 的 get 被执行,    // 触发 dep.depend() 开始收集依赖    this.exp();    // 释放 Dep.target    popTarget();  }}// new Watcher 这样一个依赖就被收集了new Watcher(() => {  return data.a + data.b;}, () => {  console.log('change')})

4、触发依赖

data.a = 3; // changedata.b = 3; // change

到此,关于"Java中怎么实现实现一个简单得数据响应系统"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0