本文参考 阮一峰 ECMAScript 6 入门,进行简单语法总结
1.概述
ES6 模块的设计思想,打破了历史上 JavaScript 没有模块体系(其他语言都有这项功能);我们需要知道,ES6 模块非对象,通过 export 命令显示指定输出代码;通过 import 命令输入。加载方式为 编译时加载(静态加载)。
⚠️ES6 模块自动采用严格模式,这与在头部是否添加 “use strict” 无关;需要注意this的限制,在ES6模块中,顶层的this指向是undefined,在顶层代码中是不应该使用this的。
2.export命令
-
定义:用于规定模块的对外接口;
-
基本语法:
首先我们需要了解,一个模块就是一个独立的文件,该文件内部的所有变量,我们只能通过 export 输出;// information.js export var name = 'Maning'; export var sex = 'female';但是,我们更加推荐以下,以下这种方式,更加清晰看出输出的变量;
// information.js var name = 'Maning'; var sex = 'female'; export { name, sex }; -
输出类型:变量、函数、类
export function doSomething() { // do code here... }同变量,推荐先定义,再输出;
⚠️ export 输出的名字可以是原本定义的名义,也可以通过 as 关键字重命名。重命名后,相同变量则可以使用不同名字多次输出。function do1() {} function do2() {} export { do1 as doSomethingFirst, do2 as doSomethingSecond, do2 as doSomethingElse }; -
export 命令规定的是对外接口,必须与模块内部的变量建立一对一的对印关系。
❌代码示例一 export 1; var num = 1; export num; ❌代码示例二 function f() {}; export f;上述代码,本质都是输出的都是具体的值,而不是接口。
-
export 命令只能出现在模块顶层的任意位置;如果处于块级作用域内,就会报错。
3.import命令
- 定义:用于输入其他模块提供的功能
- 基本语法:
// import 命令接受一对 { } ,里面的变量必须和 export 的变量名字一致 import { name, sex } from './information.js'; - as 关键字重命名
import { name as myName } from './information.js'; - 注意点:
⚠️ 关于变量:import 命令输入的变量是只读的,不能改变其值,但允许修改其属性(不推荐,不易于排错);
⚠️ 关于路径:import 命令 from 后面的路径,可以是绝对路径也可以是相对路径,可以省略 .js 后缀;如果from后面是一个模块文件名,则必须通过配置文件。
4.模块的整体加载
- 语法:import * as information from './information.js';
星号(*) 表示一个对象,所有的输出值均加载在该对象上。// 取值操作 let myName = information.name; let mySex = information.sex;
5.export default 命令
-
区别:该命令后面不需要{},使用 import 时不需要{},且可以随便替换变量名。
export default class A{};// a.js import B from './a.js';⚠️ 一个模块只能有一个默认输出,因此 export default 命令只能使用一次。本质上,该命令是输出一个 default 的变量或方法,系统允许为它取任意名字。因此我们可以理解以下代码块:
❌export 666; ✅export default 666;// 对外接口名为default,值为666;项目中常见的语法:
import _ from 'lodash'; import moment from 'moment';6.export 与 import 的复合语法
在同一个模块,先输入再输出同一个模块;
import { A, B } from 'my_module'; export { A, B };可以改写成这种:
export { A, B } from 'my_module'
7.模块的继承
在 A 文件中,export 来自B 文件的方法和属性,并且同时 export 自身的方法和属性;那么A 文件就继承了 B 文件的方法和属性;
8.跨模块常量
某个值要被多个模块共享,可以将不同的常量放在不同常量文件中,在一个主文件中合并;在其它模块使用时,直接引入主文件。
9.import()
我的理解如下,首先 import 命令是静态分析的,并不能在代码运行时加载模块;因此为了弥补这一点,有一个提案,建议引入 import()。该方法返回一个Promise对象,且是运行时执行的,类似于 Node 的 require方法。
- 适用场合:
1) 按需加载
2)条件加载
3)动态的模块路径
⚠️import() 加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
好难啊







网友评论