Skip to content

Commit 1b02c9b

Browse files
committed
Merge pull request DrkSephy#69 from hyb175/master
Modify es6 importing example to make it clearer
2 parents c3ab2e6 + 6f5780f commit 1b02c9b

File tree

2 files changed

+50
-2
lines changed

2 files changed

+50
-2
lines changed

README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,10 @@ let api = {
424424
};
425425

426426
export default api;
427+
428+
/* Which is the same as
429+
* export { api as default };
430+
*/
427431
```
428432

429433
> **Best Practices**: Always use the `export default` method at **the end** of
@@ -471,8 +475,28 @@ Lastly, we can import a list of values from a module:
471475
import * as additionUtil from 'math/addition';
472476
const { sumTwo, sumThree } = additionUtil;
473477
```
478+
Importing from the default binding like this:
479+
480+
```javascript
481+
import api from 'math/addition';
482+
// Same as: import { default as api } from 'math/addition';
483+
```
484+
485+
While it is better to keep the exports simple, but we can sometimes mix default import and mixed import if needed.
486+
When we are exporting like this:
487+
488+
```javascript
489+
// foos.js
490+
export { foo as default, foo1, foo2 };
491+
```
492+
493+
We can import them like the following:
494+
495+
```javaqscript
496+
import foo, { foo1, foo2 } from 'foos';
497+
```
474498

475-
When importing the default object we can choose which functions to import:
499+
When importing a module exported using commonjs syntax (such as React) we can do:
476500

477501
```javascript
478502
import React from 'react';

README_zhCn.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,14 +449,38 @@ import * as util from 'math/addition';
449449
import * as additionUtil from 'math/addtion';
450450
const { sumTwo, sumThree } = additionUtil;
451451
```
452+
像这样引用默认对象:
452453

453-
当我们引用默认对象,我们可以选择其中的函数:
454+
```javascript
455+
import api from 'math/addition';
456+
// Same as: import { default as api } from 'math/addition';
457+
```
458+
459+
我们建议一个模块导出的值应该越简洁越好,不过有时候有必要的话命名引用和默认引用可以混着用。如果一个模块是这样导出的:
460+
461+
```javascript
462+
// foos.js
463+
export { foo as default, foo1, foo2 };
464+
```
465+
那我们可以如此导入这个模块的值:
466+
467+
```javaqscript
468+
import foo, { foo1, foo2 } from 'foos';
469+
```
470+
471+
我们还可以导入commonjs模块,例如React:
454472

455473
```javascript
456474
import React from 'react';
457475
const { Component, PropTypes } = React;
458476
```
459477

478+
更简化版本:
479+
480+
```javascript
481+
import React, { Component, PropTypes } from 'react';
482+
```
483+
460484
> **注意**:被导出的值是被 **绑定的(原文:bingdings)**,而不是引用。
461485
所以,改变一个模块中的值的话,会影响其他引用本模块的代码,一定要避免此种改动发生。
462486

0 commit comments

Comments
 (0)