JS模块化

JS模块化

前端模块化

具有相同属性和行为的事物的集合。在前端中，将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块，为了每个js文件只关注与自身有关的事情，让每个js文件各行其职。
模块要有几个特点： 独立、完整、依赖关系

CommonJs

根CommonJs规范，每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。
该规范最初是用在服务器端的node的，前端的webpack也是对CommonJS原生支持的。

CommonJS的核心思想就是通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或者 module.exports 来导出需要暴露的接口

CommonJS采用同步加载不同模块文件，适用于服务器端的。因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务器端，不适应浏览器。

CommonJS具有缓存，多次导入相同模块都是引用的首次导入的缓存

node实际上是将模块文件中的代码放置都一个函数环境中执行，可以想象该函数是下面的样子：

function(module) {
	module.exports = {};
	var exports = module.exports;
	//模块中的代码
	return module.exports;
}

ES6 Module

ES6自带模块化，可以使用 import 关键字引入模块，通过 export 关键字导出模块，功能较其他方案更为强大

在不支持es6 module 的浏览器中，通过babel将不被支持的import编译为当前受到广泛支持的 require。

使用import关键字引入模块，通过 export 关键字导出模块

导出模块

日常使用 export default

导入模块

日常使用 import 模块名 from '模块路径'

ES6 module 采用依赖预加载模式，模块导入要写在页面顶端

不能放在判断语句及循环语句中

导入的内容放置到常量中，不可更改

ES6 module 使用了缓存，保证每个模块仅加载一次

HTML页面导入入口模块

<script src="./index.js" type="module"></script>

AMD

AMD规范则是异步加载模块，允许指定回调函数。等模块异步加载完成后即可调用回调函数。
AMD得意的产出就是require.js
AMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

官网下载require.js
在HTML文档中引入require.js文件，创建主入口文件main.js
引入

导出

CMD

CMD异步加载，跟AMD的主要区别在于，AMD依赖前置，提前加载依赖。而CMD就近加载，按需加载。

产物seaJs，跟requireJs使用有些相似。
CMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。