js与AMD模块加载

目的：

了解AMD规范与CMD规范，写一个模块加载器雏形。

基本概念：

AMD是异步模块定义规范，而CMD是通用模块定义规范。其他的还有CommonJS Modules规范。

对于具体的规范，可以参考：

https://github.com/amdjs/amdjs-api/wiki/AMD AMD规范

https://github.com/seajs/seajs/issues/242 CMD规范

http://www.zhihu.com/question/20351507/answer/14859415 玉伯对于AMD和CMD规范的回答

无论是哪一种规范，都是为了解决前端模块依赖与加载的问题。

与后台语言不同的地方是，js并无法做到阻塞的模块/文件加载，这是我们需要这些模块加载、依赖管理工具的重要原因之一。

需求分析：

根据规范，我们需要实现require和define两个接口，define接口用于定义模块（并加载依赖），require接口用来加载模块并回调。

我们将实现简化的接口：

define
    define(deps, definition)：依赖数组 与 模块定义函数
    define(definition)：模块定义函数（模块无依赖）

require
    require(deps, callback)：依赖数组 与 完成回调
    require(moduleId)：传入模块id，获得模块实例（模块需提前通过define或require完成加载）

接下来我们进一步分析下任务：

代码（模块）状态：
未加载 -> 加载中 -> 加载完毕，等待依赖解决 -> 依赖完成，模块加载完成 ( -> 初次使用，执行模块定义生成模块实例)
非模块代码无依赖，加载后直接跳到完成状态，并且无模块定义无法生成模块实例

模块的加载时间线：
开始加载，添加加载完成的回调 -> 加载完成，执行define函数，注册模块依赖与模块定义 -> 执行代码加载完成回调（从这里拿到代码的url，或者说是模块ID），解析模块

我们需要在几个情况下分析依赖是否满足：
代码加载完成时以及模块依赖满足，状态为完成时

依赖满足的条件：
所有依赖的模块状态为完成

对于js的加载，我们创建script标签，在其上保存模块的id，并添加加载完成的时间侦听：

var scriptNode = document.createElement('script');
scriptNode.async = true;
scriptNode.moduleId = mId;
scriptNode.addEventListener('load', onScriptLoaded);
scriptNode.src = mId + '.js';
document.body.appendChild(scriptNode);

最终代码：

load.js：

