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

@ -1,22 +1,22 @@
# ECMAScript 6简介 # ECMAScript 6简介
ECMAScript 6.0以下简称ES6是JavaScript语言的下一代标准已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序成为企业级开发语言。 ECMAScript 6.0(以下简称 ES6 JavaScript 语言的下一代标准已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
## ECMAScript和JavaScript的关系 ## ECMAScript JavaScript 的关系
一个常见的问题是ECMAScript和JavaScript到底是什么关系 一个常见的问题是ECMAScript JavaScript 到底是什么关系?
要讲清楚这个问题需要回顾历史。1996年11月JavaScript的创造者Netscape公司决定将JavaScript提交给国际标准化组织ECMA希望这种语言能够成为国际标准。次年ECMA发布262号标准文件ECMA-262的第一版规定了浏览器脚本语言的标准并将这种语言称为ECMAScript这个版本就是1.0版。 要讲清楚这个问题需要回顾历史。1996年11月JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA希望这种语言能够成为国际标准。次年ECMA 发布262号标准文件ECMA-262的第一版规定了浏览器脚本语言的标准并将这种语言称为 ECMAScript这个版本就是1.0版。
该标准从一开始就是针对JavaScript语言制定的但是之所以不叫JavaScript有两个原因。一是商标Java是Sun公司的商标根据授权协议只有Netscape公司可以合法地使用JavaScript这个名字且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA不是Netscape这样有利于保证这门语言的开放性和中立性。 该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript有两个原因。一是商标Java Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA不是 Netscape这样有利于保证这门语言的开放性和中立性。
因此ECMAScript和JavaScript的关系是前者是后者的规格后者是前者的一种实现另外的ECMAScript方言还有Jscript和ActionScript。日常场合这两个词是可以互换的。 因此ECMAScript JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript ActionScript。日常场合这两个词是可以互换的。
## 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,15 +40,15 @@ 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 的历史
ES6从开始制定到最后发布整整用了15年。 ES6 从开始制定到最后发布整整用了15年。
前面提到ECMAScript 1.0是1997年发布的接下来的两年连续发布了ECMAScript 2.01998年6月和ECMAScript 3.01999年12月。3.0版是一个巨大的成功在业界得到广泛支持成为通行标准奠定了JavaScript语言的基本语法以后的版本完全继承。直到今天初学者一开始学习JavaScript其实就是在学3.0版的语法。 前面提到ECMAScript 1.0是1997年发布的接下来的两年连续发布了 ECMAScript 2.01998年6月 ECMAScript 3.01999年12月。3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript其实就是在学3.0版的语法。
2000年ECMAScript 4.0开始酝酿。这个版本最后没有通过但是它的大部分内容被ES6继承了。因此ES6制定的起点其实是2000年。 2000年ECMAScript 4.0开始酝酿。这个版本最后没有通过但是它的大部分内容被ES6继承了。因此ES6制定的起点其实是2000年。

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

@ -116,7 +116,7 @@
- Jason Orendorff, [ES6 In Depth: Collections](https://hacks.mozilla.org/2015/06/es6-in-depth-collections/)Set和Map结构的设计思想 - Jason Orendorff, [ES6 In Depth: Collections](https://hacks.mozilla.org/2015/06/es6-in-depth-collections/)Set和Map结构的设计思想
- Axel Rauschmayer, [Converting ES6 Maps to and from JSON](http://www.2ality.com/2015/08/es6-map-json.html): 如何将Map与其他数据结构互相转换 - Axel Rauschmayer, [Converting ES6 Maps to and from JSON](http://www.2ality.com/2015/08/es6-map-json.html): 如何将Map与其他数据结构互相转换
## Proxy和Reflect ## Proxy Reflect
- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) - Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/)
- Axel Rauschmayer, [Meta programming with ECMAScript 6 proxies](http://www.2ality.com/2014/12/es6-proxies.html): Proxy详解 - Axel Rauschmayer, [Meta programming with ECMAScript 6 proxies](http://www.2ality.com/2014/12/es6-proxies.html): Proxy详解
@ -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() 的用法
## 二进制数组 ## 二进制数组