CommonJS和AMD

傷城~ 2022-05-29 01:37 163阅读 0赞

参考：[CommonJS规范][CommonJS]

为什么模块很重要？

答：因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！于是下面三个模块规范出来了。

## CommonJS ##

CommonJS规范中，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

var math = require('math');

然后，就可以调用模块提供的方法：

var math = require('math');
    math.add(2,3); // 5

**CommonJS定义的模块分为:\{模块引用(require)\} \{模块定义(exports)\} \{模块标识(module)\}**

*  require()用来引入外部模块；
 *  exports对象用于导出当前模块的方法或变量，唯一的导出口；
 *  module对象就代表模块本身。
 *  global定义全局变量

**CommonJS模块的特点如下：**

*  所有代码都运行在模块作用域，不会污染全局作用域。
 *  模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
 *  模块加载的顺序，按照其在代码中出现的顺序。

## AMD ##

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作，所以CommonJS适合服务器端，不适合客户端（浏览器端）。浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。这就是AMD(异步模块定义)规范诞生的背景，它就主要为浏览器端JS的表现制定规范。

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

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

require([module], callback);

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

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

`math.add()`与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

AMD模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

// math.js
    define(function (){ 
        var add = function (x,y){ 
            return x+y;
        };
        return {
            add: add
        };
    });

加载方法如下：

// main.js
    require(['math'], function (math){ 
        alert(math.add(1,1));
    });

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){ 
       function foo(){ 
           myLib.doSomething();
       }
       return {
           foo : foo
       };
    });

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

[CommonJS]: http://javascript.ruanyifeng.com/nodejs/module.html