全局遍历依赖_深入实践——依赖收集

最新推荐文章于 2023-10-17 17:37:47 发布
最新推荐文章于 2023-10-17 17:37:47 发布
阅读量221 收藏
点赞数
文章标签： 全局遍历依赖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31162865/article/details/112683613
版权

1ae9af0277ba7eccdeff0278be6e700a.png

什么是依赖收集？

在讨论依赖收集前，我们先来回顾下观察者模式。

观察者模式

一种实现一对多关系解耦的行为设计模式。

它主要涉及两个角色：观察目标、观察者。如图：

8c16579a294b1407a72a7d0ea61a184b.png

特点：观察者 要直接订阅 观察目标，观察目标 做出通知后，观察者 就要进行相应处理。

接着，我们看下观察者模式与依赖收集是怎样的关系。

依赖收集

依赖收集是 Vue.js 和 Mobx.js 核心的之一。 以Mobx.js举个例子，可以达到这样的效果：

const obsObject = observable({
    A: 1,
    B: 2,
    C: 3
});

autoRun(() => {
    console.log(obsObject.A + obsObject.C);
    console.log(obsObject.C - obsObject.A);
});

obsObject.B = 4; // 什么都没有发生
obsObject.A = 5;
//  --> 8   observe函数的回调触发了
//  --> -2   observe函数的回调触发了
obsObject.C = 6;
//  --> 11   observe函数的回调触发了
//  --> 1   observe函数的回调触发了

其中最关键的函数在于 autoRun，专业名词叫做依赖收集。

也就是当autoRun用到了什么属性，就会和这个属性挂上钩，从此一旦这个属性发生了改变，就会触发回调。而没有用到的属性，无论怎样修改，它都不会触发回调。

由此引出依赖收集的定义：

依赖收集：通过自然地使用变量，来完成依赖的收集，当变量改变时，根据收集的依赖判断是否需要触发回调。

同时，也能看出依赖收集的场景，也是种一对多的方式，依赖的数据变更了，就一定要做出处理，所以观察者模式非常适用于解决依赖收集的问题。

依赖收集的实现

建议可先看下这篇文章，会便于后面的理解。

Sky.Gu：深入实践 ES6 Proxy & Reflect​zhuanlan.zhihu.com
402c70f8e6dddca63e979c09d8285324.png

尝试来实现一个依赖收集，首先使用Object.defineProperty的实现方式。

Object.defineProperty实现方式

观察目标

首先假设 观察目标 是一个“英雄”。

const hero ={
  name: '赵云',
  hp: 3000,
  sp: 150,
  equipment: ['马', '矛']
};

可以看到观察目标中存在String,Number以及Array这三种类型的属性。

使用Object.defineProperty对这三类属性进行观察，方法如下：

class Observable {
  constructor(obj) {
    return this.walk(obj);
  }

  walk(obj) {
    const keys = Object.keys(obj);
    keys.forEach((key) => {
      this.defineReactive(obj, key, obj[key]);
    })
    return obj;
  }

  defineReactive(obj, key, val) {
    if (Array.isArray(obj[key])) {
      // Array添加push的钩子
      Object.defineProperty(obj[key], 'push', {
        value() {
          this[this.length] = arguments[0];
        }
      })
      Object.defineProperty(obj, key, {
        get() {
          return val;
        }
      })
    } else {
      Object.defineProperty(obj, key, {
        get() {
          return val;
        },
        set(newVal) {
          val = newVal;
        }
      })
    }
  }
}

通过defineReactive函数对数据对象“英雄”的各属性get与set设置了钩子，在get中响应依赖收集，在set中触发监听函数,至此该数据对象变得“可观察”。

现在，任何的读写操作“英雄”都会主动告诉我们，但也仅此而已，我们仍然不知道他是谁。

如果我们希望在修改英雄的hp或sp之后，英雄能够主动告知他的其他信息，这应该怎样才能办到呢？

观察者

Watcher(hero, 'health', () => {
  return hero.hp > 2000 ? '强壮' : '良好';
});

