模块化

概念

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；

块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

作用

避免命名冲突、避免全局变量污染

便于代码编写和维护

早期的模块化

立即执行函数

通过函数作用域解决了命名冲突、污染全局的问题

(function (a) {
    // 在这里面声明各种变量、函数都不会污染全局作用域
})(a)

模块化方案

1、CommonJS

①在node环境下使用，不支持浏览器环境
②NodeJS遵循的规范
③使用require()进行引入依赖
④使用exports进行暴露模块

2、AMD

①浏览器环境下的异步加载模块
②RequireJS遵循的规范
③依赖于require.js模块管理工具库
④AMD 推崇依赖前置

3、CMD

①浏览器环境下，同时支持异步和同步加载
②SeaJS遵循的规范
③CMD 推崇依赖就近

4、ES6 module

ES6模块化语法在编译时就能确定模块的依赖关系，还能确定好输入输出的变量声明，已经不仅仅是模块规范，现在已经作为JS语言的标准语法使用，有以下特性：

①浏览器环境、服务器环境都支持
②编译时就能确定模块的依赖关系及变量，其他模块规范都是在运行时确定的
③export命令用于规定模块的对外接口
④import命令用于输入其他模块提供的功能

CommonJs和ES6 module的区别

CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。

// 导入
const http = require('http')

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

运行在浏览器端的 JavaScript 由于也缺少类似的规范，在 ES6 出来之前，前端也实现了一套相同的模块规范 (例如: AMD)，用来对前端模块进行管理。

自 ES6 起，引入了一套新的 ES6 Module 规范，在语言标准的层面上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。

import "模块路径"
import {a,b} from "模块路径"
import c from "模块路径"//默认导入


// 导出
export function a(){}
export const b = ()=>{}
//默认导出
export default {
	xx:yy,
	aa:bb
	...
}

但目前浏览器对 ES6 Module 兼容还不太好，我们平时在 Webpack 中使用的 export 和 import，会经过 Babel 转换为 CommonJS 规范。

在**使用上的差别**主要有：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。（一旦输出一个值，模块内部的变化就影响不到这个值）

CommonJS 是同步加载模块，ES6 是异步加载模块。（主要用于服务器编程，模块文件一般都已经存在于本地，加载起来比较快）

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

CommonJs 是单个值导出，ES6 Module可以导出多个

CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层

CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined

参考

https://www.yisu.com/zixun/452499.html

https://blog.csdn.net/weixin_39690316/article/details/122946850

https://blog.csdn.net/qq_45890970/article/details/123541700?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-123541700-blog-123954229.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3