简单分析 ES6 中 module 引用数的解决循环依赖问题

随着 JavaScript 语言的不断发展，模块化已经成为前端开发中不可或缺的一部分。而在 ES6 中，我们可以使用 import 和 export 语句方便地实现模块化开发。但是，循环依赖问题却是常常困扰着我们。在本文中，我们将来详细地分析 ES6 中 module 的引用数，以及如何解决循环依赖问题。

ES6 中 module 的引用数

在 ES6 中，我们通过 import 和 export 语句来实现模块化开发。

import 语句的基本语法如下：

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";

在上面的语法中，我们用 import 关键字引入了一个或多个模块，并从中导入一个或多个导出的对象或值。在引入一个模块时，我们可以使用 default 关键字来导出默认值。使用 * 可以导入一个模块中所有的导出内容。使用 as 关键字可以给导入的内容重置一个别名。

export 语句的基本语法如下：

export { export1 };
export { export1 as alias1 };
export { export1 , export2 };
export default expression;

在上面的语法中，我们可以使用 export 关键字将一个或多个值从当前模块导出，并在其它模块中使用 import 关键字引入导出的值。

当我们在一个模块中使用 import 引入了另一个模块时，ES6 中的 module 引擎会记录引用结构，并根据依赖关系构建关系图。

当我们再次引入相同的模块时，ES6 中的 module 引擎会直接从内存中获取已经存在的对象，而不是重新创建一个新的对象。

解决循环依赖问题

循环依赖问题是指两个或多个模块之间相互依赖，由于没有正确的处理，导致程序进入死循环的情况。

ES6 中已经为我们提供了解决循环依赖问题的方法，通过对模块引用次数的判断，来避免模块之间的无限循环依赖。

举个例子：

模块 a.js：

import b from './b.js';
console.log('a.js');
export default {
  a: 'aaa',
  b
};

模块 b.js：

import c from './c.js';
console.log('b.js');
export default {
  b: 'bbb',
  c
};

模块 c.js：

import a from './a.js';
console.log('c.js');
export default {
  c: 'ccc',
  a
};

在我们引用模块 a 的时候，模块 a 又引用了模块 b 和模块 c。同时，模块 b 也引用了模块 c，模块 c 又引用了模块 a。这样就形成了一个循环依赖的问题。

但是，ES6 中的 module 引擎会记录每个模块的引用次数，当一个模块被多次引用的时候，module 引擎会直接从内存中获取已经存在的对象。

所以，我们可以更改代码，来避免循环依赖问题：

模块 a.js：

import b from './b.js';
console.log('a.js');
export default {
  a: 'aaa',
  b
};

模块 b.js：

import c from './c.js';
console.log('b.js');
export default {
  b: 'bbb',
  c
};

模块 c.js：

let a;
console.log('c.js');
export default {
  c: 'ccc'
};
export function setC(obj) {
  a = obj;
}

最后，在我们引用模块 a 的时候，我们手动将模块 a 引入到模块 c 中。代码如下：

main.js：

import a from './a.js';
import { setC } from './c.js';

setC(a); // 注入模块 a

console.log('main.js', a);

这样我们就避免了循环依赖问题的出现。

另外，若在模块 a 和模块 b 中需要同时使用模块 c 中的内容，我们也可以将模块 c 的内容拆分到新的模块中，并在模块 a 和模块 b 中分别引入该模块。

总结

在本文中，我们详细地分析了 ES6 中 module 的引用数，并通过示例代码解决了循环依赖问题。在实际开发中，我们应该充分利用模块化开发的优势，并注重模块化开发中的细节，避免出现循环依赖问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a859fe48841e98944e56f3