Open hzzzzzzzq opened 2 years ago
在 ES 6 之前,社区制定了一些模块加载方案,最主要的就是 [CommonJS]() 和 AMD 两种。前者主要用于服务器,后者用于浏览器。ES 6 在语言层面上实现了模块功能,可以取代 [CommonJS]() 和 AMD 规范,成为了通用的模块解决方案。
CommonJS
module 主要由 export 和 import 两个命令。export 命令用于规定模块的对外接口,import 命令用于输入其他模块功能。 每一个模块都是一个独立文件,文件内的所有变量,外部无法获取,如果希望在外部获取,就必须使用 export 命令进行输出。 我们创建一个 export.js 文件,来写 export 相关内容,import.js 作为 import 导入相关内容。
module
export
import
export.js
import.js
先看看 export 命令的写法。
// export.js export const name = 'hzzzzzzzq'; export const age = 18; export const height = 1.78;
上面是一种每一个都导出的写法,也可以看一下另外一种写法,使用一起导出的方式。
// export.js const name = 'hzzzzzzzq'; const age = 18; const height = 1.78; export { name, age, height };
两种写法是相同的。 当然 export 命令肯定不只是只能导出变量,还可以导出函数或者类。 来看看函数导出吧,还是用老朋友 add 来看吧。 当然, function 和 class 的输出,必须使用这样的格式。
add
// export.js export function add(x, y) { return x + y; } // 或者 function add(x, y) { return x + y; } export { add };
在导出的时候,需要注意的是,导出的变量必须与模块内部的变量建立一一对应关系。
使用 import 命令导入 export.js 文件,然后打印。
// import.js import { name, age, height, add } from './export.js'; console.log(name, age, height); // hzzzzzzzq 18 1.78 console.log(add(1, 2)); // 3
如果想要自己重新命名,在 import 时,要使用 as 关键字,比如我将 add 改为 sum。
as
sum
import { add as sum } from './export.js';
需要注意的是
console.log(add(1, 2)); // 3 import { add } from './export.js'; import { name } from './export.js'; // 与上一句相同 // 等同于 import { add, name } from './export.js' import { 'a' + 'dd'} from './export.js'; // 报错
导入时,除了一个一个的导入,还有一种整体导入方式,就是使用( * )来指定一个对象。
*
我们来看看刚刚的全部导入方式。
import * as all from './export.js'; console.log(all.name, all.age, all.height); // hzzzzzzzq 18 1.78 console.log(all.add(1, 2)); // 3
这种方式,模块整体加载所在的那个对象,也就是 all 对象。
all
导出还有一种 export default 命令,这种导出方式就是指定默认输出。
export default
// export.js // 例子 类 export default class () { ... } // 或者 // 例子 函数 export function (x, y) { return x + y; }
这种导出方式,不需要固定的名称,来对应,可以直接使用匿名类或匿名函数,也可以不用匿名,但是导出时,都是可以任意命名。
导入时不需要使用 {} 来包裹,可以直接命名,使用任何名称命名导入。
{}
// 例子 类 import Obj from './export.js'; let obj = new Obj(); // 或者 // 例子 函数 import add from './export.js'; console.log(add(1, 2));
在正常开发当中,最常使用的一些 export 、improt 以及一些 export default 的方法。
improt
Module 语法
概述
在 ES 6 之前,社区制定了一些模块加载方案,最主要的就是 [
CommonJS
]() 和 AMD 两种。前者主要用于服务器,后者用于浏览器。ES 6 在语言层面上实现了模块功能,可以取代 [CommonJS
]() 和 AMD 规范,成为了通用的模块解决方案。基本使用
module
主要由export
和import
两个命令。export
命令用于规定模块的对外接口,import
命令用于输入其他模块功能。 每一个模块都是一个独立文件,文件内的所有变量,外部无法获取,如果希望在外部获取,就必须使用export
命令进行输出。 我们创建一个export.js
文件,来写export
相关内容,import.js
作为import
导入相关内容。export 命令
先看看
export
命令的写法。上面是一种每一个都导出的写法,也可以看一下另外一种写法,使用一起导出的方式。
两种写法是相同的。 当然 export 命令肯定不只是只能导出变量,还可以导出函数或者类。 来看看函数导出吧,还是用老朋友
add
来看吧。 当然, function 和 class 的输出,必须使用这样的格式。在导出的时候,需要注意的是,导出的变量必须与模块内部的变量建立一一对应关系。
import 命令
使用
import
命令导入export.js
文件,然后打印。如果想要自己重新命名,在
import
时,要使用as
关键字,比如我将add
改为sum
。需要注意的是
import
命令具有提升效果,会提升到整个模块的顶部,首先执行。import
是静态执行,不可以使用表达式或者变量import
,那么只会执行一次,不会多次执行。模块的整体加载
导入时,除了一个一个的导入,还有一种整体导入方式,就是使用(
*
)来指定一个对象。我们来看看刚刚的全部导入方式。
这种方式,模块整体加载所在的那个对象,也就是
all
对象。export default 命令
导出还有一种
export default
命令,这种导出方式就是指定默认输出。这种导出方式,不需要固定的名称,来对应,可以直接使用匿名类或匿名函数,也可以不用匿名,但是导出时,都是可以任意命名。
导入时不需要使用
{}
来包裹,可以直接命名,使用任何名称命名导入。总结
在正常开发当中,最常使用的一些
export
、improt
以及一些export default
的方法。