（基础）JavaScript中 ES Module

JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等， 所以在ES推出自己的模块化系统时，大家也是兴奋异常

ES Module和CommonJS的模块化有一些不同之处：

• 一方面它使用了import和export关键字；
• 另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

ES Module模块采用export和import关键字来实现模块化

• export负责将模块内的内容导出；
• import负责从其他模块导入内容；

采用ES Module将自动采用严格模式：use strict

浏览器中演示ES6的模块化开发：

type="module"声明是模块，不是普通js代码

<script src="./modules/foo.js" type="module"></script>
<script src="main.js" type="module"></script>

如果直接在浏览器中运行代码会报错

• 你需要注意本地测试 — 如果你通过本地加载Html 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误，因为 Javascript 模块安全性需要
• 你需要通过一个服务器来测试
• 我这里使用的VSCode，VSCode中有一个插件：Live Server

export关键字

export关键字将一个模块中的变量、函数、类等导出；

方式一：在语句声明的前面直接加上export关键字

// 1.第一种方式: export 声明语句
export const name = "swh"
export const age = 18

export function foo() {
  console.log("foo function")
}

export class Person {

}

方式二：将所有需要导出的标识符，放到export后面的 {}中

• 注意：这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的；
• 所以： export {name: name}，是错误的写法；

// 2.第二种方式: export 导出 和 声明分开
const name = "swh"
const age = 18
function foo() {
  console.log("foo function")
}

export {
  name,
  age,
  foo
}

方式三：导出时给标识符起一个别名

// 3.第三种方式: 第二种导出时起别名
const name = "swh"
const age = 18
function foo() {
  console.log("foo function")
}

export {
  name as fName,
  age as fAge,
  foo as fFoo
}

import关键字

import关键字负责从另外一个模块中导入内容

方式一：import {标识符列表} from '模块'；

• 注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；

// 1.导入方式一: 普通的导入
import { name, age, foo } from "./foo.js"
//import { fName, fAge, fFoo } from './foo.js'   导出时别名

方式二：导入时给标识符起别名

// 2.导入方式二: 起别名
import { name as fName, age as fAge, foo as fFoo } from './foo.js'

方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上

// 3.导入方式三: 将导出的所有内容放到一个标识符中
import * as foo from './foo.js'

console.log(foo.name)
console.log(foo.age)
foo.foo()

export和import结合使用

export和import可以结合使用导出多个模块

// 1.导出方式一:分别导入在导出指定属性
import { add, sub } from './math.js'
import { timeFormat, priceFormat } from './format.js'
export {
  add,
  sub,
  timeFormat,
  priceFormat
}

// 2.导出方式二:直接导出引入的指定属性
export { add, sub } from './math.js'
export { timeFormat, priceFormat } from './format.js'

// 3.导出方式三:直接导出引入的所有属性（阅读性不好）
export * from './math.js'
export * from './format.js'

使用时直接在main.js中引入index.js文件即可 

import { add, sub, priceFormat, timeFormat } from './utils/index.js'

console.log(add(10, 20))
console.log(sub(10, 20))
console.log(priceFormat())
console.log(timeFormat())

为什么要这样做呢？

• 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；
• 这样方便指定统一的接口规范，也方便阅读；
• 这个时候，我们就可以使用export和import结合使用；

default用法

前面我们学习的导出功能都是有名字的导出（named exports）：

• 在导出export时指定了名字；
• 在导入import时需要知道具体的名字；

还有一种导出叫做默认导出（default export）

• 默认导出export时可以不需要指定名字；
• 在导入时不需要使用 {}，并且可以自己来指定名字；
• 它也方便我们和现有的CommonJS等规范相互操作；

注意：在一个模块中，只能有一个默认导出（default export）；

方式一

const age = 18
const foo = "foo value"

// 1.默认导出的方式一:
export {
  age as default,
  // foo as default   //只能默认导出一个
}

方式二：常用

const age = 18
const foo = "foo value"

// 2.默认导出的方式二: 常见
export default foo

引入默认导出

// 导入语句: 导入的默认的导出，自定义名称不需要{}
import swh from './foo.js'

console.log(swh)    

//方式一导出：18
//方式二导出：foo value

默认导出和指定导出

//指定导出
export const age = 18
const foo = "foo value"

//默认导出
export default foo

默认导入和指定导入

import swh , {age} from './foo.js'  //默认和指定同时导入
// import {age} from './foo.js'    //指定导入
console.log(swh)    // foo value
console.log(age);   // 18