定义了一个watcher作为“观察者”，它监听了hero的health属性。而health属性的值取决于hero.hp（当hero.hp发生变化时，hero.health也应该发生变化，前者是后者的依赖。我们把这个hero.health称为“计算属性”。

下面来构造这个“观察者”。首先，“观察者”接收三个参数，分别是观察目标、被监听的属性以及回调函数，回调函数返回一个该观察目标属性的值。

/**
 * 当计算属性的值被更新时调用
 * @param { Any } val 计算属性的值
 */
function onComputedUpdate (val) {
  console.log(`英雄的健康状况是：${val}`);
}

/**
 * 观察者
 * @param { Object } obj 观察目标
 * @param { String } key 观察目标的key
 * @param { Function } cb 回调函数，返回“计算属性”的值
 */
function watcher (obj, key, cb) {
  Object.defineProperty(obj, key, {
    get () {
      const val = cb();
      onComputedUpdate(val);
      return val;
    },
    set () {
      console.error('计算属性无法被赋值！');
    }
  })
}

// 尝试使用
const hero = new Observable({
  name: '赵云',
  hp: 3000,
  sp: 150,
  equipment: ['马', '矛']
});

watcher(hero, 'health', () => {
  return hero.hp > 2000 ? '强壮' : '良好';
});


hero.health;

hero.hp = 1000;

hero.health;

// -> 我的hp属性被读取了！
// -> 英雄的健康状况是：强壮
// -> 我的hp属性被修改了！
// -> 我的hp属性被读取了！
// -> 英雄的健康状况是：良好

一切都如我们所愿发生了，但细心的同学会发现上述代码中是通过手动读取hero.health来获取“英雄”的健康状况，并不是他主动告诉我们的。如果希望让“英雄”能够在hp属性被修改后，第一时间主动发起通知，该如何实现？

依赖收集器

当观察目标的属性被读写时，会触发它的getter/setter方法。如果在观察目标的getter/setter里面，去执行观察者的onComputedUpdate()方法，就能够实现让观察目标主动发出通知的功能。

由于观察者的onComputedUpdate()方法需要接收回调函数的值作为参数，而观察目标中并没有这个回调函数，所以需要引申出一个依赖管理类dependenceManager，这个类中管理了一个监听函数列表。

这个依赖管理类dependenceManager被称为依赖收集器，实际作用是将观察目标与观察者连接起来，实现如下：

// dependenceManager类
class Dep {
  constructor() {
    this.deps = new Set();  // 监听函数列表
  }

  depend() {
    if (Dep.target ) {
      this.deps.add(Dep.target);
    }
  }

  notify() {
    this.deps.forEach((dep) => {
      dep();
    })
  }
}

Dep.target = null;  // 存放观察者的onComputedUpdate()方法

当一个“可观察”数据对象的属性值发生get行为的时候，将需要监听的函数添加到dependenceManager中对应的监听函数列表；

发生set行为的时候，就会触发遍历dependenceManager中对应的监听函数列表，并且执行。

实现

定义完依赖收集器，我们需要把观察者的onComputedUpdate()方法赋值给Dep.target:

/**
 * 观察者
 * @param { Object } obj 观察目标
 * @param { String } key 观察目标的key
 * @param { Function } cb 回调函数，返回“计算属性”的值
 */
function watcher (obj, key, cb) {
  // 定义一个被动触发函数，当这个“被观测对象”的依赖更新时调用
  const onDepUpdated = () => {
    const val = cb();
    onComputedUpdate(val);
  }

  Object.defineProperty(obj, key, {
    get () {
      Dep.target = onDepUpdated;
      // 执行cb()的过程中会用到Dep.target，
      // 当cb()执行完了就重置Dep.target为null
      const val = cb();
      Dep.target = null;
      return val;
    },
    set () {
      console.error('计算属性无法被赋值！')
    }
  })
}

在观察者内部定义了一个新的onDepUpdated()方法，负责把观察者回调函数的值以及onComputedUpdate()打包赋值给Dep.target。

通过这样的操作，依赖收集器就获得了观察者的回调值以及onComputedUpdate()方法。由于是全局变量，Dep.target理所当然的能够被观察目标的getter/setter所使用。

