ES Module

发表于 更新于 阅读次数：
ES6官方化了模块，使得在浏览器端不再需要引入额外的库来实现模块化的编程（当然浏览器的支持与否，这里暂不讨论）。ES Module的使用也很简单，相关语法也很少，核心是import和export

一，区别于commonJS

  • import和export是关键字
  • 采用编译器的静态分析，并且也加入了动态引用的方式（在代码解析阶段执行，所以不能写到逻辑代码中。逻辑代码是个执行过程）

二，语法

–导出–

​ 导出的是变量的引用，就是地址，所以改动了值，导出的内容也会改变。

image-20210916192559447

方式一：
1
2
3
4
export const name="why"
export const sayHello=function(name){
    // 方法
}
方式二：{} 中统一导出
1
2
3
4
5
// {放置要导出的变量的引用列表}
export {
	name,
    sayHello
}
方式三：{} 导出时，可以给变量起别名
1
2
3
4
export {
	name as FName,
    sayHello as FSayHello
}

–导入–

方式一：
1
2
// 这里的{}不是对象
import {name,sayHello} from './xx/xx.js'
方式二：{} 导出变量之后可以起别名
1
2
// 这里的{}不是对象
import {name as oName,sayHello as oSayHello} from './xx/xx.js'
方式三：* as foo
1
2
3
// 放入一个对象中
import * as foo from './xx/xx.js'
foo.name

–default–

1
2
3
4
export default function(){
    方法（）
}
import 自定义名字 from "./x"

注意：一个模块只有一个default

三，ConmonJS和ES Module交互

  • 通常情况下，cjs不能加载ES Module
  • 多数情况下，ES Module可以加载cjs