简介
在前端开发中，为了使代码更具有可读性和可维护性，我们常常会将一些常量或者变量进行抽离成单独的模块，方便我们在开发过程中进行调用。但是其实，我们在使用这些模块时往往会遇到一些问题，就是在模块导入的过程中，如果该模块所依赖的模块还没有加载完成，我们会得到 undefined 报错，这就需要一个能够在该模块所依赖的模块加载完成后自动执行的方法。而 npm 包 whendefined 就是为解决这一问题而生的。
安装
你可以通过以下命令来安装 whendefined：
npm install whendefined
使用
导入 whendefined
在导入 whendefined 之前，我们需要先导入一些模块，例如我们需要引入模块 A 和模块 B，代码如下：
import moduleA from './moduleA' import moduleB from './moduleB'
但是当模块 B 依赖于模块 A 时，我们就会遇到 undefined 报错。为了解决这个问题，我们需要使用 whendefined。
调用 whendefined
我们可以通过以下代码来调用 whendefined：
import whendefined from 'whendefined'
这时候我们就可以使用 whendefined 加上链式作用来保证所有模块都已经被加载完成：
whendefined(moduleA).and(moduleB).then(() => {
// 执行一些操作，例如初始化
})whendefined(moduleA) 表示等待模块 A 加载完成，.and(moduleB) 表示等待模块 B 加载完成，.then(() => {}) 则表示在前两个模块都加载完成之后执行一些操作，例如初始化。
示例
下面是一个示例，将 whendefined 应用到了一个 Vue 项目中：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ ----------- ---- -------------
-- ----
------ ------- ---- -----------
------ ------- ---- -----------
-------------
----- ----- - --- ------------
-------- -
--------
-------
-
--
-- ---- ------------ ----- -----------
--- -----
------
-------------- -
-- -- ------- - ------- ----------------
----------------------------------------- -- -
----------------------------
--
-
-----------------总结
使用 whendefined 可以解决模块依赖导致的 undefined 报错，使我们能够更加轻松地进行模块的引入和使用。在实际开发中，我们可以将其应用在 Vue、React 和 Angular 等前端框架中，提高开发效率和代码可读性，值得推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/whendefined