持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第31天,点击查看活动详情
今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学ES6+,前面我们介绍了模块化的历史,今天介绍模块化处理方案
export function foo() { console.log("foo function") }
export class Person { }
// 2.第二种方式: export 导出 和 声明分开 const name = "why" const age = 18 function foo() { console.log("foo function") }
export { name, age, foo }
// 3.第三种方式: 第二种导出时起别名 export { name as fName, age as fAge, foo as fFoo }
## import关键字
* import关键字负责从另外一个模块中导入内容
* 导入内容的方式也有多种:
* 方式一:import {标识符列表} from '模块';
* 注意:这里的{}也不是一个对象,里面只是存放导入的标识符列表内容;
* 方式二:导入时给标识符起别名
* 方式三:通过 * 将模块功能放到一个模块功能对象(a module object)上
### 代码演示
```js
// 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'
// 3.导入方式三: 将导出的所有内容放到一个标识符中
import * as foo from './foo.js'
console.log(foo.name)
console.log(foo.age)
foo.foo()
const name = "main"
console.log(name)
console.log(age)
export { add, sub, timeFormat, priceFormat }
## default用法
* 前面我们学习的导出功能都是有名字的导出(named exports):
* 在导出export时指定了名字;
* 在导入import时需要知道具体的名字;
* 还有一种导出叫做默认导出(default export)
* 默认导出export时可以不需要指定名字;
* 在导入时不需要使用 {},并且可以自己来指定名字;
* 它也方便我们和现有的CommonJS等规范相互操作;
* 注意:在一个模块中,只能有一个默认导出(default export);
### 代码演示
```js
const name = "why"
const age = 18
const foo = "foo value"
// 1.默认导出的方式一:
export {
// named export
name,
// age as default,
// foo as default
}
// 2.默认导出的方式二: 常见
export default foo
// 注意: 默认导出只能有一个
// console.log(name)
// import函数返回的结果是一个Promise import("./foo.js").then(res => { console.log("res:", res.name) })
console.log("后续的代码都是不会运行的~")
// ES11新增的特性 // meta属性本身也是一个对象: { url: "当前模块所在的路径" } console.log(import.meta)
## ES Module的解析流程
* ES Module的解析过程可以划分为三个阶段:
* 阶段一:构建(Construction),根据地址查找js文件,并且下载,将其解析成模块记录(Module Record);
* 阶段二:实例化(Instantiation),对模块记录进行实例化,并且分配内存空间,解析模块的导入和导出语句,把模块指向 对应的内存地址。
* 阶段三:运行(Evaluation),运行代码,计算值,并且将值填充到内存地址中;
### 代码演示
```js
// foo.js
let name = "why"
let age = 18
setTimeout(() => {
name = "kobe"
age = 40
}, 100)
export {
name,
age
}
// main.js
import { name, age } from './foo.js'
console.log(name, age)
setTimeout(() => {
console.log(name, age)
}, 2000)
// index.html
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./main.js" type="module"></script>
</body></html>
执行结果为:why 18