模块化开发与规范标准

ES Modules特性

通过给script添加type= module的属性，就可以以ES Module的标准执行其中的JS代码

1. ESM采用严格模式。严格模式下不可打印this
2. 每个ESM都是运行在单独的私有作用域中
3. ESM是通过CORS的方式请求外部JS模块的
4. ESM的script标签会延迟执行脚本。等同于添加了defer属性

ES Modules导出

通过export 关键词导出，import导入。
通过as关键词进行导出时的重命名。
导出的模块本质上是导入的变量的引用，而不是值

export {变量名 as 重命名} 

tips:如果重命名为default，变量模块会成为默认导出成员。import时不能引入default关键词，必须进行重命名。

export {
	name as default
}

import {default as 重命名} form './module.js'

另外一种方式，也可以直接将某个变量模块默认导出

export default name

此时导入，可以使用任意变量名进行重命名

import 重命名 from './module.js'

导入

• from路径需要是完整文件名称，不可省略文件扩展名
• 相对路径的./不可省略，字母开头会被默认为加载第三方模块
• 只执行模块而无需提取模块中成员时，可import {}的方式导入。

import{} form '路径'
//还可简写为
import '路径'

• import * 可提取所有模块，as关键词重命名这个导出对象，所有模块作为这个对象的属性出现

import * as mod form './module.js'
//mod.成员名称的方式可取到对应成员

• import只是导入申明的关键词，必须在最顶层才能被识别，因此不能出现在if等条件语句中。当模块路径不确定时，可通过按需加载的方式导入。

import('./module.js').then(function(module){
	console.log(module)
})

• 可同时导入默认和命名成员

import {name,age,default as title} from './module.js'
//可简写为
import title,{name,age} from './module.js'

导入的同时直接导出export

通过关键词export可直接将导入的成员作为模块直接导出，当前作用域不可访问此模块。一般用于统一index文件导出多个组件的情况，避免每次使用都需要导入做个组件。

ES Module浏览器环境兼容

引入es-module-loader

ESM 与CommonJs

• ESM 中可导入CommonJs模块
• CommonJs中不可导入ESM模块
• CommonJs始终只会导出一个默认成员
• import不是结构导出对象