然后修改观察目标中的defineReactive方法，完成观察目标与观察者的连接。

defineReactive(obj, key, val) {
    const dep = new Dep();
    if (Array.isArray(obj[key])) {
      // Array添加push的钩子
      Object.defineProperty(obj[key], 'push', {
        value() {
          this[this.length] = arguments[0];
          dep.notify(); // 触发观察者回调函数
        }
      })
      Object.defineProperty(obj, key, {
        get() {
          dep.depend(); // 添加观察者回调函数
          return val;
        }
      })
    } else {
      Object.defineProperty(obj, key, {
        get() {
          console.log(`我的${key}属性被读取了！`);
          dep.depend(); // 添加观察者回调函数
          return val;
        },
        set(newVal) {
          console.log(`我的${key}属性被修改了！`);
          val = newVal;
          dep.notify(); // 触发观察者回调函数
        }
      })
    }
  }

下面尝试使用该实现：

const hero = new Observable({
  name: '赵云',
  hp: 3000,
  sp: 150,
  equipment: ['马', '矛']
});

watcher(hero, 'health', () => {
  return hero.hp > 2000 ? '强壮' : '良好';
});

console.log(`英雄初始健康状况：${hero.health}`);

hero.hp = 1000;

// -> 我的hp属性被读取了！
// -> 英雄初始健康状况：强壮
// -> 我的hp属性被修改了！
// -> 我的hp属性被读取了！
// -> 英雄的健康状况是：良好

可以发现，现在“英雄”的任何属性变更都会主动被触发，从而实现了最基本的依赖收集功能。

优化

上述代码示例中，依赖收集器与观察目标完成了模块化，下面将对观察者也进行一次模块优化，并通过更丰富的使用来展示依赖收集的强大功能。

class Dep {
  constructor() {
    this.deps = new Set();
  }

  depend() {
    if (Dep.target) {
      this.deps.add(Dep.target);
    }
  }

  notify() {
    this.deps.forEach((dep) => {
      dep();
    })
  }
}

Dep.target = null;

class Observable {
  constructor(obj) {
    return this.walk(obj);
  }

  walk(obj) {
    const keys = Object.keys(obj);
    keys.forEach((key) => {
      this.defineReactive(obj, key, obj[key]);
    })
    return obj;
  }

  defineReactive(obj, key, val) {
    const dep = new Dep();
    if (Array.isArray(obj[key])) {
      // Array添加push的钩子
      Object.defineProperty(obj[key], 'push', {
        value() {
          this[this.length] = arguments[0];
          dep.notify();
        }
      })
      Object.defineProperty(obj, key, {
        get() {
          dep.depend();
          return val;
        }
      })
    } else {
      Object.defineProperty(obj, key, {
        get() {
          dep.depend();
          return val;
        },
        set(newVal) {
          val = newVal;
          dep.notify();
        }
      })
    }
  }
}

class Watcher {
  constructor(obj, key, cb, onComputedUpdate) {
    this.obj = obj;
    this.key = key;
    this.cb = cb;
    this.onComputedUpdate = onComputedUpdate;
    return this.defineComputed();
  }

  defineComputed() {
    const self = this;
    const onDepUpdated = () => {
      const val = self.cb();
      this.onComputedUpdate(val);
    }

    Object.defineProperty(self.obj, self.key, {
      get() {
        Dep.target = onDepUpdated;
        const val = self.cb();
        Dep.target = null;
        return val;
      },
      set() {
        console.error('计算属性无法被赋值！');
      }
    })
  }
}

const hero = new Observable({
  name: '赵云',
  hp: 3000,
  sp: 150,
  equipment: ['马', '矛']
});

new Watcher(hero, 'health', () => {
  return hero.hp > 2000 ? '强壮' : '良好';
}, (val) => {
  console.log(`英雄的健康状况是：${val}`);
});

new Watcher(hero, 'job', () => {
  return hero.sp < 3000 ? '武将' : '谋士'
}, (val) => {
  console.log(`英雄的职业是：${val}`);
});

