JavaScript模块化编程 - CommonJS, AMD 和 RequireJS之间的关系

╰+攻爆jí腚メ 2022-08-11 11:30 152阅读 0赞

先说说CommonJS

CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言，其实JavaScript设计之初不仅仅是针对客户端设计的语言。后来只是由于Web的迅速流行，加之Netscape和微软之间之争过早的将JavaScipt标准化。要了解详细的JS历史请查看：http://zh.wikipedia.org/zh-cn/JavaScript。过早的标准化JS就导致JS的诸多缺陷和标准类库的缺乏，即使这样也不影响JS成为一门优秀的 [编程][Link 1]语言（比如现在非常流行的Node.js）。目前JS仅仅包括基本的API，如果要作为一个server端的编程语言，像IO, FS, i18n, package等等特性都没有，CommonJS是一个组织，它让JS可以在共同的方向上做努力，来完善JS。尽量Common JS现在还没有一个正式版发布，但是很多方向的草案的实现都已经取得很好的成果。例如现在非常流行的Node.js。

再回到本文的主题来，CommonJS和AMD，RequireJS有什么关系呢？原来CommonJS其中就有一个Modules规范，我们都像JS现在这样所有东西都写在一个文件中来写server端应用是一件非常困难的事情，它就是来解决JS没有模块化管理代码的功能。关键部分就二个函数:

require - 用来引入依赖

export - 用来导出模块，包括标识符(identifier)和模块内容(contents)

CommonJS并没有只是一个规范，就像Java中的Interface一样，并没有注明你应该怎么实现。

问题在于CommonJS的这个Modules规范设计之初是为了server端设计的，它是一个同步的模式。但是这种模式并不适合于 [浏览器][Link 2]端，大家设想一下如果浏览器同步模式一个一个加载模块，那么打开将会变得非常的慢，所以AMD就是为了这个诞生，它最大的特点就是可以异步的方式加载模块，具体的不同在于AMD有一个define函数，它可以让当前模块运行时先加载当前模块所依赖的模块，例如以下定义的意义就是在运行function时先加载依赖的module, dependency, array模块。

define('module/id/string', \['module', 'dependency', 'array'\],

function(module, dependency, array) \{

return ModuleContents;

\});

所以说CommonJS Module和AMD都是JS模块化定义的API，出自相同的起源的，就是可以让JS可以模块化加载。

那么RequrieJS其实就是AMD现在用的最广泛，最流行的实现。在RequireJS网站上的介绍其实也有说明RequireJS诞生的原因，只是当时我并没有看懂。

RequireJS is a  [Java][]Script file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

从以上基本可以看清CommonJS(泛指Modules规范)，AMD和RequireJS之前的关系了。简单的来讲CommonJS Modules和AMD都是为了解决JS模块化的规范API，CommonJS更适合于Server端，而AMD基本是用于浏览器端（不过它也可以用于Server端，比如Node loader的方向的努力：http://requirejs.org/docs/node. [html][]），而RequireJS就是AMD最流行的实现。

[Link 1]: http://www.2cto.com/kf
[Link 2]: http://www.2cto.com/os/liulanqi/
[Java]: http://www.2cto.com/kf/ware/Java/
[html]: http://www.2cto.com/kf/qianduan/css/