当前位置：首页 > article >正文

AMD模块

article 2025/2/4 15:06:33

AMD 与 CommonJS

在介绍 AMD 之前，我们需要了解 CommonJS 规范。CommonJS 是服务器端 JavaScript（如Node.js）的模块化标准，它使用同步方式加载模块。然而，这种方式并不适用于浏览器环境，因为 JavaScript 文件需要从服务器异步加载。AMD 规范应运而生，AMD 全称 Asynchronous module definition，意为异步的模块定义，不同于 CommonJS 规范的同步加载，AMD 正如其名所有模块默认都是异步加载，它允许模块异步加载，不会阻塞浏览器的其他操作。这使得 AMD 规范非常适合浏览器端的 JavaScript 模块化编程。

AMD的核心概念

AMD 规范的核心是 define 和 require 两个函数。

define

用于定义模块，它接受一个模块数组和一个工厂函数。
require

用于加载模块，它接受一个模块数组和一个回调函数。

AMD 使用

首先我们需要引入 require.js 文件和一个入口文件 main.js 。main.js 中配置require.config()并规定项目中用到的基础模块。

<!-- 网页中引入require.js及main.js -->
<script src="js/require.js" data-main="js/main"></script>

/** main.js 入口文件/主模块 **/
// 首先用 config() 指定各模块路径和引用名
require.config({
    baseUrl: "js/lib",
    paths: {
        "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
        "underscore": "underscore.min",
    }
});
// 执行基本操作
require(["jquery","underscore"],function($,_){
    // some code here
});

引用模块的时候，我们将模块名放在[]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块，那就需要将它们放在[]中作为define()的第一参数。

// 定义math.js模块
define(function () {
    var basicNum = 0;
    var add = function (x, y) {
        return x + y;
    };
    return {
        add: add,
        basicNum :basicNum
    };
});

// 定义一个依赖underscore.js的模块
define(['underscore'],function(_){
    var classify = function(list){
        _.countBy(list,function(num){
            return num > 30 ? 'old' : 'young';
        })
    };
    return {
        classify :classify
    };
})

// 引用模块，将模块放在[]内
require(['jquery', 'math'],function($, math){
    var sum = math.add(10,20);
    $("#sum").html(sum);
});