new Watcher(hero, 'weapon', () => {
  return hero.equipment;
}, (val) => {
  console.log(`英雄的武器是：${val}`);
});

console.log(`英雄初始健康状况：${hero.health}`);
// -> 英雄初始健康状况：强壮

console.log(`英雄初始职业：${hero.job}`);
// -> 英雄初始职业：武将

console.log(`英雄初始武器：${hero.weapon}`);
// -> 英雄初始武器：马,矛

hero.name = '诸葛亮';
console.log(`英雄的名字是：${hero.name}`);
// -> 英雄的名字是：诸葛亮

hero.hp = 1000;
// -> 英雄的健康状况是：良好

hero.sp = 4000;
// -> 英雄的职业是：谋士

hero.equipment.push('羽扇');
// -> 英雄的武器是：马,矛,羽扇

我们将“英雄”作为观察目标，分别新建了3个观察者（health、job与weapon）,这3个观察者分别依赖观察目标的不同属性的变动而出发响应的回调函数，并在观察目标的属性变更时，主动通知观察者进行处理。

Proxy实现方式

在了解了依赖收集的实现方式后，再尝试使用Proxy的方式实现依赖收集。

主要的改动在于采用Proxy替代Object.defineProperty。

先来看下观察目标Observable类的变动

class Observable {
  constructor(obj) {
    return this._createProxy(obj);
  }

  _createProxy(obj) {
    const dep = new Dep();
    const handler = {
      get(target, key, receiver) {
        // console.log(`我的${key}属性被读取了！`);
        // 加入观察者队列 
        dep.depend(key);
        return Reflect.get(target, key, receiver);
      },
      set(target, key, value, receiver) {
        console.log(`我的${key}属性被修改为${value}了！`);
        //内部调用对应的 Reflect 方法
        const result = Reflect.set(target, key, value, receiver);
        //执行观察者队列
        dep.notify(key);
        return result;
      }
    }
    return new Proxy(obj, handler);
  };
}

内部封装了handler方法，不再需要遍历数据对象的属性即可实现“可观察”，最后返回一个Proxy对象作为观察目标。

再来看下观察者Watcher类的改动

class Watcher {
  constructor(obj, key, callback, onComputedUpdate) {
    this.obj = obj;
    this.key = key;
    this.callback = callback;
    this.onComputedUpdate = onComputedUpdate;
    return this._defineComputed();
  }

  _defineComputed() {
    const self = this
    const onDepUpdated = () => {
      const val = self.callback();
      this.onComputedUpdate(val);
    }

    const handler = {
      get(target, key, receiver) {
        console.log(`我的${key}属性被读取了！`);
        Dep.target = onDepUpdated;
        const val = self.callback();
        Dep.target = null;
        return val
      },
      set() {
        console.error('计算属性无法被赋值！')
      }
    }
    return new Proxy(this.obj, handler);
  }
}

同样，内部封装了handler方法，替换了原Object.defineProperty的getter实现。

最后看下依赖收集器的变动

class Dep {
  constructor() {
    this.deps = new Set();
  }

  depend(key) {
    if (Dep.target) {
      this.deps.add({
        key,
        target:Dep.target
      });
    }
  }

  notify(key) {
    this.deps.forEach((dep) => {
      if(dep.key===key){
        dep.target();
      }
    })
  }
}

Dep.target = null;

由于使用Proxy不再遍历数据对象的属性，为了避免与变更属性不相关的回调函数被执行，需要在添加与触发方法中传入key作为判别参数。

最后封装一个autoRun函数来作为依赖收集的入口

const autoRun = function (handler) {
  handler();
};

让我们使用相同的例子来看下实现结果：

const heroObs = new Observable(hero);

const heroHealth = new Watcher(heroObs, 'health', () => {
  return heroObs.hp > 2000 ? '强壮' : '良好';
}, (val) => {
  console.log(`英雄的健康状况是：${val}`);
});

const heroJob = new Watcher(heroObs, 'job', () => {
  return heroObs.sp < 3000 ? '武将' : '谋士'
}, (val) => {
  console.log(`英雄的职业是：${val}`);
});

