拥抱模块化的javascript

2014.11.01 / 前端开发 / 周 涛

31995

前言

我们再一次被计算机的名词、概念笼罩。

Backbone、Emberjs、Spinejs、Batmanjs 等MVC框架侵袭而来。
CommonJS、AMD、NodeJS、RequireJS、SeaJS、Curljs 等模块化的JavaScript概念及库扑面而来。

模块化JavaScript的概念尤为突出，似乎有赶超07年Ajax风潮之趋势。

写函数(过程式)
2005年以前，JavaScript没人重视，只作为表单验证等少量应用。那时一个网页上写不了几行JS代码，1000行算很复杂了。这时组织代码的方式是过程式，几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数，更复杂一些则需要更多函数，函数间互相调用。

写类(面向对象)
2006年，Ajax席卷全球。JavaScript被重视了，越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能，从一个函数可能会跳到第N个函数去。这时写类的方式出现了，Prototype 率先流行开来。用它组织代码，写出的都是一个个类，每个类都是Class.create创建的。又有YUI、Ext等重量级框架。虽然它们的写类方式各不同，但它们的设计思路却都是要满足大量JavaScript代码的开发。

写模块(现在，未来？)
2009年，Nodejs诞生！这个服务器端的JavaScript采用模块化的写法很快征服了浏览器端的JSer。牛人们纷纷仿效，各种写模块的规范也是层出不穷。CommonJS想统一前后端的写法，AMD则认为自己是适合浏览器端的。好吧，无论写模块的风格是啥样，写模块化的JavaScript却已开始流行了。你，准备好了吗？

模块化的JavaScript是神马？ 这是我们发明了又一个银弹吗？无论是啥，就当学习吧。至于适不适合项目中使用，各自斟酌。

写到这也没说什么是“模块”。其实在计算机领域，模块化的概念被推崇了近四十年。软件总体结构体现模块化思想，即把软件划分为一些独立命名的部件，每个部件称为一个模块，当把所有模块组装在一起的时候，便可获得问题的一个解。模块化以分治法为依据，但是否意味着我们把软件无限制的细分下去？事实上当分割过细，模块总数增多，每个模块的成本确实减少了，但模块接口所需代价随之增加。

要确保模块的合理分割则须了解信息隐藏，内聚度及耦合度。

信息隐藏
模块应设计的使其所包含的信息（过程和数据）对于那些不需要用到它的模块不可见。每个模块只完成一个独立的功能，然后提供该功能的接口。模块间通过接口访问。JavaScript中可以用函数去隐藏，封装，而后返回接口对象。如下是一个提供事件管理的模块event。

 

1 2 3 4 5 6 7 8

