JavaScript模块化

前言：模块化开发需求

在JS早期，使用script标签引入JS，会造成以下问题：

加载的时候阻塞网页渲染，引入JS越多，阻塞时间越长。
容易污染全局变量。
js文件存在依赖关系，加载必须有顺序。项目较大时，依赖会错综复杂。
引入的JS文件过多，不美观，且不易于管理。

一、CommonJS规范

CommonJS Modules/1.0规范，服务器端规范。

Node.js推广使用。该规范的核心是：允许模块使用require方法来同步加载所依赖的其他模块，然后通过exports或module.exports导出需要暴露的接口。

特点：

一个模块是一个文件

使用module.exports或exports导出模块

1	// module.js
2	exports.add = (a, b) => a+b
3
4	module.exports = {
5	  add: (a, b) => a + b
6	}

使用require加载模块

1	a. require命令第一次加载模块时，执行整个脚本，在内存中生成对象
2	b. 多次执行require命令再次加载该模块时，不会再执行该脚本，直接从缓存中取值
3	c. CommonJS加载模块是同步加载模块

Tips：

为什么CommonJS规范不适合作为浏览器的规范

	由于CommonJS是同步加模块，在服务端加载模块时都是从本地硬盘中加载，读取速度很快。但是在浏览器端加载模块时，需要请求服务器端，涉及网速、代理的问题，一旦等待时间过长，浏览器会处于“假死”状态。

二、ADM规范

AMD（Asynchronous Module Definition）异步模块定义，客户端规范。采用异步方式加载模块，模块加载不影响它后面语句的代执行。

AMD是require.js在推广使用过程中对模块定义规范化的产物。

在使用时，需引入require.js

特点

使用define()定义模块

1	/**
2	 * @param id 模块名称，如果为空，模块的名字默认为模块加载器请求的指定脚本名
3	 * @param dependencies 模块依赖
4	 * @param factory 工场函数，模块初始化执行的函数或对象
5	 */
6	define(id? dependencies? factory)

使用require加载模块
```
	require([module], callback)
```
AMD是依赖前置模块

三、CMD规范

CMD（Common Module Definition）通用模块定义，异步加载模块。

CMD是sea.js在推广过程中对模块定义的规范化产物。

在使用时，需引入sea.js

特点：

使用define()定义模块，使用require()加载模块

1	define(function (require, exports, module) {
2		let a = require('a')
3		let b = require('b')
4		exports.eat = a.eat
5		exports.run = b.run
6	})

CMD模块加载是推崇就近依赖的，需要到某个模块时再进行require加载

使用seajs.use加载使用模块
```
	seajs.use(id, callback?)
```

四、UMD规范

UMD（Universal Module Definition）通用模块定义，为了兼容AMD、CMD和无模块化开发规范

1/**
2 * UMD-Universal Module Definition 通用模块定义
3 * */
4 (function (root, factory) {
5	 // 判断是否是AMD/CMD
6	 if (typeof define === 'function') {
7		 define([], factory)
8	 } else if (typeof exports === 'object') {
9		 // Node CommonJS规范
10		 module.exports = factory()
11	 } else {
12		 // 浏览器环境
13		 root.someAttr = factory
14	 }
15 })(this, function () {
16	 let add = function (a, b) {
17		 return a + b
18	 }
19	 return {
20		 add,
21		 module: 'UMD'
22	 }
23 })

五、ES6模块

ES6通过imort和export实现模块的输入与输出，import命令用于输入其他模块提供的功能，export命令用于规定模块对外的接口。

特点：

使用export导出模块

1	// test.js
2	export let module = 'ES6 Module'
3	export let hello = function () {}
4	let demo = function () {}
5	// 默认导出
6	export default demo

使用import导入模块

1	// 导入默认模块
2	import demo from './test.js'
3
4	// 导入指定模块
5	import { hello, module } from './test'
6
7	// 导入指定模块，并重命名
8	import { hello as hi, module } from './test.js'
9
10	// 导入全部模块，并重命名
11	import * as test from './test.js'

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得点赞、收藏呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！