autoRun(() => {
  console.log(`英雄初始健康状况：${heroHealth.health}`);
  // -> 我的health属性被读取了！
  // -> 英雄初始健康状况：强壮

  console.log(`英雄初始职业：${heroJob.job}`);
  // -> 我的job属性被读取了！
  // -> 英雄初始职业：武将
});


heroObs.name = '诸葛亮';
// -> 我的name属性被修改为诸葛亮了！

console.log(`英雄的名字是：${heroObs.name}`);
// -> 英雄的名字是：诸葛亮

heroObs.hp = 5000;
// -> 我的hp属性被修改为5000了！
// -> 英雄的健康状况是：强壮

heroObs.hp = 1000;
// -> 我的hp属性被修改为1000了！
// -> 英雄的健康状况是：良好

heroObs.sp = 4000;
// -> 我的sp属性被修改为4000了！
// -> 英雄的职业是：谋士

const heroObs2 = new Observable(hero.equipment);

const heroWeapon = new Watcher(heroObs2, 'weapon', () => {
  return [...heroObs2];
}, (val) => {
  console.log(`英雄的武器是：${val}`);
})

autoRun(() => {
  console.log(`英雄初始装备：${heroWeapon.weapon}`);
  // -> 我的weapon属性被读取了！
  // -> 英雄初始装备：马,矛
});

heroObs2.push('羽扇');
// -> 我的2属性被修改为羽扇了！
// -> 我的length属性被修改为3了！
// -> 英雄的武器是：马,矛,羽扇

可以发现实现结果完全一致，细心的你一定发现当我们执行heroObs2.push('羽扇');后，打印出了2条属性被修改的日志，原因是Array被插入数据时被修改的出了内部数据外，数组的长度也依次被修改的缘故导致的。（Object.defineProperty实现时也同样是这样）

依赖收集的优化

以上已经将依赖收集的实现方式做了基础的说明与实现，对代码性能有要求的你会发现在Proxy实现方式的示例中存在性能上的问题。

heroObs.hp = 5000;
// -> 我的hp属性被修改为5000了！
// -> 英雄的健康状况是：强壮

heroObs.hp = 1000;
// -> 我的hp属性被修改为1000了！
// -> 英雄的健康状况是：良好

当连续对观察目标的同一个属性进行操作时，会多次执行回调函数，在实际使用中会造成性能损耗或重复刷新页面等问题。

异步优化

针对该现象，很容易想到使用异步编程中的宏任务与微任务的方式去解决，不了解的同学可以看下

Sky.Gu：深入浅出JavaScript异步编程​zhuanlan.zhihu.com
bac3a599098cf8c4e611674b2720d814.png

这篇文章。

每次修改观察目标的属性均会触发一次观察者的回调，那如果采用await将每次触发的观察者回调放入微任务列表中，在宏任务执行完之后再去执行是不是就可以解决多次刷新的问题？

修改观察者Watcher类

class Watcher {
  constructor(obj, key, callback, onComputedUpdate) {
    this.obj = obj;
    this.key = key;
    this.callback = callback;
    this.onComputedUpdate = onComputedUpdate;
    this.idx = 0;
    return this._defineComputed();
  }

  _defineComputed() {
    const self = this;
    const onDepUpdated = async (key) => {
      await console.log('wait');    // 提示后续函数进入微任务序列
      const val = self.callback();
      this.onComputedUpdate(val);
    }

    const handler = {
      get(target, key, receiver) {
        console.log(`我的${key}属性被读取了！`);
        Dep.target = () => { onDepUpdated(key) };
        const val = self.callback();
        Dep.target = null;
        return val;
      },
      set() {
        console.error('计算属性无法被赋值！')
      }
    }

    return new Proxy(this.obj, handler);
  }
}

尝试使用相同示例去运行：

const heroObs = new Observable(hero);

const heroHealth = new Watcher(heroObs, 'health', () => {
  return heroObs.hp > 2000 ? '强壮' : '良好';
}, (val) => {
  console.log(`英雄的健康状况是：${val}`);
});

const heroJob = new Watcher(heroObs, 'job', () => {
  return heroObs.sp < 3000 ? '武将' : '谋士'
}, (val) => {
  console.log(`英雄的职业是：${val}`);
});

