mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
docs(module): edit import()
This commit is contained in:
parent
e5c9ccadca
commit
2da8eac664
@ -1567,7 +1567,7 @@ clownsEverywhere(
|
||||
|
||||
上面代码中,如果在`param2`或`bar`后面加一个逗号,就会报错。
|
||||
|
||||
这样的话,如果以后修改代码,想为函数`clownsEverywhere`添加第三个参数,就势必要在第二个参数后面添加一个逗号。这对版本管理系统来说,就会显示添加逗号的那一行也发生了变动。这看上去有点冗余,因此新的语法允许定义和调用时,尾部直接有一个逗号。这与数组和对象的尾逗号规则,保持一致了。
|
||||
如果像上面这样,将参数写成多行(即每个参数占据一行),以后修改代码的时候,想为函数`clownsEverywhere`添加第三个参数,或者调整参数的次序,就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说,就会显示添加逗号的那一行也发生了变动。这看上去有点冗余,因此新的语法允许定义和调用时,尾部直接有一个逗号。
|
||||
|
||||
```javascript
|
||||
function clownsEverywhere(
|
||||
@ -1581,3 +1581,5 @@ clownsEverywhere(
|
||||
);
|
||||
```
|
||||
|
||||
这样的规定也使得,函数参数与数组和对象的尾逗号规则,保持一致了。
|
||||
|
||||
|
@ -14,9 +14,9 @@ ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已
|
||||
|
||||
## ES6 与 ECMAScript 2015 的关系
|
||||
|
||||
媒体里面经常可以看到”ECMAScript 2015“这个词,它与ES6是什么关系呢?
|
||||
ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢?
|
||||
|
||||
2011年,ECMAScript 5.1版发布后,就开始制定6.0版了。因此,”ES6”这个词的原意,就是指JavaScript语言的下一个版本。
|
||||
2011年,ECMAScript 5.1版发布后,就开始制定6.0版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。
|
||||
|
||||
但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布6.0版,过一段时间再发6.1版,然后是6.2版、6.3版等等。
|
||||
|
||||
@ -24,13 +24,15 @@ ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已
|
||||
|
||||
标准委员会最终决定,标准在每年的6月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的6月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。
|
||||
|
||||
ES6的第一个版本,就这样在2015年6月发布了,正式名称就是《ECMAScript 2015标准》(简称ES2015)。2016年6月,小幅修订的《ECMAScript 2016标准》(简称ES2016)如期发布,这个版本可以看作是ES6.1版,因为两者的差异非常小(只新增了数组实例的`includes`方法和指数运算符),基本上是同一个标准。根据计划,2017年6月将发布ES2017标准。
|
||||
ES6 的第一个版本,就这样在2015年6月发布了,正式名称就是《ECMAScript 2015标准》(简称 ES2015)。2016年6月,小幅修订的《ECMAScript 2016标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小(只新增了数组实例的`includes`方法和指数运算符),基本上是同一个标准。根据计划,2017年6月发布 ES2017 标准。
|
||||
|
||||
因此,ES6既是一个历史名词,也是一个泛指,含义是5.1版以后的JavaScript的下一代标准,涵盖了ES2015、ES2016、ES2017等等,而ES2015则是正式名称,特指该年发布的正式版本的语言标准。本书中提到“ES6”的地方,一般是指ES2015标准,但有时也是泛指“下一代JavaScript语言”。
|
||||
因此,ES6 既是一个历史名词,也是一个泛指,含义是5.1版以后的 JavaScript 的下一代标准,涵盖了ES2015、ES2016、ES2017等等,而ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。
|
||||
|
||||
## 语法提案的批准流程
|
||||
|
||||
任何人都可以向TC39标准委员会提案。一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由TC39委员会批准。
|
||||
任何人都可以向标准委员会(又称 TC39 委员会)提案,要求修改语言标准。
|
||||
|
||||
一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。
|
||||
|
||||
- Stage 0 - Strawman(展示阶段)
|
||||
- Stage 1 - Proposal(征求意见阶段)
|
||||
@ -38,9 +40,9 @@ ES6的第一个版本,就这样在2015年6月发布了,正式名称就是《
|
||||
- Stage 3 - Candidate(候选人阶段)
|
||||
- Stage 4 - Finished(定案阶段)
|
||||
|
||||
一个提案只要能进入Stage 2,就差不多等于肯定会包括在以后的正式标准里面。ECMAScript当前的所有提案,可以在TC39的官方网站[Github.com/tc39/ecma262](https://github.com/tc39/ecma262)查看。
|
||||
一个提案只要能进入 Stage 2,就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案,可以在 TC39 的官方网站[Github.com/tc39/ecma262](https://github.com/tc39/ecma262)查看。
|
||||
|
||||
本书的写作目标之一,是跟踪ECMAScript语言的最新进展,介绍5.1版本以后所有的新语法。对于那些明确将要列入标准的新语法,尤其是那些Babel转码器(详见后文)已经支持的功能,也将予以介绍。
|
||||
本书的写作目标之一,是跟踪 ECMAScript 语言的最新进展,介绍5.1版本以后所有的新语法。对于那些明确或很有希望,将要列入标准的新语法,都将予以介绍。
|
||||
|
||||
## ECMAScript 的历史
|
||||
|
||||
|
117
docs/module.md
117
docs/module.md
@ -622,7 +622,9 @@ import {db, users} from './constants';
|
||||
|
||||
## import()
|
||||
|
||||
上面说过了,`import`语句会被JavaScript引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。
|
||||
### 简介
|
||||
|
||||
前面介绍过,`import`命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。
|
||||
|
||||
```javascript
|
||||
// 报错
|
||||
@ -631,9 +633,9 @@ if (x === 2) {
|
||||
}
|
||||
```
|
||||
|
||||
上面代码中,引擎处理`import`语句是在执行之前,所以`import`语句放在`if`代码块之中毫无意义,因此会报句法错误,而不是执行时错误。
|
||||
上面代码中,引擎处理`import`语句是在编译时,这时不会去分析或执行`if`语句,所以`import`语句放在`if`代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,`import`和`export`命令只能在模块的顶层,不能在代码块之中(比如,在`if`代码块之中,或在函数之中)。
|
||||
|
||||
这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。从长远来看,`import`语句会取代 Node 的`require`方法,但是`require`是运行时加载模块,`import`语句显然无法取代这种动态加载功能。
|
||||
这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。从语法上,条件加载就不可能实现。如果`import`命令要取代 Node 的`require`方法,这就形成了一个障碍。因为`require`是运行时加载模块,`import`命令无法取代`require`的动态加载功能。
|
||||
|
||||
```javascript
|
||||
const path = './' + fileName;
|
||||
@ -648,7 +650,7 @@ const myModual = require(path);
|
||||
import(specifier)
|
||||
```
|
||||
|
||||
上面代码中,`import`函数的参数`specifier`,指定所要加载的模块的位置。`import`语句能够接受什么参数,`import()`函数就能接受什么参数,两者区别主要是后者为动态加载。
|
||||
上面代码中,`import`函数的参数`specifier`,指定所要加载的模块的位置。`import`命令能够接受什么参数,`import()`函数就能接受什么参数,两者区别主要是后者为动态加载。
|
||||
|
||||
`import()`返回一个 Promise 对象。下面是一个例子。
|
||||
|
||||
@ -668,3 +670,110 @@ import(`./section-modules/${someVariable}.js`)
|
||||
|
||||
`import()`类似于 Node 的`require`方法,区别主要是前者是异步加载,后者是同步加载。
|
||||
|
||||
### 适用场合
|
||||
|
||||
下面是`import()`的一些适用场合。
|
||||
|
||||
(1)按需加载。
|
||||
|
||||
`import()`可以在需要的时候,再加载某个模块。
|
||||
|
||||
```javascript
|
||||
button.addEventListener('click', event => {
|
||||
import('./dialogBox.js')
|
||||
.then(dialogBox => {
|
||||
dialogBox.open();
|
||||
})
|
||||
.catch(error => {
|
||||
/* Error handling */
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
上面代码中,`import()`方法放在`click`事件的监听函数之中,只有用户点击了按钮,才会加载这个模块。
|
||||
|
||||
(2)条件加载
|
||||
|
||||
`import()`可以放在`if`代码块,根据不同的情况,加载不同的模块。
|
||||
|
||||
```javascript
|
||||
if (condition) {
|
||||
import('moduleA').then(...);
|
||||
} else {
|
||||
import('moduleB').then(...);
|
||||
}
|
||||
```
|
||||
|
||||
上面代码中,如果满足条件,就加载模块 A,否则加载模块 B。
|
||||
|
||||
(3)动态的模块路径
|
||||
|
||||
`import()`允许模块路径动态生成。
|
||||
|
||||
```javascript
|
||||
import(f())
|
||||
.then(...);
|
||||
```
|
||||
|
||||
上面代码中,根据函数`f`的返回结果,加载不同的模块。
|
||||
|
||||
### 注意点
|
||||
|
||||
`import()`加载模块成功以后,这个模块会作为一个对象,当作`then`方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
|
||||
|
||||
```javascript
|
||||
import('./myModule.js')
|
||||
.then(({export1, export2}) => {
|
||||
// ...·
|
||||
});
|
||||
```
|
||||
|
||||
上面代码中,`export1`和`export2`都是`myModule.js`的输出接口,可以解构获得。
|
||||
|
||||
如果模块有`default`输出接口,可以用参数直接获得。
|
||||
|
||||
```javascript
|
||||
import('./myModule.js')
|
||||
.then(myModule => {
|
||||
console.log(myModule.default);
|
||||
});
|
||||
```
|
||||
|
||||
上面的代码也可以使用具名输入的形式。
|
||||
|
||||
```javascript
|
||||
import('./myModule.js')
|
||||
.then(({default: theDefault}) => {
|
||||
console.log(theDefault);
|
||||
});
|
||||
```
|
||||
|
||||
如果想同时加载多个模块,可以采用下面的写法。
|
||||
|
||||
```javascript
|
||||
Promise.all([
|
||||
import('./module1.js'),
|
||||
import('./module2.js'),
|
||||
import('./module3.js'),
|
||||
])
|
||||
.then(([module1, module2, module3]) => {
|
||||
···
|
||||
});
|
||||
```
|
||||
|
||||
`import()`也可以用在 async 函数之中。
|
||||
|
||||
```javascript
|
||||
async function main() {
|
||||
const myModule = await import('./myModule.js');
|
||||
const {export1, export2} = await import('./myModule.js');
|
||||
const [module1, module2, module3] =
|
||||
await Promise.all([
|
||||
import('./module1.js'),
|
||||
import('./module2.js'),
|
||||
import('./module3.js'),
|
||||
]);
|
||||
}
|
||||
main();
|
||||
```
|
||||
|
||||
|
@ -211,6 +211,7 @@
|
||||
- ESDiscuss, [Why is "export default var a = 1;" invalid syntax?](https://esdiscuss.org/topic/why-is-export-default-var-a-1-invalid-syntax)
|
||||
- Bradley Meck, [ES6 Module Interoperability](https://github.com/nodejs/node-eps/blob/master/002-es6-modules.md): 介绍 Node 如何处理 ES6 语法加载 CommonJS 模块
|
||||
- Axel Rauschmayer, [Making transpiled ES modules more spec-compliant](http://www.2ality.com/2017/01/babel-esm-spec-mode.html): ES6 模块编译成 CommonJS 模块的详细介绍
|
||||
- Axel Rauschmayer, [ES proposal: import() – dynamically importing ES modules](http://www.2ality.com/2017/01/import-operator.html): import() 的用法
|
||||
|
||||
## 二进制数组
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user