前端模块化

不使用模块化

// util.js
// getFormatDate函数
function getFormatDate (date, type) {
	// type === 1 返回 2017-06-15
	// type === 2 返回 2017年6月15日
	// ...
}

// a-util.js
// aGetFormatDate函数 使用getFormatDate
function aGetFormatDate (date) {
	// 要求返回 2017年6月15日 格式
	return getFormatDate(date, 2);
}

// a.js
// 使用aGetFormatDate函数
var dt = new Date();
console.log(aGetFormatDate(dt));

// 必须按顺序引用进来，不然会报错
<script src="util.js">
<script src="a-util.js">
<script src="a.js">

// 这些代码中的函数必须是全局变量，才能暴露给使用方，会造成全局变量污染
// a.js 知道要引用 a.util.js，但是他知道还需要依赖于 util.js 吗？

使用模块化

// util.js
export {
	getFormatDate: function (date, type) {
		// type === 1 返回 2017-06-15
		// type === 2 返回 2017年6月15日
		// ...
	}
}

// a-util.js
var getFormatDate = require('util.js')
export {
	aGetFormatDate: function (date) {
		// 要求返回 2017年6月15日 格式
		return getFormatDate(date, 2);
	}
}

// a.js
var aGetFormatDate = require('a-util.js')
var dt = new Date()
console.log(aGetFormatDate(dt))

// 直接`<script src="a.js"></script>`，其他的根据依赖关系自动引用
// 那两个函数，没必要做成全局变量，不会带来污染和覆盖

前端模块规范

---

前端模块规范有三种：CommonJS，AMD，CMD

• CommonJS用在服务端，AMD和 CMD用在浏览器端

• AMD 和 CMD 的区别

  • AMD是 Require.js在推广过程中对模块定义的规范化产出； CMD是 Sea.js在推广过程中对模块定义的规范化产出
  • AMD是提前执行（异步加载：依赖先执行）+ 延迟执行；CMD是延迟执行（运行时需加载，根据顺序执行）

AMD

AMD是 Asynchronous Module Definition的缩写，意思就是异步模块定义。AMD实际上是 Require.js在推广过程中对模块定义的规范化的产出。它采用异步方式加载模块，模块的加载不影响后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

Require.js主要解决了两个问题

• 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
• js加载的时候浏览器会停止页面渲染，加载的文件越多，页面失去响应的时间越长

一个小例子

// util.js
define(function () {
	return {
		getFormatDate: function (date, type) {
			if (type === 1) {
				return '2017-06-15'
			}
			if (type === 2) {
				return '2017年6月15日'
			}
		}
	}
})

// a-util.js
define(['./util.js'], function (util) {
	return {
		aGetFormatDate: function (date) {
			return util.getFormatDate(date, 2);
		}
	}
})

// a.js
define(['./a-util.js'], function (aUtil) {
	return {
		printDate: function (date) {
			console.log(aUtil.aGetFormatDate(date));
		}
	}
})

// main.js
// 入口文件，不需要define，只需要require
require(['./a.js'], function (a) {
	var date = new Date();
	a.printDate(date);
})

// index.html
// 需要引入 require.js，date-main中写的是入口文件的路径
<script date-main="xxx/main.js" src="xxx/require.js">

无论是 require 还是 define，依赖数组中的文件都必须在前面 define 过。define 中 return 的值可以被引用的函数调用。

CommonJS

CommonJS是服务器端模块的规范，由 nodejs 推广使用。现在被大量用在前端，原因如下：

• 前端开发依赖的插件和库，都可以从 npm中获取
• 构建工具的高度自动化，使得使用 npm的成本非常低
• CommonJS 不会异步记载 JS，而是同步一次性加载出来

CommonJS规范

• 一个单独的文件就是一个模块。每一个模块都是一个单独的作用域
• 输出模块变量的最好方法是使用 module.exports对象
• 加载模块使用 require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

一个小例子

// util.js
module.exports = {
	getFormatDate: function (date, type) {
		if (type === 1) {
			return '2017-06-15'
		}
		if (type === 2) {
			return '2017年6月15日'
		}
	}
}

// a-util.js
var util = require('util.js')
module.exports = {
	aGetFormatDate: function (date) {
		return util.getFormatDate(date, 2);
	}
}

// a.js
var aUtil = require('a-util.js')
module.exports = {
	printDate: function (date) {
		console.log(aUtil.aGetFormatDate(date));
	}
}

// main.js
var a = require('a.js')

var date = new Date();
a.printDate(date);

AMD 和 CommonJS 的使用场景

• 需要异步加载JS，使用 AMD
• 使用了 npm之后建议使用 CommonJS

CommonJS 和 ES6 模块化的异同

• 可以对 commonJS 模块重新赋值，而对 ES6 模块重新赋值编译会报错
• commonJS 是对模块的拷贝，而 ES6 是对模块的引用
  • 都可以对对象内部的值进行改变
• ES6 模块是静态化的，必须在顶层作用域，不能使用条件语句，自动采用严格模式；而 commonJS 则可以在条件语句中，所以可能在运行时执行，所以是动态的