Event = function() {     // do more     return {         bind: function() {},         unbind: function() {},         trigger: function() {}     }; }();

函数内为了实现想要的接口bind、unbind、trigger可能需要写很多很多代码，但这些代码（过程和数据）对于其它模块来说不必公开，外部只要能访问接口bind，unbind，trigger即可。
信息隐藏对于模块设计好处十分明显，它不仅支持模块的并行开发，而且还可减少测试或后期维护工作量。如日后要修改代码，模块的隐藏部分可随意更改，前提是接口不变。如事件模块开始实现时为了兼容旧版本IE及标准浏览器，写了很多IE Special代码，有一天旧版本IE消失了（猴年马月），只需从容删去即可。

内聚度
内聚是来自结构化设计的一个概念，简单说内聚测量了单个模块内各个元素的联系程度。最不希望出现的内聚就是偶然性内聚，即将完全无关的抽象塞进同一个模块或类中。最希望出现的内聚是功能性内聚，即一个模块或类的各元素一同工作，提供某种清晰界定的行为。
内聚度指模块内部实现，它是信息隐藏和局部化概念的自然扩展，它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显，当把相关的任务分组后去阅读就容易多了。设计时应该尽可能的提高模块内聚度，从而获得较高的模块独立性。

耦合度
耦合也是来自结构化设计，Stevens、Myers和Constantine将耦合定义为「一个模块与另一个模块之间建立起的关联强度的测量。强耦合使系统变得复杂，因为如果模块与其它模块高度相连，它就难以独立的被理解、变化和修正」
内聚度是指特定模块内部实现的一种度量，耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性，进入或调用模块的位置等。与内聚度相反，在设计时应尽量追求松散耦合的系统。

JavaScript中模块“写法”

在JavaScript模块到底是什么，能用代码具体展现一下吗？其实上面已经写了一段事件模块代码

这能代表“模块”吗？这就是一个JS对象啊，以为有多么深奥。

是的，JavaScript中模块多数时候被实现为一个对象。这么看来，多数时候我们都写过“模块”（但没有在整个项目中应用模块化思想）。或许每个人写模块的方式（风格）还不同。比如上面的事件模块是一个匿名函数执行，匿名函数中封装了很多代码，最后通过return返回给Event变量，这个Event就是事件模块的接口。

又如jQuery，它也是一个匿名函数执行，但它并不返回接口对象。而是将自己暴露给window对象。

 

1 2 3 4 5

(function(window){     // ..     // exports     window.jQuery = window.$ = jQuery; })(window);

再如SeaJS，它一开始就将接口公开了

 

1 2 3 4

/** * Base namespace for the framework. */ this.seajs = { _seajs: this.seajs };

后续是很多的匿名函数执行给变量seajs添加很多工具方法。注意，这里的this在浏览器环境指window对象，如果是定位在浏览器中，这个this也可以去掉。就象Ext。

 

1 2 3 4 5 6 7

Ext = {     /**      * The version of the framework      * @type String      */     version : '3.1.0' };

我们已经看到了四种方式写模块（把jQuery，SeaJS，Ext看成模块，呃很大的模块）。哪一种更好呢？ 哪一种更适合在浏览器端呢？纯从代码风格上说，是萝卜白菜各有所爱。只要我们运用了“模块化”的思想来开发就行了。

但如果有一种统一的语法格式来写模块岂不是更好，就不会出现各用各的风格来写模块而使代码乱糟糟。

这就是目前的现状，开发者强烈需要一种统一的风格来写模块（最好是语言内置了）。这时一些组织出现了，最具代表的如CommonJS，AMD。此外ECMAScript也开始着手模块的标准化写法。

无论它们提供什么样的写法，我们需要的仅仅是：

• 将一些零散代码封装成一个有用的单元（encapsulate）
• 导出模块的接口API（exports）
• 方便友好引用其它模块（dependency）

服务器端的JSer是幸运的，它有Node.js，Node.js遵循了一个称为CommonJS的规范。CommonJS其中就有对写模块的标准化。当然模块化只是其中的一部分而已。

具体来说Node.js实现了：

• Modules/1.0
• Promises/B
• Promises/D
• Unit Testing/1.0

在模块化方面，它实现了Modules/1.0（已经更新到1.1.1）,以下是node中是写模块的一个示例。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

MATH.JS exports.add = function() {     var sum = 0, i = 0, args = arguments, l = args.length;     while (i < l) {         sum += args[i++];     }     return sum; };   INCREMENT.JS var add = require('math').add; exports.increment = function(val) {     return add(val, 1); };   MAIN.JS var inc = require('increment').increment; var a = 1; inc(a); // 2

这就写了一个math、increment、main模块。math提供了add方法来实现数字相加。increment模块依赖于math模块，它提供increment方法实现相加。main获取到increment方法，执行相加操作。

以上代码示例可以看到:

• node要求一个js文件对应一个模块。可以把该文件中的代码想象成是包在一个匿名函数中，所有代码都在匿名函数中，其它模块不可访问除exports外的私有变量
• 使用exports导出API
• 使用require加载其它模块

CommonJS module基本要求如下:

• 标示符require，为一个函数，它仅有一个参数为字符串，该字符串须遵守Module Identifiers的6点规定
• require方法返回指定的模块API
• 如果存在依赖的其它模块，那么依次加载
• require不能返回，则抛异常
• 仅能使用标示符exports导出API

Modules/1.1较1.0仅增加了标示符module，require函数增加了main和paths属性。而仔细比对1.1与1.1.1后发现除了格式调整了下几乎没有变化。

Node.js模块格式在浏览器中的尝试

前面提到Node.js有一套简洁的格式写模块，它遵循的就是 Moudles。
浏览器里的JavaScript呢？ 尽管语言本身暂不支持模块（ES6打算支持），但可以用现有的API包装一个写法出来。
毫无疑问，首先想到的是Node.js的Modules格式，它是最好的效仿对象。因为前后端有一个统一的方式写JS模块岂不乐哉！
但一开始就碰到一些难题：
服务器端JS模块文件就在本地，浏览器端则需要通过网络请求。
服务器端可以很容易的实现同步或异步请求模块，浏览器端则问题多多。
如下。

 

1 2 3 4

var event = require("event"); event.bind(el, 'click', function() {     // todo });

这段代码中require如果是异步执行的，则event.bind的执行有可能会出错。
那实现同步的require不就行了吗？的确可以使用 XHR 实现同步载入模块JS文件。但XHR的缺点也是明显的，它不能跨域，这点让人很难接受，因为有些场景需要模块部署在不同的服务器。
那只能通过script tag来实现模块加载了！但script tag默认就是异步的，要实现Node.js的一模一样风格（Modules）很难，几乎是不可能。

这时，“救世主”出现了：Modules/Wrappings ，顾名思义包裹的模块。该规范约定如下：

• 定义模块用module变量，它有一个方法declare。
• declare接受一个函数类型的参数，如称为factory。
• factory有三个参数分别为require、exports、module。
• factory使用返回值和exports导出API。
• factory如果是对象类型，则将该对象作为模块输出。

描述有拗口，代码却很简单，使用了一个function包裹模块（Node.js模块则无需包裹）。

 

1 2 3 4 5 6 7 8 9 10 11

一个基本的模块定义 module.declare(function(require, exports, module) {     exports.foo = "bar"; });   直接使用对象作为模块 module.declare( {     foo: "bar" });

Modules/Wrappings的出现使得浏览器中实现它变得可能，包裹的函数作为回调。即使用script tag作为模块加载器，script完全下载后去回调，回调中进行模块定义。

好了，截止目前我们已经看到了两种风格的模块定义：Modules 和 Modules/Wrappings。

CommonJS Modules有1.0、1.1、1.1.1三个版本:
Node.js、SproutCore实现了 Modules 1.0
SeaJS、AvocadoDB、CouchDB等实现了Modules 1.1.1
SeaJS、FlyScript实现了Modules/Wrappings

注意：
SeaJS未实现全部的 Modules 1.1.1，如require函数的main，paths属性在SeaJS中没有。但SeaJS给require添加了async、resolve、load、constructor。
SeaJS没有使用 Modules/Wrappings 中的module.declare定义模块，而是使用define函数（看起来象AMD中的define，实则不然）。

AMD：浏览器中的模块规范

前面提到，为实现与Node.js相同方式的模块写法，大牛们做了很多努力。

但浏览器环境不同于服务器端，它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地)，这个请求过程多数使用script tag，script 默认的异步性导致很难实现与Node.js一模一样的模块格式。

Modules/Wrappings 使得实现变为现实。虽然和Node.js的模块写法不完全一致，但也有很多相似之处，使得熟悉Node.js的程序员有一些亲切感。

但Node.js终究是服务器端的JavaScript，没有必要把这些条条框框放到浏览器JavaScript环境中。

这时AMD 诞生了，它的全称为异步模块定义。从名称上看便知它是适合script tag的。也可以说AMD是专门为浏览器中JavaScript环境设计的规范。它吸取了CommonJS的一些优点，但又不照搬它的格式。开始AMD作为CommonJS的transport format 存在，因无法与CommonJS开发者达成一致而独立出来。它有自己的wiki 和讨论组 。

AMD设计出一个简洁的写模块API：
define(id?, dependencies?, factory);
其中：
id: 模块标识，可以省略。
dependencies: 所依赖的模块，可以省略。
factory: 模块的实现，或者一个JavaScript对象。
特别指出，id遵循CommonJS Module Identifiers 。dependencies元素的顺序和factory参数一一对应。

以下是使用AMD模式开发的简单三层结构（基础库/UI层/应用层），用于展示模块的五种写法：

1. 定义无依赖的模块（base.js）
2. 定义有依赖的模块（ui.js，page.js）
3. 定义数据对象模块（data.js）
4. 具名模块
5. 包装模块

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

BASE.JS   define(function() {     return {         mix: function(source, target) {         }     }; });   UI.JS define(['base'], function(base) {     return {         show: function() {             // todo with module base         }     } });   PAGE.JS define(['data', 'ui'], function(data, ui) {     // init here });   DATA.JS define({     users: [],     members: [] });

以上同时演示了define的前三种用法。细心的会发现，还有两种没有出现：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

具名模块   define('index', ['data','base'], function(data, base) {     // todo });   包装模块   define(function(require, exports, module) {     var base = require('base');     exports.show = function() {         // todo with module base     } });

如果不考虑多了一层函数外，格式和Node.js是一样的：使用require获取依赖模块，使用exports导出API。

除了define外，AMD还保留一个关键字require。require 作为规范保留的全局标识符，可以实现为 module loader，也可以不实现。

目前，实现AMD的库有RequireJS 、curl 、Dojo 、bdLoad、JSLocalnet 、Nodules 等。也有很多库支持AMD规范，即将自己作为一个模块存在，如MooTools 、jQuery 、qwery 、bonzo 甚至还有 firebug 。

UMD：各种模块格式的糅合

UMD是AMD 和CommonJS的糅合，前面花了很长的篇幅介绍了两大类模块规范，CommonJS(Modules/Modules/Wrappings)及AMD。

我们知道Modules/Wrappings是出于对Node.js模块格式的偏好而包装下使其在浏览器中得以实现。而Modules/Wrappings的格式通过某些工具（如r.js）也能运行在Node.js中。事实上，这两种格式同时有效且都被广泛使用。

AMD以浏览器为第一（browser-first）的原则发展，选择异步加载模块。它的模块支持对象（objects）、函数（functions）、构造器（constructors）、字符串（strings）、JSON等各种类型的模块。因此在浏览器中它非常灵活。

CommonJS module以服务器端为第一（server-first）的原则发展，选择同步加载模块。它的模块是无需包装的（unwrapped modules）且贴近于ES.next/Harmony的模块格式。但它仅支持对象类型（objects）模块。这迫使一些人又想出另一个更通用格式 UMD(Universal Module Definition)。希望提供一个前后端跨平台的解决方案。

UMD的实现很简单，先判断是否支持Node.js模块格式（exports是否存在），存在则使用Node.js模块格式。接着判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。前两个都不存在，则将模块公开到全局（window或global）。下面是一个示例:

下面是一个示例:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

EVENTUTIL.JS (function (root, factory) {     if (typeof exports === 'object') {         module.exports = factory();              } else if (typeof define === 'function' && define.amd) {         define(factory);              } else {         root.eventUtil = factory();     } })(this, function() {     // module     return {         addEvent: function(el, type, handle) {             //...         },         removeEvent: function(el, type, handle) {                      },     }; });

虽然UMD八字还没有一撇，有些开源库却开始支持UMD了，如大名鼎鼎的《JavaScript设计模式》作者Dustin Diaz开发的qwery。代码如下:

 

1 2 3 4 5 6 7 8 9

!function(name,definition){   if(typeof module != 'function') module.exports = definition()   else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)   else this(name) = definition() }('query',function(){     var doc =document     , html = doc.documentElement     // ... })

ECMAScript6：未来的JS模块化

ECMAScript的下一个版本Harmony已经考虑到了模块化的需求。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

使用module关键字来定义一个模块 module math {     export function sum(x, y) {         return x + y;     }     export var pi = 3.141593; }   使用import关键字来加载外部模块 // we can import in script code, not just inside a module import {sum, pi} from math; alert("2π = " + sum(pi, pi));   引入所有API // import everything import * from math; alert("2π = " + sum(pi, pi));   局部重命名 import { draw: drawShape } from shape; import { draw: drawGun } from cowboy;   嵌套模块 module widgets {     export module button { ... }     export module alert { ... }     export module textarea { ... }     ... }    import { messageBox, confirmDialog } from widgets.alert; …   从服务器上请求的模块 <script type=”harmony”> // loading from a URL module JSON at 'http://json.org/modules/json2.js';    alert(JSON.stringify({'hi': ‘world'})); 动态载入一个模块 Loader.load('http://json.org/modules/json2.js', function(JSON) {     alert(JSON.stringify([0, {a: true}])); });

ES6 modules还需要很长时间来规范化，可谓任重而道远。且它有个问题，即新的语法关键字不能向下兼容（如低版本IE浏览器）