autoRun(() => {
  console.log(`英雄初始健康状况：${heroHealth.health}`);
  console.log(`英雄初始职业：${heroJob.job}`);
});


heroObs.name = '诸葛亮';
console.log(`英雄的名字是：${heroObs.name}`);
heroObs.hp = 5000;
heroObs.hp = 1000;
heroObs.sp = 4000;

// 控制台输出序列为：
// -> 我的health属性被读取了！
// -> 英雄初始健康状况：良好
// -> 我的job属性被读取了！
// -> 英雄初始职业：武将
// -> 我的name属性被修改为诸葛亮了！
// -> 英雄的名字是：诸葛亮
// -> 我的hp属性被修改为5000了！
// -> wait
// -> 我的hp属性被修改为1000了！
// -> wait
// -> 我的sp属性被修改为4000了！
// -> wait
// -> 英雄的健康状况是：良好
// -> 英雄的健康状况是：良好
// -> 英雄的职业是：谋士

会发现执行序列被优化了，当宏任务运行结束后，再去执行我们希望延后执行的观察者回调函数。

但也能明显发现，两次修改heroObs.hp导致英雄的健康状况是：良好输出了两次，问题并没有被解决。

接着继续优化，采用的是一个全局Set来处理已经处理过的相同回调，避免重复运行，并再次使用一个异步函数去解决变更周期结束后Set的重置问题。

const autoRun = function (handler) {
  handler();
};

class Dep {
  constructor() {
    this.deps = new Set();
  }

  depend(key) {
    if (Dep.target) {
      this.deps.add({
        key,
        target: Dep.target
      });
    }
  }

  async notify(key) {
    this.deps.forEach((dep) => {
      if (dep.key === key && dep.target) {
        dep.target();
      }
    });
    await Dep.computeArray.clear();     // 微任务执行清空Set操作
  }


}

Dep.target = null;
Dep.computeArray = new Set();

class Observable {
  constructor(obj) {
    return this._createProxy(obj);
  }

  _createProxy(obj) {
    const dep = new Dep();
    const handler = {
      get(target, key, receiver) {
        // console.log(`我的${key}属性被读取了！`);
        // 加入观察者队列 
        dep.depend(key);
        return Reflect.get(target, key, receiver);
      },
      set(target, key, value, receiver) {
        console.log(`我的${key}属性被修改为${value}了！`);
        //内部调用对应的 Reflect 方法
        const result = Reflect.set(target, key, value, receiver);
        //执行观察者队列
        dep.notify(key);
        return result;
      }
    }
    return new Proxy(obj, handler);
  };
}

class Watcher {
  constructor(obj, key, callback, onComputedUpdate) {
    this.obj = obj;
    this.key = key;
    this.callback = callback;
    this.onComputedUpdate = onComputedUpdate;
    this.idx = 0;
    return this._defineComputed();
  }

  _defineComputed() {
    const self = this;
    const onDepUpdated = async (key) => {
      await console.log('wait');
      // 判断是否已执行过相同回调函数
      if (!Dep.computeArray.has(key)) {
        Dep.computeArray.add(key);
        const val = self.callback();
        this.onComputedUpdate(val);
      }
    }

    const handler = {
      get(target, key, receiver) {
        console.log(`我的${key}属性被读取了！`);
        Dep.target = () => { onDepUpdated(key) };
        const val = self.callback();
        Dep.target = null;
        return val;
      },
      set() {
        console.error('计算属性无法被赋值！')
      }
    }

    return new Proxy(this.obj, handler);
  }
}

再次采用上面的示例，控制台输出序列符合预期。

// -> 我的health属性被读取了！
// -> 英雄初始健康状况：良好
// -> 我的job属性被读取了！
// -> 英雄初始职业：武将
// -> 我的name属性被修改为诸葛亮了！
// -> 英雄的名字是：诸葛亮
// -> 我的hp属性被修改为5000了！
// -> wait
// -> 我的hp属性被修改为1000了！
// -> wait
// -> 我的sp属性被修改为4000了！
// -> wait
// -> 英雄的健康状况是：良好
// -> 英雄的职业是：谋士

