Module 模块化

1. 模块起步

1-1 模块化规范

AMD —— 异步模块定义规范，最初由 require.js 库实现，用于浏览器的模块系统
CommonJS —— 为 Node.js 服务器创建的模块系统
UMD —— 通用模块定义规范，作为通用的模块系统
CMD —— 阿里 SeaJS，用于浏览器的模块系统
ES6 Module —— JavaScript 模块浏览器和服务器通用的模块系统

规范	描述
`CommonJS`	是服务器模块的规范，加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作
`AMD`	规范加载模块是异步的，并允许函数回调，不必等到所有模块都加载完成，后续操作可以正常执行，只要模块作为依赖时，就会加载并初始化
`CMD`	`CMD` 规范和 `AMD` 类似通用模块定义，模块作为依赖且被引用时才会初始化，否则只会加载
`UMD`	通用模块定义，`UMD` 是 `AMD` 和 `CommonJS` 的结合，实现跨平台的解决方案，先判断是否支持 `Node.js` 的模块（`exports`）是否存在，存在则使用 `Node.js` 模块模式。再判断是否支持 `AMD`（`define` 是否存在），存在则使用 `AMD` 方式加载模块

1-2 什么是模块？

ES Module 是 ES6 中提出的一个新的模块加载方式，完全可以取代 commonJs 和 AMD 两种模块加载方式，成为服务端和浏览器端模块加载的解决方案

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，所以在资源加载速度和静态分析方面效率更高

export —— 从当前模块外部访问的变量和函数
import —— 允许从其他模块导入功能

通过使用 <script type="module"> 特性告诉浏览器，脚本应该被当作模块 module 来对待

<!-- 添加type="module"让浏览器以模块解析脚本 -->
<script type="module">// import 从其它模块引入功能import { module } from './module.js'console.log(module)
</script>

// module.js
let module = 'ES Modules'
// export 从当前模块导出变量与方法
export { module }

1-3 模块严格模式

在模块下始终在严格模式下运行，始终使用 use strict

变量必须声明后再使用
函数的参数不能有同名属性，否则报错
全局 this 执行 undefined

<script>// 不在模块下允许 this指向windowconsole.log(this); // window
</script>
<script type="module">console.log(this); // defined
</script>

1-4 模块作用域

每个模块都有自己的作用域，一个模块中的作用域变量和函数在其他脚本中是不可访问的

对于模块，我们使用导入/导出而不是依赖全局变量

<script src="./normal.js"></script><!-- 模块A -->
<script type="module">let module = 'module js'
</script><!-- 模块B -->
<script type="module">// 对于模块只能使用导入导出 不能依赖全局变量console.log(module)//Uncaught ReferenceError module is not defined
</script><script>// 不在模块下可访问外部组用于console.log(normal)console.log(module); //Uncaught ReferenceError module is not defined
</script>

// normal.js
let normal = 'normal js'

1-5 模块解析

模块代码仅在第一次导入时被解析，当导出的对象或者其它类型数据时被修改了，后面再导入时获取的是修改后的新值

import.meta 对象包含关于当前模块的 url 信息，在浏览器环境中，它包含当前脚本的 URL，或者如果它是在 HTML 中的话，则包含当前页面的 URL

<script type="module">// import.meta获取当前脚本urlconsole.log(import.meta.url)// 模块代码仅在第一次导入时被解析// a模块导入module立即执行改变name属性 b模块引入module里的name是被更改的import {} from './module-a.js'import {} from './module-b.js'
</script>

// module.js
// 模块代码只会在第一次导入时解析
export let obj = {name: 'jsx'
}

// module-a.js
import { obj } from './module.js'
obj.name = 'ljj'

// module-b.js
import { obj } from './module.js'
console.log(obj.name)

1-6 模块延迟

模块脚本是延迟加载的，与 defer 特性一样

外部模块脚本 <script type="module" src="..."> 不会阻塞 HTML 的处理，它们会与其他资源并行加载
模块脚本会等到 HTML 文档完全准备就绪，然后才会运行
保持脚本的相对顺序：在文档中排在前面的脚本先执行

<!-- 普通脚本不会延时加载不会等待文档加载会阻塞文档加载 -->
<!-- 1. defer -->
<!-- 2. 脚本放置元素后 -->
<!-- defer async只能用于外部引入的脚本延时加载 -->
<script src="./normal.js"></script><!-- 模块脚本具有defer属性 延时加载不会阻塞文档加载 等文档加载完再加载 -->
<script type="module">let head = document.querySelector('h3')console.log(head)
</script><script type="module" src="./module.js"></script>

// module.js
// 延时加载
let head = document.querySelector('h3')
console.log(head)

// normal.js
let head = document.querySelector('h3')
console.log(head)

具有 type="module" 的内联脚本具有 async 属性，不会等待任何东西，文档加载预模块脚本谁先加载完谁就先执行

<!-- 模块内联脚本可以使用async 不会等待文档加载不会阻塞 -->
<script type="module" async>let head = document.querySelector('h3')console.log(head)
</script>

具有 type="module" 的外部脚本，具有相同 src 的外部脚本仅运行一次

