1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-25 03:02:21 +00:00

edit module/export default

This commit is contained in:
Ruan Yifeng 2015-07-16 15:38:31 +08:00
parent 7232ad8061
commit 01340b7e41

View File

@ -24,7 +24,7 @@ import { stat, exists, readFile } from 'fs';
模块功能主要由两个命令构成export和import。export命令用于用户自定义模块规定对外接口import命令用于输入其他模块提供的功能同时创造命名空间namespace防止函数名冲突。 模块功能主要由两个命令构成export和import。export命令用于用户自定义模块规定对外接口import命令用于输入其他模块提供的功能同时创造命名空间namespace防止函数名冲突。
ES6允许将独立的JS文件作为模块也就是说允许一个JavaScript脚本文件调用另一个脚本文件。该文件内部的所有变量外部无法获取必须使用export关键字输出变量。下面是一个JS文件里面使用export关键字输出变量。 ES6允许将独立的JS文件作为模块也就是说允许一个JavaScript脚本文件调用另一个脚本文件。该文件内部的所有变量外部无法获取必须使用export关键字输出变量。下面是一个JS文件里面使用export命令输出变量。
```javascript ```javascript
// profile.js // profile.js
@ -48,6 +48,16 @@ export {firstName, lastName, year};
上面代码在export命令后面使用大括号指定所要输出的一组变量。它与前一种写法直接放置在var语句前是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清楚输出了哪些变量。 上面代码在export命令后面使用大括号指定所要输出的一组变量。它与前一种写法直接放置在var语句前是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清楚输出了哪些变量。
export命令除了输出变量还可以输出函数或类class
```javascript
export function multiply (x, y) {
return x * y;
};
```
上面代码对外输出一个函数multiply。
## import命令 ## import命令
使用export命令定义了模块的对外接口以后其他JS文件就可以通过import命令加载这个模块文件 使用export命令定义了模块的对外接口以后其他JS文件就可以通过import命令加载这个模块文件
@ -100,10 +110,9 @@ export default es6;
## 模块的整体输入 ## 模块的整体输入
export命令除了输出变量还可以输出方法或类class下面是一个circle.js文件它输出两个方法area和circumference。 下面是一个circle.js文件它输出两个方法area和circumference。
```javascript ```javascript
// circle.js // circle.js
export function area(radius) { export function area(radius) {
@ -113,31 +122,26 @@ export function area(radius) {
export function circumference(radius) { export function circumference(radius) {
return 2 * Math.PI * radius; return 2 * Math.PI * radius;
} }
``` ```
然后main.js输入circlek.js模块。 然后main.js文件输入circlek.js模块。
```javascript ```javascript
// main.js // main.js
import { area, circumference } from 'circle'; import { area, circumference } from 'circle';
console.log("圆面积:" + area(4)); console.log("圆面积:" + area(4));
console.log("圆周长:" + circumference(14)); console.log("圆周长:" + circumference(14));
``` ```
上面写法是逐一指定要输入的方法。另一种写法是整体输入。 上面写法是逐一指定要输入的方法。另一种写法是整体输入。
```javascript ```javascript
import * as circle from 'circle'; import * as circle from 'circle';
console.log("圆面积:" + circle.area(4)); console.log("圆面积:" + circle.area(4));
console.log("圆周长:" + circle.circumference(14)); console.log("圆周长:" + circle.circumference(14));
``` ```
## module命令 ## module命令
@ -157,7 +161,9 @@ module命令后面跟一个变量表示输入的模块定义在该变量上
## export default命令 ## export default命令
为了给用户提供方便,有时我们希望,用户不用知道输入哪个方法,就能加载模块。这时就要用到`export default`命令,为所要加载的模块指定默认输出。 从前面的例子可以看出使用import的时候用户需要知道所要加载的变量名或函数名否则无法加载。但是用户肯定希望快速上手未必愿意阅读文档去了解模块有哪些属性和方法。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到`export default`命令,为模块指定默认输出。
```javascript ```javascript
// export-default.js // export-default.js
@ -178,18 +184,6 @@ customName(); // 'foo'
上面代码的import命令可以用任意名称指向`export-default.js`输出的方法。需要注意的是这时import命令后面不使用大括号。 上面代码的import命令可以用任意名称指向`export-default.js`输出的方法。需要注意的是这时import命令后面不使用大括号。
```javascript
import crc32 from 'crc32';
// 对应的输出
export default function crc32(){}
import { crc32 } from 'crc32';
// 对应的输出
export function crc32(){};
```
上面代码的两组写法,第一组是使用`export default`对应的import语句不需要使用大括号第二组是不使用`export default`对应的import语句需要使用大括号。
export default命令用在非匿名函数前也是可以的。 export default命令用在非匿名函数前也是可以的。
```javascript ```javascript
@ -209,8 +203,33 @@ export default foo;
上面代码中foo函数的函数名foo在模块外部是无效的。加载的时候视同匿名函数加载。 上面代码中foo函数的函数名foo在模块外部是无效的。加载的时候视同匿名函数加载。
下面比较一下默认输出和正常输出。
```javascript
import crc32 from 'crc32';
// 对应的输出
export default function crc32(){}
import { crc32 } from 'crc32';
// 对应的输出
export function crc32(){};
```
上面代码的两组写法,第一组是使用`export default`对应的import语句不需要使用大括号第二组是不使用`export default`对应的import语句需要使用大括号。
`export default`命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此`export deault`命令只能使用一次。所以import命令后面才不用加大括号因为只可能对应一个方法。 `export default`命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此`export deault`命令只能使用一次。所以import命令后面才不用加大括号因为只可能对应一个方法。
本质上,`export default`就是输出一个叫做default的变量或方法然后系统允许你为它取任意名字。所以下面的写法是有效的。
```javascript
// modules.js
export default function (x, y) {
return x * y;
};
// app.js
import { default } from 'modules';
```
有了`export default`命令输入模块时就非常直观了以输入jQuery模块为例。 有了`export default`命令输入模块时就非常直观了以输入jQuery模块为例。
```javascript ```javascript
@ -263,11 +282,9 @@ export default function(x) {
这时也可以将circle的属性或方法改名后再输出。 这时也可以将circle的属性或方法改名后再输出。
```javascript ```javascript
// circleplus.js // circleplus.js
export { area as circleArea } from 'circle'; export { area as circleArea } from 'circle';
``` ```
上面代码表示只输出circle模块的area方法且将其改名为circleArea。 上面代码表示只输出circle模块的area方法且将其改名为circleArea。
@ -275,13 +292,11 @@ export { area as circleArea } from 'circle';
加载上面模块的写法如下。 加载上面模块的写法如下。
```javascript ```javascript
// main.js // main.js
module math from "circleplus"; module math from "circleplus";
import exp from "circleplus"; import exp from "circleplus";
console.log(exp(math.pi)); console.log(exp(math.pi));
``` ```
上面代码中的"import exp"表示将circleplus模块的默认方法加载为exp方法。 上面代码中的"import exp"表示将circleplus模块的默认方法加载为exp方法。
@ -309,9 +324,7 @@ $ compile-modules convert file1.js file2.js
o参数可以指定转码后的文件名。 o参数可以指定转码后的文件名。
```bash ```bash
$ compile-modules convert -o out.js file1.js $ compile-modules convert -o out.js file1.js
``` ```
### SystemJS ### SystemJS