AMD（requirejs）模块的基本使用

最新推荐文章于 2025-04-02 15:29:09 发布

lengye7

最新推荐文章于 2025-04-02 15:29:09 发布

阅读量936

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/lengye7/article/details/123793112

版权

前端专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍如何使用RequireJS进行模块化开发，包括基本的模块定义、配置及加载方式。通过实例演示了RequireJS如何帮助开发者组织代码，实现按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

使用requirejs在浏览器中加载模块，其实就只有3个主要的API：

require，require.config，define。

由于requirejs与require在全局作用域下是同一个API，我这里使用requirejs。

我之所以使用requirejs的原因：

requirejs在后续的define加载过程中，其会吧require重新绑定到另外一个函数，所以为了防止一些意外情况，我使用requirejs这个API来代替require这个API。

所以，我使用的API就三个：

requirejs，requirejs.config，define。

一般性使用

requirejs版本：2.3.6

这个使用办法应该是个万金油，什么情况都能往上套。

首先来说模块定义：

模块定义有多重形式，直接使用如下万金油形式。

//requirejs支持这种形式的模块定义
define(function(require,exports,module){
       //这里是模块定义
       var moduleA = require('./moduleA');
       ...一些模块代码定义
       module.exports = {
                //这里是需要导出的内容   
          }; 
    });

官方模块定义形式：RequireJS API

模块加载配置：

requirejs.config({
    baseUrl:"./",
    paths:{
        "app":"./app",
        "jQuery":"./v1.0/",   
    }    
});

//paths可以配置路径，方便在项目中随意切换模块版本。

经常使用的配置项就这两项。

baseUrl用于配置基础路径，所有模块的相对路径都根据这里来进行计算。

paths用于给路径一个别名，主要用途就是方便模块调用，有了它，就不用在调用模块的时候，写一长串的路径名了。

官方配置项文档：RequireJS API

模块载入入口：

模块载入入口有两种形式：data-main与index.html中内嵌。

这里使用index.html中内嵌：

    <script src="./js/require.js"></script>
    <script>
        requirejs.config({
            baseUrl:"js",
            paths:{
                "app":"./app",
            }
        });
        requirejs(["app"],function(){
            console.log("This is index.html,require app success!");
        });
    </script>

例子：

目录结构：

模块代码：

//moduleA.js

define(
 function(require,exports,module) {
    'use strict';
    module.exports = {
        helloA:function(){
            console.log("I am moduleA! helloA!")
        }
    }
    
});

//app.js

define(
 function(require) {
    'use strict';
    var moduleA = require('./lib/moduleA');
    console.log("I am app! calling moduleA.hello!");
    moduleA.helloA();
});

index.html的载入代码：

    <script src="./js/require.js"></script>
    <script>
        requirejs.config({
            baseUrl:"js",
            paths:{
                "app":"./app",
            }
        });
        requirejs(["app"],function(){
            console.log("This is index.html,require app success!");
        });
    </script>