使用
命令有: 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
- 同一个模块如棵加载多次,只执行一次