Skip to content

Commit c9df99c

Browse files
committed
docs(module): edit module
1 parent e26aa6b commit c9df99c

File tree

1 file changed

+64
-18
lines changed

1 file changed

+64
-18
lines changed

docs/module.md

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -347,19 +347,19 @@ export default foo;
347347
下面比较一下默认输出和正常输出。
348348

349349
```javascript
350-
// 输出
351-
export default function crc32() {
350+
// 第一组
351+
export default function crc32() { // 输出
352352
// ...
353353
}
354-
// 输入
355-
import crc32 from 'crc32';
356354

357-
// 输出
358-
export function crc32() {
355+
import crc32 from 'crc32'; // 输入
356+
357+
// 第二组
358+
export function crc32() { // 输出
359359
// ...
360360
};
361-
// 输入
362-
import {crc32} from 'crc32';
361+
362+
import {crc32} from 'crc32'; // 输入
363363
```
364364

365365
上面代码的两组写法,第一组是使用`export default`时,对应的`import`语句不需要使用大括号;第二组是不使用`export default`时,对应的`import`语句需要使用大括号。
@@ -399,18 +399,32 @@ export default var a = 1;
399399

400400
上面代码中,`export default a`的含义是将变量`a`的值赋给变量`default`。所以,最后一种写法会报错。
401401

402-
有了`export default`命令,输入模块时就非常直观了,以输入jQuery模块为例。
402+
有了`export default`命令,输入模块时就非常直观了,以输入 lodash 模块为例。
403+
404+
```javascript
405+
import _ from 'lodash';
406+
```
407+
408+
如果想在一条`import`语句中,同时输入默认方法和其他变量,可以写成下面这样。
403409

404410
```javascript
405-
import $ from 'jquery';
411+
import _, { each } from 'lodash';
406412
```
407413

408-
如果想在一条import语句中,同时输入默认方法和其他变量,可以写成下面这样
414+
对应上面代码的`export`语句如下
409415

410416
```javascript
411-
import customName, { otherMethod } from './export-default';
417+
export default function (obj) {
418+
// ···
419+
}
420+
export function each(obj, iterator, context) {
421+
// ···
422+
}
423+
export { each as forEach };
412424
```
413425

426+
上面代码的最后一行的意思是,暴露出`forEach`接口,默认指向`each`接口,即`forEach``each`指向同一个方法。
427+
414428
如果要输出默认的值,只需将值跟在`export default`之后即可。
415429

416430
```javascript
@@ -432,6 +446,34 @@ let o = new MyClass();
432446

433447
如果在一个模块之中,先输入后输出同一个模块,`import`语句可以与`export`语句写在一起。
434448

449+
```javascript
450+
export { foo, bar } from 'my_module';
451+
452+
// 等同于
453+
import { foo, bar } from 'my_module';
454+
export { foo, boo};
455+
```
456+
457+
上面代码中,`export``import`语句可以结合在一起,写成一行。
458+
459+
模块的改名输出和整体输出,也可以采用这种写法。
460+
461+
```javascript
462+
// 改名输出
463+
export { foo as myFoo } from 'my_module';
464+
465+
// 整体输出
466+
export * from 'my_module';
467+
```
468+
469+
默认输出的写法如下。
470+
471+
```javascript
472+
export { default } from 'foo';
473+
```
474+
475+
将某个接口改为默认输出的写法如下。
476+
435477
```javascript
436478
export { es6 as default } from './someModule';
437479

@@ -440,7 +482,11 @@ import { es6 } from './someModule';
440482
export default es6;
441483
```
442484

443-
上面代码中,`export``import`语句可以结合在一起,写成一行。但是从可读性考虑,不建议采用这种写法,而应该采用标准写法。
485+
同样地,默认输出也可以改名为具名接口。
486+
487+
```javascript
488+
export { default as es6 } from './someModule';
489+
```
444490

445491
另外,ES7有一个[提案](https://github.com/leebyron/ecmascript-more-export-from),简化先输入后输出的写法,拿掉输出时的大括号。
446492

@@ -1064,15 +1110,15 @@ import(`./section-modules/${someVariable}.js`)
10641110

10651111
### ES6 module transpiler
10661112

1067-
[ES6 module transpiler](https://github.com/esnext/es6-module-transpiler)是square公司开源的一个转码器,可以将ES6模块转为CommonJS模块或AMD模块的写法,从而在浏览器中使用。
1113+
[ES6 module transpiler](https://github.com/esnext/es6-module-transpiler)是 square 公司开源的一个转码器,可以将 ES6 模块转为 CommonJS 模块或 AMD 模块的写法,从而在浏览器中使用。
10681114

10691115
首先,安装这个转玛器。
10701116

10711117
```bash
10721118
$ npm install -g es6-module-transpiler
10731119
```
10741120

1075-
然后,使用`compile-modules convert`命令,将ES6模块文件转码
1121+
然后,使用`compile-modules convert`命令,将 ES6 模块文件转码
10761122

10771123
```bash
10781124
$ compile-modules convert file1.js file2.js
@@ -1086,9 +1132,9 @@ $ compile-modules convert -o out.js file1.js
10861132

10871133
### SystemJS
10881134

1089-
另一种解决方法是使用[SystemJS](https://github.com/systemjs/systemjs)。它是一个垫片库(polyfill),可以在浏览器内加载ES6模块、AMD模块和CommonJS模块,将其转为ES5格式。它在后台调用的是Google的Traceur转码器
1135+
另一种解决方法是使用 [SystemJS](https://github.com/systemjs/systemjs)。它是一个垫片库(polyfill),可以在浏览器内加载 ES6 模块、AMD 模块和 CommonJS 模块,将其转为 ES5 格式。它在后台调用的是 Google 的 Traceur 转码器
10901136

1091-
使用时,先在网页内载入system.js文件
1137+
使用时,先在网页内载入`system.js`文件
10921138

10931139
```html
10941140
<script src="system.js"></script>
@@ -1104,7 +1150,7 @@ $ compile-modules convert -o out.js file1.js
11041150

11051151
上面代码中的`./app`,指的是当前目录下的app.js文件。它可以是ES6模块文件,`System.import`会自动将其转码。
11061152

1107-
需要注意的是,`System.import`使用异步加载,返回一个Promise对象,可以针对这个对象编程。下面是一个模块文件。
1153+
需要注意的是,`System.import`使用异步加载,返回一个 Promise 对象,可以针对这个对象编程。下面是一个模块文件。
11081154

11091155
```javascript
11101156
// app/es6-file.js:

0 commit comments

Comments
 (0)