JavaScript模块化规范：AMD与CMD详解

JavaScript模块化概述

本文将为您详细解读JavaScript中的模块化机制，具体内容如下。

AMD规范详解

AMD（Asynchronous Module Definition）规范是RequireJS在推广过程中对模块定义进行的规范化产出。

AMD规范采用异步加载模块的方式，其核心特征是依赖前置与提前执行。在定义模块时，使用define函数，例如：define(['require','foo'], function(){ return });在加载模块时，使用require函数，例如：require(['foo','bar'], function(foo,bar){});

CMD规范详解

CMD（Common Module Definition）规范是SeaJS在推广过程中对模块定义进行的规范化产出。

在CMD规范中，define函数用于定义模块并导出exports，例如：define(function(require, exports, module){});其中，module对象存储了当前模块的一些属性。引入模块时，可以使用require('./a')直接引入，或使用Require.async进行异步引入。CMD规范的特点是同步加载、依赖就近以及延迟执行。

SeaJS应用与示例

接下来介绍SeaJS的具体应用。

您可以参考官方入门例子：http://seajs.org/docs/#quick-start

那么，如何编写一个SeaJS模块呢？

// 所有模块都通过 define 来定义
define(function(require, exports, module) {
 
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
 
});

在页面中加载模块的具体方式如下。

//在 hello.html 页尾，通过 script 引入 sea.js 后，有一段配置代码：
 
// seajs 的简单配置
seajs.config({
 base: "../sea-modules/",
 alias: {
  "jquery": "jquery/jquery/1.10.1/jquery.js"
 }
})
 
// 加载入口模块
seajs.use("../static/hello/src/main")

以上就是关于JavaScript模块化的简单介绍，希望对大家学习JavaScript模块化有所帮助。