(function (global) {
	var modules = {}, // 模块列表
		_modulesToLoad = [], // 从依赖中获得的要加载的js列表
		MODULE_STATUS = { // 定义模块状态
			LOADING: 1,
			PENDING: 2,
			DONE: 3
		},
		_modulesToHandler = [], // define函数运行时存入这个数组（在这里每次只有一个被存入），在onScriptLoaded中处理
		_requireCallbacks = []; // 待满足的依赖，每一项格式为[deps数组，回调函数]

	// 处理依赖，得到要加载的模块数组，并建立LOADING的模块状态
	function addDepsToModules (deps) {
		if (!deps) { return; }
		deps.forEach(function (mId) {
			if (!modules[mId]) {
				modules[mId] = {
					id: mId,
					status: MODULE_STATUS.LOADING,
					deps: null,
					defi: null,
					instance: null
				}
				_modulesToLoad.push(mId);
			}
		});
	}
	// 加载代码，在script标签节点上保存模块id
	function loadScripts () {
		var mId;
		while(mId = _modulesToLoad.pop()) {
			var scriptNode = document.createElement('script');
			scriptNode.async = true;
			scriptNode.moduleId = mId;
			scriptNode.addEventListener('load', onScriptLoaded);
			scriptNode.src = mId + '.js';
			document.body.appendChild(scriptNode);
		}
	}
	function onScriptLoaded (evt) {
		if (evt.type === 'load') {
			var scriptNode = evt.currentTarget,
				mId = scriptNode.moduleId;
			if (modules[mId]) { // 不处理作为data-main的入口代码
				if (_modulesToHandler.length === 0) { // 加载的并非模块代码（没有调用define），立即修改状态为DONE
					modules[mId].status = MODULE_STATUS.DONE;
				} else {
					var pair = _modulesToHandler.pop(),
						deps = pair[0],
						defi = pair[1];
					modules[mId].status = MODULE_STATUS.PENDING; // 修改状态问PENDING
					modules[mId].defi = defi; // 保存模块定义
					_requireCallbacks.push([deps, function () { // 建立待满足的依赖
						modules[mId].status = MODULE_STATUS.DONE; // 依赖满足后修改状态为DONE
						setTimeout(resolveRequireCallbacks, 0); // 并重新寻找已满足的依赖
					}]);
					addDepsToModules(deps); // 处理这个模块的依赖
					loadScripts(); // 加载依赖的js
				}
				resolveRequireCallbacks(); // 寻找已满足的依赖
			}
		}
	}
	// 寻找并处理已满足的依赖
	function resolveRequireCallbacks () {
		_requireCallbacks = _requireCallbacks.filter(function (pair) {
			var deps = pair[0],
				callback = pair[1],
				allLoaded = true;
			// 判断依赖是否都已满足
			deps && deps.some(function (mId) {
				if (modules[mId].status !== MODULE_STATUS.DONE) {
					allLoaded = false;
					return true;
				}
			});
			if (allLoaded) { // 如果满足执行回调，并剔除出待满足的依赖列表
				callback();
				return false;
			} else {
				return true;
			}
		});
	}
	// 定义require函数
	global.require = function (deps, callback) {
		if (typeof deps === 'string') { // 传入moduleId时返回模块实例
			if (modules[deps] && modules[deps].status === MODULE_STATUS.DONE) {
				if (!modules[deps].instance) { // 模块实例在第一次require(mId)时通过模块定义创建
					modules[deps].instance = modules[deps].defi();
				}
				return modules[deps].instance;
			} else {
				throw 'Module ['+deps+'] not loaded yet.';
			}
		}
		_requireCallbacks.push([deps, callback]); // 添加回调函数到待解决的依赖
		addDepsToModules(deps); // 寻找要加载的js
		loadScripts(); // 加载js
		resolveRequireCallbacks(); // 处理待满足的依赖
	}
	// 定义define函数
	global.define = function (deps, defi) {
		if (!defi) {
			defi = deps;
			deps = null;
		}
		// 将依赖、模块定义存入待处理数组，由onScriptLoaded处理
		_modulesToHandler.push([deps, defi]);
	}
	// 获得并加载main入口js
	var scripts = document.getElementsByTagName('script'),
		selfScript = scripts[scripts.length - 1], // 当前代码，也就是指向load.js的这个
		mainSrc = selfScript.getAttribute('data-main');
	global.onload = function () { // 等待body完成创建，应当在window.onload前就执行，这里就直接用window.onload了
		_modulesToLoad.push(mainSrc);
		loadScripts();
	}
})(window);

html：

<script data-main="main" src="load.js"></script>

模块文件：

// main.js
require(['d', 'd0'], function() {
    console.log('ready', require('d').mId, require('d0').mId);
});
// d.js
define(['d1', 'd2'], function () {
	return {mId: 'd' + require('d1').token};
});
// d0.js
define(['d1', 'd2'], function () {
	return {mId: 'd0' + require('d1').token};
});
// d1.js
define(function () {
	return {token: '|xyz123'};
});
// d2.js
console.log('d2');

可以做的改进：

1. 依赖锁死的情况，比如模块依赖自身，模块循环依赖的情况，改如何处理。

2. 单个文件中多个define的调用，调用形式为define(模块id，模块依赖，模块定义)，这样做是为了使得多个模块代码可以合并到单文件中。

3. 更智能的模块依赖分析。

对于这个第三点，我们来做个小尝试：

function func (jquery, underscore) {
	var async = require('async');
}
func.toString();

我们可以看到利用function的toString方法，通过“分析代码”，我们可以从模块定义函数“智能”的分析出依赖，无论是angular的依赖注入还是sea.js的CMD编写格式，就都可以做到了。

扩展：

除了require.js之外，browserify和webpack都是采用了CommonJS规范，这样的好处是与nodejs以及ES6的模块规范保持一致。

browserify：http://browserify.org/

webpack：http://webpack.github.io/

与require不同，这两种工具都要求代码提前通过编译转换，特别是browserify，生成的文件添加的代码相对较少，加之本身丰富的功能，很适合单页面应用和多页面的项目，但这两者的定位并非解决动态加载和相应的模块依赖。

对于相对小型或简单的项目，webpack是很好的选择，一是配置简单，二是代码配重小。但对于大型的单页面应用，当我们需要动态加载大量模块时，require可以压缩“静态依赖”/框架代码，并动态加载模块代码，因此仍然是非常好的选择之一。