早期的JS中，是没有模块化的概念的，这一情况直到09年的Node.js横空出世时有了好转，Node.js将JS作为服务端的编程语言，使得JS不得不寻求模块化的解决方案。

模块化概念

在JS中的模块是针对单个文件的，即一个文件是一个模块，要使用这个模块就加载该文件即可。

CommonJS

node.js的模块系统，是参照CommonJS规范实现的。

定义模块和加载模块

在CommonJS中，有一个全局性方法require()，用于加载模块，而module.exports用于导出当前文件的模块。

假定有一个外部模块Utils.js，那么该模块需要这么写：

 // 定义类

 function Utils(name) {

     this._name = name;

 }

 // 定义类方法

 Utils.prototype.sayHi = function() {

     console.log("Hi, I am " + this._name);

 };

 // 定义静态方法

 Utils.add = function(a, b) {

     return a + b;

 }

 // 将类 Utils 作为当前文件的模块导出

 module.exports = Utils;

加载模块并使用的方法如下：

 // 加载外部模块文件，位于当前文件夹下的 Utils.js，导入后该模块放入变量 Utils 中

 var Utils = require('./Utils.js');

 var obj = new Utils("Li Lei");

 obj.sayHi(); // Hi, I am Li Lei

 console.log(Utils.add(10, 20)); //

可以导出为任意类型

我们就上面的例子稍加改动，Utils.js如下：

 function Utils(name) {

     this._name = name;

 }

 Utils.prototype.sayHi = function() {

     console.log("Hi, I am " + this._name);

 };

 Utils.add = function(a, b) {

     return a + b;

 }

 module.exports = {version: 0.1, utils: Utils};

执行的js代码如下：

 var ex = require('./Utils.js');

 console.log(ex.version); // 0.1

 var obj = new ex.utils("Li Lei");

 obj.sayHi(); // Hi, I am Li Lei

 console.log(ex.utils.add(10, 20)); //

我们可以发现可以导出任意的一个对象，而使用require导入的就是导出的那个对象。

不适用于浏览器

在Node.js中，require方法是同步执行的，即只有加载并解析之后，代码才会向下执行，但是在浏览器中，加载脚本是异步执行的。

AMD

有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。

但是浏览器并不适用CommonJS规范，因为服务器端同步加载不是一个问题，所有的模块都存放在本地硬盘，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，如果采用同步加载的策略，可能要等很长时间才能加载好文件，这段时间里浏览器会处于"假死"状态。

因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

概念

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

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

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。下面我们主要就require.js来看看如何在浏览器里实现模块化。

Require.js

官网地址：http://www.requirejs.cn/

这个是非常流行的一个实现AMD规范的JS库，我们下载其最新版本（目前是2.1.11），我们下面用Require.js来实现上面CommonJS里的例子。

定义模块和加载模块

AMD规范里，定义模块和加载模块都和CommonJS规范不同，使用require加载模块但是带有回调函数，而定义模块则使用define函数。

我们先看看Utils模块的写法：

 define(function (){

     // 定义类

     function Utils(name) {

         this._name = name;

     }

     // 定义类方法

     Utils.prototype.sayHi = function() {

         console.log("Hi, I am " + this._name);

     };

     // 定义静态方法

     Utils.add = function(a, b) {

         return a + b;

     }

     // 将类 Utils 作为当前文件的模块返回

     return Utils;

 });

加载和使用的方法如下：

 <html>

 <head>

     <title>Test</title>

     <!-- 引入require.js文件 -->

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

     <script>

     // 配置各个模块地址

     require.config({

 　　　　paths: {

 　　　　　　"Utils": "./js/lib/Utils"

 　　　　}

 　　});

     // 如果模块地址都放在同一个文件夹中，可以用下面的简写方式

     // require.config({

     //     baseUrl: "./js/lib",

 　　// 　　paths: {

 　　// 　　　　"Utils": "Utils"

 　　// 　　}

 　　// });

     // 加载指定模块

     require(["Utils"], function(Utils) {

         // 模块加载完毕之后，模块中导出的对象会作为参数传入，再回调中直接使用即可

         var obj = new Utils("Li Lei");

         obj.sayHi(); // Hi, I am Li Lei

         console.log(Utils.add(10, 20)); // 30

     });

     </script>

 </head>

 <body>

 </body>

 </html>

多个模块的情况