小结

  • 采用Proxy/Object.defineProperty将数据对象转变成可观察的观察目标；
  • 观察者通过函数表达其属性与观察目标属性间的关系，并可给定一个回调函数处理关系结果；
  • 通过依赖收集器完成观察对象与观察者的连接；
  • 以autoRun函数作为入口，对有依赖的观察者进行收集；
  • 观察目标属性的任何变更都将自动告知观察者并触发相应回调函数。

其中依赖收集的关系如下图：

d4472926fb7009d6fa3fd6b8337a1756.png

相信这样循序渐进的方式，可实战的代码能将依赖收集这个概念讲清楚，讲透彻。

日后的工作实战中可使用到的地方也非常多，希望这篇文章对大家有帮助，如果发现有任何错漏的地方也欢迎指出。

如果觉得文章能帮助你理解一些前端知识点，请点赞、关注本专栏，也可关注微信公众号。

b7933cce875dcce6928aa8b63915a6f1.png
定投君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
FastAPI（33）- Global Dependencies 全局依赖
qq_33801641的博客
09-25 627
背景 对于某些实际应用场景，希望向整个应用程序添加一个全局依赖项 FastAPI 类的 dependences 参数 dependences 类型指定为Optional[Sequence[Depends]] Sequence 是序列，不仅可以接收 List，还可以接收 Set、Tuple 等 子类型就是 Depends 实际代码 #!usr/bin/env python # -*-...
Windows内核驱动EPROCESS遍历进程模块
12-14
总的来说，"Windows内核驱动EPROCESS遍历进程模块"是一项深入的操作系统级任务，它可以帮助我们更好地理解和监控系统运行状态，但同时也需要开发者具备高级的编程技能和对系统安全的深刻理解。通过学习和实践这一...
jQuery通用的全局遍历方法$.each()用法实例
weixin_33695082的博客
11-06 166
1.jQuery通用的全局遍历方法$.each()用法 2. test.json文件代码： 3. html代码 4.jQuery代码 &lt;script src="jquery-1.3.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; /* 1.$.each()是jqu..
全局依赖的管理
weixin_33737774的博客
12-20 257
2019独角兽企业重金招聘Python工程师标准>>> ...
（依赖收集vue） 联想学习
weixin_33924220的博客
04-25 90
现在假设我们已经理解了vue响应式的原理，然或者希望这篇文章能有点作用juejin.im/post/5cc005…，现在我们创建一个girl，她的所有属性读写已经变得可观察了： function defineReactive(obj, key, val, cb){ Object.defineProperty(obj, key, { enumerable: true, ...
fastapi 路径依赖项Depends / 装饰器依赖dependencies / 全局依赖 / 带 yield 的依赖
Michael是个半路程序员
10-26 1511
文章目录1. 依赖项2. 类作为依赖3. 子依赖项 learn from https://fastapi.tiangolo.com/zh/tutorial/dependencies/ 1. 依赖项 只能传给 Depends 一个参数。且该参数必须是可调用对象，比如函数 from typing import Optional from fastapi import FastAPI, Depends app = FastAPI() # 依赖项函数，没有@app.xxx async def common
VB中在模块中定义全局函数，在窗体中调用函数的实例——利润表.zip
02-15
本实例通过在模块中定义全局函数并从窗体中调用这些函数来计算利润表，这对于初学者来说是一个很好的实践项目。下面将详细介绍这个过程中的关键知识点。 1. **模块与全局函数**： - **模块**：在VB中，模块...
播放GIF的程序.rar_GIF c++_PictureExDemo_gif_播放GIF_维C网gif
09-21
在本文中，我们将深入探讨如何使用C++编程语言来实现一个播放GIF图像的程序，主要基于提供的资源——"播放GIF的程序.rar"，它包含了一个名为"PictureExDemo"的示例项目，用于展示如何处理GIF动画。这个项目在维C网...
单片机——Cry12864液晶显示.rar
11-29
本主题将深入探讨如何在单片机上实现Cry12864液晶显示。液晶显示屏（LCD）作为一种常用的可视化输出设备，能够提供清晰的文字和图形信息，是单片机应用中不可或缺的接口。 Cry12864液晶显示屏是一种具有128x64像素...
js创建数据共享接口——简化框架之间相互传值
12-11
标题中的"js创建数据共享接口——简化框架之间相互传值"是指使用JavaScript来实现一种机制，使得框架（如IFrame）内的各个页面能够方便地共享和访问数据，而无需直接操作DOM或者依赖特定的框架层级关系。这提高了...
二叉树遍历算法 （递归的、非递归的中序、前序、后序遍历 和 层次遍历 以及 求二叉树的宽度和深度）
09-22
二叉树遍历算法 （递归的、非递归的中序、前序、后序遍历 和 层次遍历 以及 求二叉树的宽度和深度）
vue.js 依赖收集
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-29 545
说明 【本文转载自：https://github.com/answershuto/learnVue】 为什么要依赖收集 先看下面这段代码 new Vue({ template: `<div> <span>text1:</span> {{text1}} <span>text2:</span> {{text2}} <div>`, data: {
局部和全局依赖关系
最新发布
qq_58702163的博客
10-17 531
图像区域之间的局部和全局依赖关系是指在图像处理和计算机视觉任务中，图像中不同区域之间的信息传递和相互依赖。平衡局部和全局依赖关系是非常重要的，因为不同的任务需要不同级别的信息。例如，在语义分割任务中，局部信息可以帮助精确定位对象边界，而全局信息可以提供对象之间的语义关系。5.全局依赖关系指的是图像中不同区域之间的长距离依赖关系，通常跨越较大的空间范围。2.局部依赖关系指的是图像中一个区域与其周围区域之间的依赖关系。总之，平衡图像区域之间的局部和全局依赖关系是一种复杂的任务，需要根据具体任务和数据来调整。
Vue的依赖收集简单图解
weixin_34074740的博客
05-23 1114
2019独角兽企业重金招聘Python工程师标准>>> ...
MVVM原理(4)：观察者Watcher 依赖收集器Dep
qq_44852448的博客
03-27 923
一、Dep Dep的作用是收集观察者以及当数据发生变动时通知观察者去更新 每一个属性都有自身的dep，接着添加watcher，在每次数据变动时(即set)，通知自身的dep，dep通知其中watcher去完成视图更新 class Dep { constructor () { this.subs = [] } // 收集观察者 addSub (watcher) { this.subs.push(watcher) } // 通知
演示Vue.js 是如何进行「依赖收集]
weixin_44526331的博客
04-30 684
初始化Vue 我们简单实例化一个Vue的实例, 下面的我们针对这个简单的实例进行深入的去思考： // app Vue instance var app = new Vue({ data: { newTodo: '', }, // watch todos change for localStorage persistence watch: { newTodo: {...
各种依赖收集持续更新
CSDN_DaShuiNiu的博客
01-30 299
httpClient : android{   useLibrary 'org.apache.http.legacy'  }Gson:dependencies{  implementation 'com.google.code.gson:gson:2.2.4'  }ImageLoader:dependencies{ implementation 'com.nostra13.universalima...
深入列表遍历问题，并分析spring和tomcat中观察者模式的实现
javayuan的专栏
08-29 1330
列表的遍历有两种方式，一种是采用for循环，如下所示：List list=new ArrayList();for(int i=0;ilist.size();i++)...{//...}还有一种是采用Iterator接口 ，如下所示：Iterator ite=list.iterator();while(ite.hasNext())...{//...}那么这两种方式
如何解决全局npm模块依赖性问题
09-04 606
该节点包管理器 （又称NPM）给Web开发人员方便地访问大量的JavaScript真棒模块，并试图找到和我们的应用程序管理依赖性时已经相当容易使我们的生活。 这也很容易让开发人员创建和发布自己的模块 ，这意味着其他开发人员可以抓住他们，用一个简单的npm install -g your-tool ，并开始使用他们想要的任何时间。 这是乌托邦！ 对？ 错了，其实... 我们有一个问题的位 我...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值