es6的新特性使用

使用

命令有： export、import 、export default

文件a.js

export a = 1
export b = 2

相当于

const a = 1;
const b = 2;
export { a, b }

在文件b.js中引入

import { a, b } from './a.js'

引入是重命名

import { a as reA, b as reB } from './a.js' // reA reB是重命名的变量

整体引入：

import * as all from './a.js'
all.a // 1
all.b // 2
// all 相当于{ a, b }

export default默认输出

export default导出的模块在引入时可以自定义命名

export default function() {
...
}

依然用import 引入,但是不用{}，且可以自定义变量名

import name from './a.js'
name()

从一个模块导入，然后再导出

// 写法一：
import { a, b } from './a.js'
export { a, b }
// 写法二：
export { a, b } from './a.js'
// 改名导出
export { a as reA, b } from './a.js'
// 整体导出
export * from './a.js'

在浏览器中使用module

将script标签的type设为module即可

<!-- 方法一 -->
<script type="module" src="./a.js"></script>
<!-- 方法二 -->
<script type="module">
import { a } from './a.js'
</script>

其中：

• type="module"的script内写的代码是在当前作用域，不是在全局。
• 模块内自动采用严格模式
• 顶层的this指向undefined
• 同一个模块如棵加载多次，只执行一次