«

vue中provide和inject怎么实现原理对抗平庸

时间:2024-6-16 06:33     作者:韩俊     分类: Javascript


本篇内容主要讲解“vue中provide和inject怎么实现原理对抗平庸”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中provide和inject怎么实现原理对抗平庸”吧!

provide & inject 的用法

provide("num", 0);
const num = inject("num")

这大致就是它们的美貌,它们示人的一面,如此优雅,如此简洁。它们隐藏了内心,从这里让我无法了解到它的内心它到底在想什么呢,在做什么呢,我尝试着与它亲近,逐渐发现它的有趣。

在provide中,它留了两个深入了解它的窗口provide(key, value),同样在inject中,目前只能看到一个inject(key),结合它们的功能知道,它们的主要功能不就是存和取,所以想要了解它们就要搞清楚如何存,怎么取,先让这疑问留在心底罢,来看看"下面例子"

下面例子

有这样一串代码,让我们实现provide 和 inject这两个函数,达到在foo对象中的fooObj取的是app对象中provide提供的对象obj,我们如何实现

const obj = { name: "app" };
const foo = {
  name: "foo",
  provides: {},
  parent: null,
  setup() {
    foo.parent = app; // 先忽略
    const fooObj = inject("obj");
    console.log("app -> foo: obj ", fooObj === obj); // 要求打印true
  },
  children: null,
};
const app = {
  name: "app",
  provides: {},
  parent: null,
  setup() {
    app.parent = app; // 先忽略
    provide("obj", obj);
  },
  children: foo,
};
(function () {
  app.setup();
  foo.setup();
})();

需要实现什么

首先我们需要明确我们要干什么:

    其实本质就是要实现provide和inject函数

    明确代码在做什么

    有两个对象app 和 foo,它两长得一样美丽,初始化阶段,它两内部的setup方法会依次执行,在内部它们分别使用了provide提供数据,以及使用inject获取数据,要求fooObj === obj为true,这其实就是判断是否是同一个数据的根本方法。

知道了这些后,我们一起来认识一下provide和inject吧,我们以主观意识去了解它们,把我认为它是什么样子画出来。

首先画出它的骨架:

function provide(key, value) {
    // 灵魂深处
}
function inject(key) {
    // 灵魂深处
}

我们要一起探听我们理想中它们的灵魂

内心中的呈现

provide分析

    提供了key-value

    我们需要存储在各自对象中的provides属性中

function provide(key, value) {
  // 获取当前提供provide的对象
  const currentInstance = app;
  // 将provide提供的key-value存储到当前对象的provides中
  let { provides } = currentInstance;
  provides[key] = value;
}

inject分析

    从parent下的provides开始取值,因为在自己这里提供的provide不需要进行inject,多此一举

function inject(key) {
  const currentInstance = foo;
  // 从parent的provides取值
  const parentProvides = currentInstance.parent.provides;
  // 如果提供了值,就可以取到并返回
  if (key in parentProvides) {
    return parentProvides[key];
  }
}

这时候我们可以打印出(fooObj === obj) === true了

在沉浸喜悦的同时,在provide和inject灵魂处蹦出字来你还是不够了解我,我仔细思考,好像也是,它们还有一个特性就是跨层级,这恰恰是遗忘了它最有灵魂的地方,所以我们重新规划下面例子

下面例子

const obj = { name: "app" };
const baz = {
  name: "foo",
  provides: {},
  parent: null,
  setup() {
    baz.parent = foo;
    const bazObj = inject("obj");
    console.log("app -> baz: obj ", bazObj === obj); // 要求打印true
  },
  children: null,
};
const foo = {
  name: "foo",
  provides: {},
  parent: null,
  setup() {
    foo.parent = app;
  },
  children: baz,
};
const app = {
  name: "app",
  provides: {},
  parent: null,
  setup() {
    app.parent = app;
    provide("obj", obj);
  },
  children: foo,
};
(function () {
  app.setup();
  foo.setup();
  baz.setup();
})();

这时候就会打印false了PS: 如果你还是true,那是因为你在 inject 里 currentInstance没有改变,这里是需要改变的,只能指到当前对象,所以我们如何解决呢?

这里说到如果currentInstance 是 foo,那就没有问题,但是又因为这里是只能指向当前对象的,所以不能直接赋值,突然,灵光一闪,无非不就是查找的时候需要继续向下查找,这不是和原型链一样嘛内心:哈哈哈,我真聪明,所以我们给它进行原型连接不就好了,让一直向parent上找,直到找不到。

跨层级查找

进行原型连接,实现跨层级:Object.create(obj): 创造一个原型为obj的空对象

const foo = {
  name: "foo",
  provides: {},
  parent: null,
  setup() {
    foo.parent = app;
    // 执行原型连接
    foo.provides = Object.create(foo.parent.provides);
  },
  children: baz,
};

这样就又打印true了,因为它直接在foo.provides上查找,无法找到提供的obj所以会undefined,原型连接后,查找会顺着原型链查找,直到找不到,那找不到的时候怎么办呢,它会报错的呀,这是不能容忍的,所以inject向我敞开心扉,和我聊自己是怎么样的一个API,它说:"我其实有三种外貌,对应不同心情,分别是inject(key)、inject(key, defaultValue)和 defaultValue 可以是函数",至此我们之间的关系好像又进一步,我好像更了解它们了。

inject放下伪装,吐露心声

inject 的形态:

    inject(key) —— 已实现

    inject(key, defaultValue) —— 未实现

    inject(key, () => defaultValue) —— 未实现

回顾一下inject:

function inject(key) {
  const currentInstance = baz;
  const parentProvides = currentInstance.parent.provides;
  if (key in parentProvides) {
    return parentProvides[key];
  }
}

这是我们最后实现inject的样子,这会inject告诉了我们其他状态,所以我们需要和它更进一步,它会提供一个defaultValue属性,所以我们在parent链中没有找到key的时候,就需要赋值defaultValue了

function inject(key, defaultValue) {
  const currentInstance = baz;
  const parentProvides = currentInstance.parent.provides;
  // 当没有在 parent 链中找到对应key,就返回默认值
  if (key in parentProvides) {
    return parentProvides[key];
  } else if (defaultValue) {
    return defaultValue;
  }
}

将baz对象修改为:

const baz = {
  name: "foo",
  provides: {},
  parent: null,
  setup() {
    baz.parent = foo;
    const defaultBaz = inject("baz", "我是默认值啦!");
    console.log(defaultBaz, "baz");
  },
  children: null,
};

打印出了:我是默认值啦!

但是当defaultValue是回调函数的时候,我们所以需要添加判断条件,如果是回调函数,那就直接执行。

修改后的inject:

function inject(key, defaultValue) {
  const currentInstance = baz;
  const parentProvides = currentInstance.parent.provides;
  if (key in parentProvides) {
    return parentProvides[key];
  } else if (defaultValue) {
    // 新增判断
    if (typeof defaultValue === "function") {
      return defaultValue();
    }
    return defaultValue;
  }
}

修改后的baz中的inject使用:

const defaultBaz = inject("baz", () => "我是默认值啦!");

同样也会打印出:我是默认值啦!

现在我们好像成为好朋友了,所以,你好,provide!你好,inject!你们好,各位大帅b!

标签: javascript vue

热门推荐