1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

docs(module): edit import()

This commit is contained in:
ruanyf 2017-02-14 07:32:28 +08:00
parent e5c9ccadca
commit 2da8eac664
4 changed files with 137 additions and 23 deletions

View File

@ -1567,7 +1567,7 @@ clownsEverywhere(
上面代码中,如果在`param2``bar`后面加一个逗号,就会报错。 上面代码中,如果在`param2``bar`后面加一个逗号,就会报错。
这样的话,如果以后修改代码,想为函数`clownsEverywhere`添加第三个参数,就势必要在第二个参数后面添加一个逗号。这对版本管理系统来说,就会显示添加逗号的那一行也发生了变动。这看上去有点冗余,因此新的语法允许定义和调用时,尾部直接有一个逗号。这与数组和对象的尾逗号规则,保持一致了。 如果像上面这样,将参数写成多行(即每个参数占据一行),以后修改代码的时候,想为函数`clownsEverywhere`添加第三个参数,或者调整参数的次序,就势必要在原来最后一个参数后面添加一个逗号。这对于版本管理系统来说,就会显示添加逗号的那一行也发生了变动。这看上去有点冗余,因此新的语法允许定义和调用时,尾部直接有一个逗号。
```javascript ```javascript
function clownsEverywhere( function clownsEverywhere(
@ -1581,3 +1581,5 @@ clownsEverywhere(
); );
``` ```
这样的规定也使得,函数参数与数组和对象的尾逗号规则,保持一致了。

View File

@ -14,9 +14,9 @@ ECMAScript 6.0以下简称ES6是JavaScript语言的下一代标准
## ES6 与 ECMAScript 2015 的关系 ## 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版等等。 但是因为这个版本引入的语法功能太多而且制定过程当中还有很多组织和个人不断提交新功能。事情很快就变得清楚了不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布6.0版过一段时间再发6.1版然后是6.2版、6.3版等等。
@ -24,13 +24,15 @@ ECMAScript 6.0以下简称ES6是JavaScript语言的下一代标准
标准委员会最终决定标准在每年的6月份正式发布一次作为当年的正式版本。接下来的时间就在这个版本的基础上做改动直到下一年的6月份草案就自然变成了新一年的版本。这样一来就不需要以前的版本号了只要用年份标记就可以了。 标准委员会最终决定标准在每年的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 0 - Strawman展示阶段
- Stage 1 - Proposal征求意见阶段 - Stage 1 - Proposal征求意见阶段
@ -38,9 +40,9 @@ ES6的第一个版本就这样在2015年6月发布了正式名称就是《
- Stage 3 - Candidate候选人阶段 - Stage 3 - Candidate候选人阶段
- Stage 4 - Finished定案阶段 - 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 的历史 ## ECMAScript 的历史

View File

@ -622,7 +622,9 @@ import {db, users} from './constants';
## import() ## import()
上面说过了,`import`语句会被JavaScript引擎静态分析先于模块内的其他模块执行叫做”连接“更合适。所以下面的代码会报错。 ### 简介
前面介绍过,`import`命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。
```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 ```javascript
const path = './' + fileName; const path = './' + fileName;
@ -648,7 +650,7 @@ const myModual = require(path);
import(specifier) import(specifier)
``` ```
上面代码中,`import`函数的参数`specifier`,指定所要加载的模块的位置。`import`语句能够接受什么参数,`import()`函数就能接受什么参数,两者区别主要是后者为动态加载。 上面代码中,`import`函数的参数`specifier`,指定所要加载的模块的位置。`import`命令能够接受什么参数,`import()`函数就能接受什么参数,两者区别主要是后者为动态加载。
`import()`返回一个 Promise 对象。下面是一个例子。 `import()`返回一个 Promise 对象。下面是一个例子。
@ -668,3 +670,110 @@ import(`./section-modules/${someVariable}.js`)
`import()`类似于 Node 的`require`方法,区别主要是前者是异步加载,后者是同步加载。 `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();
```

View File

@ -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) - 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 模块 - 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, [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() 的用法
## 二进制数组 ## 二进制数组