[置顶] Javascript模块化编程——使用AMD，CommonJS，ES Harmony

定一个小目标，每周翻译一篇国外优秀博客

原文链接 https://addyosmani.com/writing-modular-js/

以及参考了 http://nuysoft.com/2014/01/24/authoring-umd-modules/

http://www.ruanyifeng.com/blog/2012/11/require_js.html

AMD-异步模块规范

个人理解：

首先AMD模式，所谓异步模块加载。

就是先加载数组里面得模块，然后等到加载完毕，才执行匿名函数。

随着RequireJS成为最流行的实现方式，异步模块规范（AMD）在前端界已经被广泛认同。

它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

//    文件名: foo.js
define(["jquery"], function ($) {
//    方法
function myFunc(){};

//    暴露公共方法
return myFunc;
});

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个

require([module], callback);参数[module]

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

CommonJS

个人理解：

commonJS的规范是用nodeJS引出来的。

但是浏览器前端是不能直接用的，需要有browserify。

因为有Browserify，它也一直被前端界广泛认同。

就像前面的格式一样，下面是用CommonJS规范实现的foo模块的写法：

//    文件名: foo.js
//    依赖
var $ = require("jquery");
//    方法
function myFunc(){};

//    暴露公共方法（一个）
module.exports = myFunc;

requireJS

为什么要使用requireJS

最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

　　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

首先需要去官网下载requireJS

下载后，假定把它放在js子目录下面，就可以加载了。

　<script src="js/require.js"></script>

UMD模式

然后我现在要学习的就是这个模式。

如果是在浏览器中运行代码，那么 AMD 模块 是个非常好的选择。

如果运行在服务端环境，例如 RingoJS 或 node.js，那么 CommonJS 模块 是最简单的选择。

一个AMD包裹为UMD的例子

(function (define) {

// dependencies are listed in the dependency array
define(['./store', 'meld'], function (store, meld) {
"use strict";
var cache = {};

// create the module
meld.around(store, 'get', function (jp) {
var key = jp.args.join('|');
return key in cache ? cache[key] : cache[key] = jp.proceed();
};

// return your module's exports
return store;
});

}(
typeof define == 'function' && define.amd
? define
: function (ids, factory) {
var deps = ids.map(function (id) { return require(id); });
module.exports = factory.apply(null, deps);
}
));

整个模块被包裹在一个 IIFE 中，并且函数 define 被作为一个参数传入。

文件最后的代码片段 typeof define == ‘function’ && define.amd 是嗅探 AMD 环境的标准方式。

如果检测结果为 true，–define 则说明当前环境是 AMD，可以把全局函数 define 传入 IIFE。通过由*工厂函数返回一个值，模块以正常的 AMD 方式输出。

如果 AMD 环境嗅探的结果为 false，代码则模拟一个类似 node.js 的 CommonJS 环境。为了使 AMD 代码能够运行，IIFE 注入了一个行为类似于 AMD define 的函数：把所有的 ids 加载为模块，并把它们作为参数注入工厂函数。然后，函数 define 获取到工厂函数的返回值，并以经典的 node.js 方式赋值给 module.exports。

感觉下面的例子好理解一点：

(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD
define(["jquery"], factory);
} else if (typeof exports === "object") {
// Node, CommonJS之类的
module.exports = factory(require("jquery"));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
//    方法
function myFunc(){};

//    暴露公共方法
return myFunc;
}));

下面是更复杂的例子，它依赖了多个组件并且暴露多个方法:

(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD
define(["jquery", "underscore"], factory);
} else if (typeof exports === "object") {
// Node, CommonJS之类的
module.exports = factory(require("jquery"), require("underscore"));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery, root._);
}
}(this, function ($, _) {
//    方法
function a(){};    //    私有方法，因为它没被返回 (见下面)
function b(){};    //    公共方法，因为被返回了
function c(){};    //    公共方法，因为被返回了

//    暴露公共方法
return {
b: b,
c: c
}

一个用UMD模式写的print.js

(function(root, factory) {
if (typeof define === 'function' && define.amd) {
//检测是否为AMD模式
define([], factory);//这里没有引用包或者库，第一个数组为空
} else {
// 浏览器全局变量(root 即 window)
root.Printer = factory(root);
}
}(this, function(root) {
var Printer = {};
Printer.printer = {
"version": "0.0.1"
};
var init_options = {
"speed": 50, //文字的速度
"selector": 'canvas', //要打印到的标签的ID
"startIndex": 0, //从第几个字符开始打印
"endIndex": 0, //打印到第几个字符结束
"hasCur": true, //是否有光标
"curId": 'cur', //光标的ID
"curStr": '_', //光标字符
"curStyle": 'font-weight: bold;', //光标的样式（CSS样式）
"curSpeed": 100, //光标的速度（ms）
"lnStr": ""
};

var str = "",
options = init_options;
var flwCurTimer, dom, curObj, reStr = '',
curSwitch, index = 0;

Printer.init = function(arg_str, arg_options) {
console.log('init');
console.log(arg_str);
console.log(arg_options);
str = arg_str;
for (var option in arg_options) {
options[option] = arg_options[option];
}
dom = document.getElementById(options.selector);
index = options.startIndex;
options.endIndex = options.endIndex == 0 ? str.length : options.endIndex
options.hasCur && flwCur();
return this;
}

Printer.print = function() { //打印函数
console.log('print');
for (var i = 0; i < str.length; i++) {
(function(index) {
setTimeout(function() {
console.log('index: ' + index);
if (str.charAt(index) === '\n') {
reStr += '<br>' + options.lnStr;
} else {
reStr += str.charAt(index);
}
dom.innerHTML = options.lnStr + reStr;
// console.log(reStr);
// console.log(dom.innerHTML);
}, options.speed * (index + 1))
})(i);
}

setTimeout(function() {
if (options.hasCur) {
var element = document.createElement("span");
element.id = options.curId
dom.appendChild(element);

curObj = document.getElementById(options.curId);
clearTimeout(flwCurTimer);
setInterval(chCur, options.curSpeed);
}
}, options.speed * str.length)
}

function flwCur() { //跟随光标
console.log('flwCur');
dom.innerHTML += '<span id="' + options.curId + '" style="' + options.curStyle + '">' + options.curStr + '</span>';
flwCurTimer = setTimeout(flwCur, 1.5 * options.speed);
}

function chCur() { //闪烁光标
// console.log('chCur');
curObj.innerHTML = curSwitch ? options.curStr : "";
curSwitch = !curSwitch
}

return Printer;//Printer是公有方法
}));