AMD异步模块介绍

【D＇accumulation】

于 2025-02-25 17:33:18 发布

阅读量300

点赞数 7

文章标签：前端学习

本文链接：https://blog.csdn.net/qq_55018264/article/details/145857600

版权

基本介绍

AMD（Asynchronous Module Definition，异步模块定义）是一种用于 JavaScript 模块化编程的规范，它允许 JavaScript 代码以异步方式加载模块及其依赖。它最初是为了解决浏览器端 JavaScript 代码模块化的问题，最著名的实现是 RequireJS。

AMD出现背景

JavaScript 发展初期，所有代码都写在一个 .js 文件里，或者通过

有哪些特点

AMD 主要用于浏览器端 JavaScript，它的核心特点是：
模块是独立的，可以在不同文件中定义和管理。
模块加载是异步的，不会阻塞页面渲染。
可以显式声明依赖，保证模块加载顺序

两个核心方法：

AMD 主要提供了两个关键方法：define、require
define()：定义一个模块，并指定它的依赖。
require()：加载一个或多个模块，并执行回调。

define()举例：

//['moduleA', 'moduleB'] 是依赖模块的列表。
//回调函数 function(A, B) 只有在依赖加载完成后才会执行。
define(['moduleA', 'moduleB'], function(A, B) {
    // A 和 B 作为依赖模块被加载进来
    function myFunction() {
        console.log(A.doSomething() + B.doSomething());
    }

    return {
    //返回值 { myFunction: myFunction } 作为模块的导出内容，其他模块可以使用它。
        myFunction: myFunction
    };
});

require()举例：

//只有当 myModule 加载完成后，回调 function(myModule) 才会执行。
require(['myModule'], function(myModule) {
// 按需加载 需要的模块，而不会影响其他部分的执行
    myModule.myFunction();
});

AMD作为异步编程，不同于CommonJS，AMD不堵塞代码执行

例子

console.log("1: 开始加载模块...");
define(['moduleA'], function(moduleA) {
    console.log("2: 模块A 加载完成");
});
console.log("3: 代码不会被阻塞，可以继续运行");

define() 不会阻塞代码执行，它会在 moduleA 加载完成后才执行回调函数。
console.log(“3: 代码不会被阻塞”) 会立即执行，不需要等待模块加载。
这对于 NetSuite 这样的云端系统至关重要，保证了脚本不会因为等待一个模块而影响整个页面的运行。