模块化开发

基础介绍

Modules特性

1. 通过给script添加type = module属性，可以以ES Module 的标准执行其中的JS代码。每个ES Module都是运行在单独的私有作用域中，this指针不能在全局范围内使用。

<script type = 'module'>
	console.log(this) //不可访问
</script>

2. ESM 是通过CORS的方式请求外部JS模块，请求的地址支持CORS才可以访问
3. ESM 的script 的标签会延迟执行的脚本添加type = module之后无需等到脚本执行完成就可以加载页面

ES Modules导入与导出

export {}//模块内对外暴露接口，import {}//模块内导入其他模块提供的接口

export var name = 'foo module'
export function hello(){console.log("111")}
export class Person{}
//或使用尾部集中导出的方式暴露接口
export {name,hello, Person }//不是字导出面量，而是export固定语法
//在导出时可将一个模块重命名，导入时需用重命名之后的名字。将导出成员命名为defult时表示默认导出该成员，但是导入时，必须重命名默认成员
export {name as default,hello as fooHello}
export default name -> import fooName from './module.js'
//在其他文件中引入模块
import {defult as fooName} from './module.js'//导出成员的地址，而非成员的值
name = 'tom'//外部导入的成员只可读，无法修改

consol.log(name)

import导入语法：

1. 导入路径必须完整路径，不可省略扩展名，必须要以’./'开头（ 路径以字母开头默认加载第三方模块），可以使用网络地址
2. 执行模块而无需提取模块成员时可以使{}内为空或import './module.js '。在导入无需外界控制的子功能中使用
3. 导出模块过多，且都需要导入，则可以用import * as mod from './module.js' console.log(mod)将导出模块放到一个对象中使用
4. 动态导入：模块路径需要在开发阶段指定，但实际路径在运行阶段才可以确定，import只能出现在最顶层全局作用域，无法将模块地址赋值到一个变量或者使用逻辑判断赋值模块路径时就需要动态导入模块

import('./module.js').then(function(module){
	console.log(module)//得到的是一个对象
})

5. 同时导出匿名成员和默认成员时将先书写默认成员，可以直接重命名

import abc ,{name ,age} from './module.js'
console.log(name,age,abc)

export{name,age}
console.log(`dmodule action `)
export defult `defult export`

为避免一个文件中多次导入所有模块造成代码冗余，在导入的时候直接导出，汇总所有的模块，通常放到index.js中。直接导出时，本模块无法使用导出变量。

//Avator.js 文件
export {Avator}

export {Avator} from './avator.js'
export {defult as Buttom} from './button.js'