我们定义的模块如果还依赖其它的模块，可以这么写：

 // 当前定义的模块依赖 Socket 模块

 define(["Socket"], function (){

 // 当前定义的模块依赖 Socket 及 Game 模块

 define(["Socket", "Game"], function (){

加载模块时也可以加载多个模块：

 // 加载 Utils 和 Game 模块，加载好之后，对应模块的导出对象会在回调中作为参数分别传入

 require(["Utils", "Game"], function(Utils, Game) {

更多地用法，可以参考官方文档。

总结一下

我们发现，CommonJS和AMD的写法无论是定义模块还是加载模块，都是存在差异的，但是模块内部的写法是基本一致的，所以通过一定的技巧，可以写出兼容两种标准的模块，如下：

 (function(golbal, factory){

     // AMD

     if(typeof define === "function" && define.amd)

         define(factory);

     // CommonJS

     else if(typeof require === "function" && typeof module === "object" && module && module.exports)

         module.exports = factory();

 })(this, function(){

     // 定义类

     function Utils(name) {

         this._name = name;

     }

     // 定义类方法

     Utils.prototype.sayHi = function() {

         console.log("Hi, I am " + this._name);

     };

     // 定义静态方法

     Utils.add = function(a, b) {

         return a + b;

     }

     // 将类 Utils 作为当前文件的模块返回

     return Utils;

 });

当然，知道了两种标准的差异之后，我们在使用时，也可以自己修改一个标准的模块为另一个标准可以支持的写法了。

另外，大部分类库都会提供多种模块格式的代码，比如AMD和CommonJS等格式，选择我们需要的格式即可。

JS模块化：CommonJS和AMD（Require.js）的更多相关文章

  1. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  2. r.js打包注意事项 r.js打包 这个是配合require.js打包的

    这个./代表的是当前文件的父目录....打包的资源一定要在这个父目录中下面才行,,,,一定一定,要放在这个目录一下才能被正确找到. 不然只是copy了一份一模一样的文件夹和文件过去,并不会处理压缩啥的 ...

  3. （转）JS模块化编程之AMD规范

    模块的规范 原文地址 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有 ...

  4. JS模块化编程之AMD规范（转）

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  5. 前端模块化 | 解读JS模块化开发中的 require、import 和 export

    本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...

  6. JS模块化工具require.js教程(一)：初识require.js

    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...

  7. JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules

    随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...

  8. JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6

    前言:模块化开发需求 在JS早期,使用script标签引入JS,会造成以下问题: 加载的时候阻塞网页渲染,引入JS越多,阻塞时间越长. 容易污染全局变量. js文件存在依赖关系,加载必须有顺序.项目较 ...

  9. 模块化-CommonJs、AMD、CMD、ES6

    在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复 ...

随机推荐

  1. POJ 3903 Stock Exchange 【最长上升子序列】模板题

    <题目链接> 题目大意: 裸的DP最长上升子序列,给你一段序列,求其最长上升子序列的长度,n^2的dp朴素算法过不了,这里用的是nlogn的算法,用了二分查找. O(nlogn)算法 #i ...

  2. web漏洞扫描工具AWVS使用

    AWVS AWVS简介:Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,如交叉站点脚 ...

  3. sicp 习题

    1.11 求f(n)=f(n-1)+2*f(n-2)+3*f(n-3) #lang racket (define (fff n) (define (fff-iter a b c n) (if (= n ...

  4. 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时

    HttpContext context = HttpContext.Current; //而后,再使用: if (context.Session["user"] != null) ...

  5. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  6. Adding Digital control to Dual tracking LM317 / LM337 Bench supply

    Adding Digital control to Dual tracking LM317 / LM337 Bench supply I've been working on my own idea ...

  7. p4 环境变量的优先级

    Perforce settings such as port, user, and workspace names using the following methods, listed in ord ...

  8. ITxlab倡议启动“互联网X大脑”计划

    导语:"互联网X大脑"计划由ITxlab(互联网X实验室)联合科学院相关机构.基于7年以来取得的研究成果,倡议建立的互联网与脑科学前沿研究平台,吸引不同领域专家进行科学研究和成果交 ...

  9. C#编程（八十一）---------- 捕获异常

    捕获异常 前面主要说了关于异常的一些基础和理论知识,没有进入到正真的异常案例,这一讲通过几个案例来描述一下异常的捕获和处理. 案例代码: using System; using System.Coll ...

  10. Javascript：自己写模板引擎

    背景 因为JS没有提供“字符串插入”和“多行字符串”特性,传统的拼凑字符串容易出错.性能不高和不容易理解代码,为了应对这些问题,很多个人和团队开发了模板引擎,现在主流的JS框架几乎都提供此类功能了. ...