es6 依赖循环_require 和 import 的循环依赖详解

说到前端模块化，就不得不说到循环加载，就像混乱背后隐藏着的清晰地秩序。

什么叫循环加载？

我们来看一段代码。1

13const b = require('./b');

b();

module.exports = function(){

console.log('This is a.js');

}

//b.js

const a = require('./a');

a()

module.exports = function(){

console.log('This is b.js')

}

a 加载了 b，b 也加载了 a，这个时候，循环加载就出现了。

CommonJS 下的循环加载

运行 node a.js 你会发现，报错了:1

15/Users/jackiels/learn/test/b.js:8

a()

TypeError: a is not a function

at Object. (/Users/jackiels/learn/test/b.js:8:1)

at Module._compile (module.js:571:32)

at Object.Module._extensions..js (module.js:580:10)

at Module.load (module.js:488:32)

at tryModuleLoad (module.js:447:12)

at Function.Module._load (module.js:439:3)

at Module.require (module.js:498:17)

at require (internal/module.js:20:19)

at Object. (/Users/jackiels/learn/test/a.js:8:11)

at Module._compile (module.js:571:32)

为什么会报错？

我们来 console.log('a:',a)，返回的结果显示 a 是一个{}。明明 module.exports 导出的是一个函数，为什么就变成了一个空对象？以下内容引自CommonJS 的加载原理CommonJS 的一个模块，就是一个脚本文件。require 命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。1

id: '...',

exports: { ... },

loaded: true,

...

}

上面代码中，该对象的 id 属性是模块名，exports 属性是模块输出的各个接口，loaded 属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。以后需要用到这个模块的时候，就会到 exports 属性上面取值。即使再次执行 require 命令，也不会再次执行该模块，而是到缓存之中取值。

这个时候的 exports 那个字段的值就是 {}，之所以这样因为 CommonJS 中非常重要的一个加载模式：一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出

我们回头看看我们的栗子

es6 依赖循环_require 和 import 的循环依赖详解相关推荐

python中循环语句只有for和while两种_Python循环语句之while，for语句详解
下面为大家分享一篇Python 循环语句之 while,for语句详解,具有很好的参考价值,希望对大家有所帮助.一起过来看看吧 Python中有两种循环,分别为:for循环和while循环. for循 ...
python导入模块的变量_python 环境变量和import模块导入方法(详解)
1.定义模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能文件名就是模块名称包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 for ...
合法的python变量名import_python 环境变量和import模块导入方法(详解)
1.定义模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能文件名就是模块名称包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 imp ...
Jupyter Notebook中numpy什么意思 import numpy as np详解
Jupyter Notebook中numpy什么意思 import numpy as np详解 1.Numpy是啥 Numpy是用C实现的数据计算库. 主要是用来处理相同类型.固定长度的元素,可以用来 ...
c语言while将字符循环,C语言 while语句的用法详解
在C语言中,共有三大常用的程序结构: 顺序结构:代码从前往后执行,没有任何"拐弯抹角": 选择结构:也叫分支结构,重点要掌握 if else.switch 以及条件运算符: 循环结 ...
学习ES6（六）--函数 Lambda函数（=）详解
函数是可读,可维护和可重用代码的构建块.使用function关键字定义功能.以下是定义标准函数的语法. function function_name() { // function body } 要强 ...
RNN循环神经网络实现预测比特币价格过程详解
http://c.biancheng.net/view/1950.html 本节将介绍如何利用 RNN 预测未来的比特币价格. 核心思想是过去观察到的价格时间序列为未来价格提供了一个很好的预估器.给定 ...
keil流水灯c语言程序两个一起亮,Keil单片机点亮一个灯及循环流水灯三种实现方法详解...
实验名称:keil工程建立,点亮一个led灯实验目的:学会keil软件安装,熟悉keil界面并学习如何新建一个工程实验器材:安装有keil的电脑一台预习内容及原理: Keil C51已集成到一个 ...
php循环经典用法,PHP switch嵌套、往复循环、单选等的“高级”用法详解
php switch用法很多,除了我们常见的switch break的搭配外, 还有其他用法,也许会满足你的特殊需求! switch语句和具有同样表达式的一系列的 IF 语句相似.很多场合下需要把同一 ...

es6 依赖循环_require 和 import 的循环依赖详解

es6 依赖循环_require 和 import 的循环依赖详解相关推荐

最新文章

热门文章