模块化三种规范的对比

本是古典何须时尚 2024-04-17 06:23 81阅读 0赞

当一个网站复杂度较高需要多人协作开发时，传统的非模块化编程模式容易导致代码**冲突**和**依赖**等问题，而模块化编程的诞生正是为了解决此类问题。然而，在ES6之前，原生JavaScript是不支持模块化的，因此就出现了一系列的JavaScript库来实现此功能，这些库主要遵循以下三种规范：

> ① CommonJS  
> ② AMD  
> ③ CMD

接下来我就粗略地讲讲这三种规范。

### 一、CommonJS规范 ###

> 关键词： module，exports，require

CommonJS规范下的模块调用是同步的，也就是说必须等模块加载完成之后，接下来的代码才能继续运行。因此，该规范主要适用于服务端，因为服务端可以直接从硬盘中调用所需要的模块，而这个过程速度是非常快的。相比之下，通过网络调用所需模块的浏览器客户端则不适合使用该规范。

目前使用该规范的典型代表有：Node.js、微信小程序。

下面以Node.js中的两个小例子，简单讲讲CommonJS规范下的模块化编程。

#### 1. 无返回值的模块调用 ####

//module.js console.log('这是一个模块。');

//main.js require('./module'); // 或写成 require('./module.js')，但千万注意不能写成 require('module')

以上module.js和main.js两个文件处于同一目录下。

#### 2. 有返回值的模块调用 ####

//module.js function foo(){ console.log('这是一个模块。'); } module.exports = { // 此处提供模块对外接口 foo: foo // 此处对外接口中的方法名不一定要与以上定义的方法名一致，比如可以写成 func: foo，那么此时调用时就应该写成 module.func() };

//main.js var module = require('./module.js'); // 加载module模块 module.foo(); // 此处调用module模块下的foo方法，该方法名须与模块中对外接口方法名一致

### 二、AMD规范 ###

> 关键词： define，require

与CommonJS不同，AMD规范下的模块调用是异步的，主要适用于浏览器客户端。

目前使用该规范的典型代表有：require.js、curl.js。

下面以require.js为例，简单讲讲AMD规范下的模块化编程。

<script src="scripts/require.js"></script>
    <script src="scripts/main.js" data-main="scripts/main"></script>

#### 1. 无返回值的模块调用 ####

//module.js console.log('这是一个模块。');

//main.js require(['scripts/module']); // 请求的模块路径用数组表示

#### 2. 有返回值的模块调用 ####

//module.js function foo(){ console.log('这是一个模块。'); } define(function(){ return { foo: foo } });

//main.js require(['scripts/module'],function(module){ module.foo(); });

### 三、CMD规范 ###

> 关键词： use，define，require，exports，module

CMD规范结合了以上两种规范的特点，既可以同步调用，也可以异步调用，在语法上也非常相似。

目前使用该规范的典型代表有：sea.js。

下面就以sea.js为例，简单讲讲CMD规范下的模块化编程。

<script src="scripts/sea.js"></script>
    
    <script type="text/javascript"> seajs.use('main'); </script>

#### 1. 无返回值的模块调用 ####

//module.js console.log('这是一个模块。');

//main.js define(function(require,exports,module){ require('module'); });

这里需要重点说明一下，define()中回调函数中所传参数名称不允许修改。

#### 2. 有返回值的模块调用 ####

**定义模块**：

//module.js function foo(){ console.log('这是一个模块。'); } define(function(require,exports,module){ //也可以直接通过return方式暴露模块接口，这样就与AMD规范相同 module.exports = { foo: foo } });

**调用模块**存在同步和异步两种方式：

① 同步调用

//main.js define(function(require,exports,module){ var module = require('module'); module.foo(); });

② 异步调用

//main.js define(function(require,exports,module){ require.async('module',function(module){ module.foo(); }); });

**本次有关JavaScript模块化编程规范的分享就到这里，若有不到之处，欢迎指正，谢谢！**