最近对这块有点模糊,稍微看了下网上的资料,整理下自己的语言,帮助自己记忆。
以下内容参考阮一峰老师的《es6标准入门》

介绍

在ES6之前,js一直没有模块化体系,然而就会很不灵活,然而别的后门语言几乎都有,甚至css都有@import进行模块化,没有模块化,无疑对制作大型应用来说是很艰难的,修改,添加功能,检查等都要在庞大的代码里面进行操作,所以聪明的前辈们就提出了两个方案,一个是AMD,一个是CMD,下面介绍下两者之间的区别。

区别(三国乱斗)

AMD(Asynchronous module definition)

AMD(requirejs)将所有文件同时加载,一次性引入,推崇依赖前置,也就是在定义模块时要先声明其依赖的模块,加载完模块后会立马执行该模块(运行时加载),这样就会使得首屏加载很慢,但是等待加载完之后用户体验会很好。

CMD(common module definition)

CMD(seajs)是国人提出的,强调的是一个文件一个模块,可按需引入,推崇依赖就近,加载完某个模块后不会立即执行,而是等遇到了require语句的时候在执行,这样的好处就是性能会很好,相比之下AMD来说,用户体验可能会稍微差一点,在node.js中用到的也是按需加载的模式,node中用的是commonjs规范。

ES6时代(三国归晋)

ES6提出用export命令显式指定输出的代码,再通过import命令输入。

export导出

一个模块就是一个文件,文件与文件之间互不干扰,如果想要在另外一个文件中引入这个文件的值,可以直接用如下代码导出

export var a = 0
export var b = 1
export var c = 2

同时也可以这样写,相当于解构,与上方同理,推荐下面的写法,因为结构清晰一目了然

var a = 0
var b = 1
var c = 2
export { a, b, c };

可以用as对变量重命名

var a = 0
var b = 1
var c = 2
export { a as d, b as e, c as f};

import导入

在别的模块中使用了export导出之后,在其他js文件中即可使用import来进行导入文件

import a from 文件路径
import b from 文件路径
import c from 文件路径

或者使用如下

import { a, b, c} from 文件路径

同理也可以使用 as 更改下变量名

import { a as d, b, c} from 文件路径

import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。
例如

import Vue from 'vue'
Last modification:September 19th, 2019 at 02:54 pm
If you think my article is useful to you, please feel free to appreciate