从另一个源获取的外部脚本需要配置 CORS 跨域请求，远程服务器必须提供表示允许获取的 header Access-Control-Allow-Origin

<!-- 相同的外部脚本引入只运行一次 -->
<script type="module" src="./module.js" async></script>
<script type="module" src="./module.js" async></script><!-- cdnjs.cloudflare.com 必须提供 Access-Control-Allow-Origin -->
<!-- 否则，脚本将无法执行 -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>

1-7 模块路径与兼容

import 必须给出相对或绝对的 URL 路径，没有任何路径的模块被称为裸模块。在 import 中不允许这种模块
通过 nomodule 特性设置不支持 type="module" 模块的浏览器提示

<!-- 模块中import必须使用绝对或者相对路径 没有任何路径的模块无效 -->
<script type="module">// 相对引用必须以“/”、“/”或“./”开头// import { module } from 'module.js'import { module } from './module.js'
</script><!-- 兼容处理 nomodule属性 -->
<script type="module">alert("支持ES Module");
</script><script nomodule>alert("不支持ES Module")
</script>

2. 导入&导出

ES6 使用基于文件的模块，即一个文件一个模块

使用 export 将开发的接口导出
使用 import 导入模块接口
使用 * 可以导入全部模块接口
导出是以引用方式导出，无论是标量还是对象，即模块内部变量发生变化将影响已经导入的变量

表达式	说明
export function show(){}	导出函数
export const name=‘jsx’	导出变量
export class User{}	导出类
export default show	默认导出
const name = ‘jsx’ export {name}	导出已经存在变量
export {name as hd_name}	别名导出
import defaultVar from ‘hello.js’	导入默认导出
import {name,show} from ‘hello.j’	导入命名导出
Import {name as asName,show} from ‘hello.js’	别名导入
Import * as api from ‘hello.js’	导入全部接口

2-1 声明与导出

导出 export 和导入import 指令使用

在声明前导出 —— 通过在声明之前放置 export 来标记任意声明为导出，无论声明的是变量，函数还是类都可以

// 变量声明前导出
export let module = 'export'// 函数声明前导出
export function sayHi() {console.log('Hi')
}// 类声明前导出
export class User {constructor(name) {this.name = name}
}

导出与声明分开 —— 可以将 export 分开放置，通过变量，函数名，类名导出

// 声明与导出分开
let name = 'jsx'function sayHi() {console.log('Hi')
}class User {constructor(name) {this.name = name}
}export {name, sayHi, User}

2-2 具名导入

具名导入 —— 通过 import {...} 按名称导入

// 具名导出 通过import{} 按export导出名导出
import {name, sayHi, User} from './export.js'
console.log(name)
sayHi()
let user = new User('ljj')
console.log(user.name)

// export.js
let name = 'jsx'function sayHi() {console.log('Hi')
}class User {constructor(name) {this.name = name}
}export {name, sayHi, User}

import 静态导入时，模块路径必须是原始类型字符串，无法根据条件或者在运行时导入，模块默认是在顶层静态导入，为了方便模块编译打包

请注意在 {...} 中的 import/export 语句无效

if (true) {// import静态导入无法条件判断导入import {name, sayHi, User} from './export.js'
}

2-3 全部导入

全部导入 —— 使用 import * as objName 将所有内容导入为一个对象

// 通过import*全部导入到一个对象内
import * as all from './export.js'
console.log(all.name)
all.sayHi()
let user = new all.User('ljj')
console.log(user.name)

按需导入 —— 现代的构建工具 webpack 会将模块打包到一起并对其进行优化，以加快加载速度并删除未使用的代码

优化器会检测到 import 导入的变量，并从打包好的代码中删除那些未被使用的函数，从而使构建更小

// 按需导入 通过import{} 按需求导入 没有引入的函数在打包时会删除减少打包体积
import {sayHi} from './export.js'
sayHi(); // Hi

// export.js
// sayHello 函数在打包优化时会删除，因为未被引用
function sayHi() {console.log('Hi')
}function sayHello() {console.log('Hello')
}export {sayHi, sayHello}

2-4 别名

导出别名 —— 模块可以通过 as 对导出给外部的功能起别名

// 别名导出 通过as重命名
function sayHi() {console.log('Hi')
}function sayHello() {console.log('Hello')
}export {sayHi as hi, sayHello as hello}

导入别名 —— 可以为导入的模块重新命名通过 as ，可以防止模块命名冲突与模名称简洁性

<script type="module">// 别名导出后 引入必须是导出的别名import { hi, hello } from './alias.js'hi()hello()
</script><script type="module">// import as 配置别名import { hi as sayHi, hello as sayHello } from './alias.js'sayHi()sayHello()
</script>

2-5 默认导出

模块分为两种：

包含库或函数包的模块
声明单个实体的模块

模块提供了一个特殊的默认导出 export default 语法，用于导出一个模块中只有单个实体的模块

将 export default 放在要导出的实体前
每个文件可能只有一个 export default
默认导出的模块，导入时不需要花括号
由于每个文件最多只能有一个默认的导出，因此导出的实体可以没有名称

