Bootstrap

一、前端工程化之模块化

为什么需要模块化

当前端工程到达一定规模后,就会出现下面的问题:

  • 全局变量污染。当代码行数多起来,避免不了有时对全局变量的污染;提供的全局工具函数,需要对全局变量进行操作是;
  • 依赖混乱。项目各个文件多起来时,后期维护很难去识别文件彼此间的依赖关系。

上面的问题,共同导致了代码文件难以细分

模块化 就是为了解决上面两个问题出现的

模块化出现后,我们就可以把臃肿的代码细分到各个小文件中,便于后期维护管理

模块化的标准

  1. CommonJS:简称 CMJ ,目前 仅node 环境支持(社区标准)
  2. ES Module: 简称 ESM ,这是随着ES6发布的官方模块化标准,目前 浏览器和新版本node环境 均支持(官方标准)
    在这里插入图片描述

CommonJS的模块化规范

  1. node中的每个js文件均是一个模块,运行的模块,叫做入口模块

  2. 模块中的所有全局定义的变量、函数,都不会污染到其他模块

  3. 当一个模块需要提供一些内容(可能时变量、对象、函数等)给别的函数使用时,需要将这些内容 导出,用 module.exports 导出

  4. 当一个模块需要用到别的模块的内容时,需要将这些 导入,用 require,即require(‘要导入的模块路径’),且注意:

    导入模块时,可以省略.js
    导入的模块路径,必须是 ./ 或者 ../ 开头

  5. 一个模块在被导入时会运行一次,它的导出结果就会被node缓存起来,后续对该模块导入时,不会重新运行,直接使用缓存结果

// 导出
module.exports = 导出的值

// 导入
const importModuleContent =  require('模块的路径') 

// 函数返回模块导出的值
console.log(importModuleContent)

ES Module的模块规范

ES Module 分为两种导出方式:

具名导出(普通导出),可以导出多个
默认导出,只能导出一个

一个模块可以同时存在两种导出方式,最终会合并为一个对象导出。

html 文件 script 标签中 type=“module” 是指将引入的 js 文件当成一个模块进行引入。

// 工程项目,一般是以main.js作为入口模块,运行时分析入口模块所依赖的其它模块
<script src="./main.js" type="module"></script>

导出方式:

// 具名导出,常用
export const a = 1;

// 具名导出函数
export function b() {}
export const c = () => {}

// 具名导出
const d = 3;
export { d }

// 具名导出,并改想要的具名
const g = 100
export { g as temp }

// 错误具名写法 X
const errValue = 12
export errValue //错误

// 默认导出
const test = 1
export default test
export default function {}
const n = 10
export { n as default } 

注意:导出代码必须为顶级代码,即不可放到代码块中(例如:放在判断中 等)

导入方式:

// 仅运行一次该模块,不导入任何内容
import '模块路径'

// 常用,导入属性,a => a, b => b
import { a, b } from '模块路径'

// 常用,导入属性default, 放到变量c中。default => c
import c from '模块路径'

// 常用,将模块对象放入到变量obj中
import * as obj from '模块路径'

//导入属性 a、b, 放到变量temp1、temp2中
import { a as temp1, b as temp2 } from '模块路径'

//以上代码均为静态导入

// 动态导入,返回一个Promise,完成时的数据为模块对象
import('模块路径')

// 示例
// main.js:导出的模块 
export {
	a,
	b
}

// 动态导入 main.js去加载这个模块
setTimeout((), () => {
	import('./main.js').then(module => {
		//输出为:{ a, b }
		console.log(module.default)
	})
})

注意:静态导入的代码必须为代码顶端,也不可放入代码块中
另外,静态代码的导入绑定的符号是常量,不可更改

最后区分一下静态导入和动态导入:

静态依赖:代码运行前就要分析出依赖关系。
动态依赖:代码运行过程中调用才会导入,分析依赖关系。

;