File tree Expand file tree Collapse file tree 2 files changed +50
-2
lines changed Expand file tree Collapse file tree 2 files changed +50
-2
lines changed Original file line number Diff line number Diff line change @@ -424,6 +424,10 @@ let api = {
424
424
};
425
425
426
426
export default api ;
427
+
428
+ /* Which is the same as
429
+ * export { api as default };
430
+ */
427
431
```
428
432
429
433
> ** 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:
471
475
import * as additionUtil from ' math/addition' ;
472
476
const { sumTwo , sumThree } = additionUtil;
473
477
```
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
+ ```
474
498
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 :
476
500
477
501
``` javascript
478
502
import React from ' react' ;
Original file line number Diff line number Diff line change @@ -449,14 +449,38 @@ import * as util from 'math/addition';
449
449
import * as additionUtil from ' math/addtion' ;
450
450
const { sumTwo , sumThree } = additionUtil;
451
451
```
452
+ 像这样引用默认对象:
452
453
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:
454
472
455
473
``` javascript
456
474
import React from ' react' ;
457
475
const { Component , PropTypes } = React;
458
476
```
459
477
478
+ 更简化版本:
479
+
480
+ ``` javascript
481
+ import React , { Component , PropTypes } from ' react' ;
482
+ ```
483
+
460
484
> ** 注意** :被导出的值是被 ** 绑定的(原文:bingdings)** ,而不是引用。
461
485
所以,改变一个模块中的值的话,会影响其他引用本模块的代码,一定要避免此种改动发生。
462
486
You can’t perform that action at this time.
0 commit comments