命名的导出会强制我们使用正确的名称进行导入，对于默认的导出，我们总是在导入时选择名称，团队成员可能会使用不同的名称来导入相同的内容

命名的导出	默认的导出
`export class User {...}`	`export default class User {...}`
`import {User} from ...`	`import User from ...`

// export default 一个模块只能有一个
export default function sayHello() {console.log('Hello')
}

// 默认导入模块不需要{}
import sayHello from './default.js'
sayHello()

// 默认导出可以没有名称
export default sayHello() {console.log('Hello')
}

2-6 混合导出

default 关键字被用于引用默认的导出，可以通过 as default 将函数与其定义分开导出（将函数默认导出）

// 通过default关键字将函数与定义分开导出
function sayHello () {console.log('Hello')
}export { sayHello as default }

import {default as sayHello} from './mixin.js'
sayHello()

在一个模块中同时有默认的导出和命名的导出时，使用 default as 别名为默认导出定义

// 当模块有具名与默认导出时
export default function () {console.log('Hi')
}export function sayBye() {console.log('bye')
}

// 模块导出默认与具名导出时
// default表示默认导出 将default别名配置
import {default as sayHi, sayBye} from './mixin.js'
sayHi()
sayBye()

将所有内容 * 作为一个对象导入，那么 default 属性是默认的导出

// *所有导入时 default属性为默认导入
import * as user from './mixin.js'
user.default();
console.log(user)
user.sayBye()

2-6 重新导出

export ... from ... 允许导入内容，并立即将其导出

当一个包含大量模块的文件夹需要导出一些功能到外部，每个模块都有一些功能，需要通过单个入口暴露包的功能（单个模块包含所有模块暴露的功能），需要将各个模块的功能在主文件中 import 导入再 export 导出给外部使用

重新导出时，默认导出需要单独处理，必须明确写出 export {default as User}
通过 export * from ... 重新导出只导出了命名的导出，忽略默认的导出
再通过 export {default as 别名} from ... 重新导出默认的导出

import {sayBye, friend} from './index.js'
friend()
sayBye()

// index.js
// 需要先导入各个模块功能 再导出
// import {getName, getGrilFriend, default as friend} from './get.js'
// export {getName, getGrilFriend, friend}// import {sayHello, sayHi, default as sayBye} from './say.js'
// export {sayHello, sayHi, sayBye}// 通过export from 导入重新导出
// export {getName, getGrilFriend, default as friend} from './get.js'
// export {sayHello, sayHi, default as sayBye} from './say.js'// 重新导入默认导出
// export * from ... 重新导出命名的导出
// export {default} 重新导出默认的导出
export * from './get.js'
export {default as friend} from './get.js'export * from './say.js'
export {default as sayBye} from './say.js'

// get.js
function getName() {console.log('jsx')
}function getGrilFriend() {console.log('ljj')
}function friend() {console.log('ddc zj')
}export {getName, getGrilFriend, friend as default}

// say.js
function sayHello() {console.log('Hello')
}function sayHi() {console.log('Hi')
}function sayBye() {console.log('bye')
}export {sayHello, sayHi, sayBye as default}

3. 动态导入

3-1 静态导入

通过 import ... 语句用于导入由另一个模块导出的绑定，该语句是静态导入

import 语句只能在声明了 type="module" 的 script 的标签中使用

静态导入模块路径必须是原始类型字符串
无法根据条件或者在运行时导入

import ... from getModuleName(); // error 路径必须是字符串
if(...) {import ...; // 不能条件判断执行
}

3-2 import动态导入

import(module) 表达式，它不需要依赖 type="module" 的 script 标签

该表达式加载模块并返回一个 Promise，该 Promise resolve 为一个包含其所有导出的模块对象。我们可以在代码中的任意位置调用这个表达式

静态与动态 import 优点：

按照一定的条件或者按需加载模块的时候，动态 import() 是非常有用的
静态型的 import 是初始化加载依赖项的最优选择，使用静态 import 更容易从代码静态分析工具和 tree shaking 中受益

// import() 动态导入返回Promise resolve是一个包含所有导出模块的对象
const promise = import('./get.js')
promise.then((reslove, reject) => {console.log(reslove)
})// 按需加载动态导入
if (true) {let result = import('./get.js').then(res => {res.getName()})
}async function importFunc() {let result = await import('./say.js')console.log(result)result.default()
}

<button onclick="importFunc()">按需加载</button>

3-3 Webpack编译模块

创建文件夹 bundle 生成配置 package.json

npm init -y

修改 package.json 配置文件，添加打包命令

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development --watch"
}

安装 webpack 工具包

npm i webpack webpack-cli --save-dev

目录结构

bundle文件夹
--dist打包压缩文件
--node_modules依赖包
--index.html
--src文件夹
----index.js入口文件
----style.js功能模块

index.html 内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webpack打包编译</title><script defer src="./dist/main.js"></script>
</head><body></body></html>

index.js 入口文件

import Style from './style'
Style()

style.js 功能模块

export default function () {document.body.style.backgroundColor = "#3496db"
}

执行打包

npm run dev