coderwhy课程笔记（7）

浏览器的前端模块化：Es Module. (1. 浏览器本身支持es module, 2. 使用webpack, 将源码进行解析和打包，转成普通浏览器可以识别的js代码）

导出的几种方式：1. export { name } ; 2. export { name as fname}; 3. export const name = "fname" ;

导入的几种方式：1. import { name } from "./foo.js"; 2. import { name as fname } from "./foo.js" ; 3. import * as foo from "./foo.js"

import 和 export的结合使用：export { formatCount, formatDate } from './format.js' => 优化：export * from './format.js'

default用法：默认导出，导出的时候不用指定名字，导入的时候不需要{}, 并且可以自己指定名字。

1. 
function test () {
    xxxx
}
export default test

2. (一个模块只能有一个默认导出)
export default function () {
    xxxx
} 

import函数：

普通的导入，必须放在模块顶层，不能放到逻辑代码块里。import函数没有这个限制。

let flag = true
if (flag) {
    import { name, age, sayHello } from './foo.js' //会报错,只能用import函数
    const importPromise = import("./foo.js") //异步非阻塞
    importPromise.then(res => {
        console.log(res.name, res.age)
    })
}   

import时，from后面的字符串不能动态生成、拼接，即不能等到执行的时候才知道。

import.meta 是一个给JS模块暴露特定上下文的元数据属性的对象。

ES Module的解析原理：

ES modules: A cartoon deep-dive – Mozilla Hacks – the Web developer blog

模块环境记录，指的是记录每个模块的导出变量列表的内存结构。在阶段二分配地址，在阶段三填充值。