前边
es6 语法使用也越来越多了,本来已经落后了,再不学习就更落后落后了。
es6模块设计思想更是突出。es6模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。es6模块加载是静态加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
es6模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。
既然是模块,模块功能怎么构成呢。模块功能有 export 和 import 两部分构成。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
export
一个模块,就是一个独立的文件。通过export,将内部的变量,对象,方法,类输出给外部。并且export在顶级使用,如果在块内部使用就会报错。
export有以下一些规定。
- export 必须在顶级使用。
-
export命令规定的是对外的接口。必须用{}包裹起来,或直接 export。
-
export 输出接口与外是动态绑定的。 无论改变哪个,该数据都会改变。
-
既然export是输出接口,就有一个接受接口。接受用import,也需要要用{}包裹起来。
-
一个模块中,可以有多个 export。
-
export可以使用 as 关键字重命名。
eg:
// 错误
export 1
// 错误
var num = 2
export num
// 正确(对外的接口)
var num = 2
export {num}
// 正确
export var num = 2
// 正确(log 可以作为两个名字输出)
function log(value){}
export {
log as log1,
log as log2
}
模块通过export输出,通过import接受。
import
使用 export 命令定义了模块的对外接口以后,其他 JS 文件就可以通过 import 命令加载这个模块。
import 命令有以下规则。
- 使用大括号,接受 export 过来的对象。两边的接口名称,必须相同。如果想重命名,请使用as。
-
import 和 from配对使用,from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。
-
import命令具有提升效果,会提升到整个模块的头部,首先执行。
-
由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
-
如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。
eg:
// 正确
import {name, gender} from './userinfo'
// 正确
import {sendernickname as nickname} from './giftinfo'
// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
注意:通过 Babel 转码,CommonJS 模块的require命令和 ES6 模块的import命令,可以写在同一个模块里面,但是最好不要这样做。因为import在静态解析阶段执行,所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。
模块整体加载。
# 整体加载,所export的对象都成为circle的对象了,但是 circle的对象不能再赋值改变了。
import * as circle from './circle'
// 错误
circle.area = function(){}
// 错误
circle.abc = 'abc'
不仅export可以输出, export default 也是可以输出的。
export default
export default 和 export一样,也是用来输出接口的。不过,一个模块中,只有一个 export default,并且,import的时候,也不需要使用{}
export 与 import 的复合写法
export { foo, bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };
模块的继承
模块之间也是可以继承的。
参考
http://es6.ruanyifeng.com/#docs/module#export-default-
http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632