随笔- 1129 文章- 35 评论- 228 阅读- 160万

RequireJS 中的define，require区别

定义

在AMD（Asynchronous Module Definition）和RequireJS中，define 和 require 是两个关键概念，但它们在模块定义和模块加载方面有不同的用途。

`define`

define 用于定义模块。当你有一个JavaScript文件，它包含了一些函数、变量或对象，并且你想在其他地方重用这些代码时，你可以使用 define 来定义一个模块。define 函数接受三个参数（尽管常见的用法只使用前两个）：

依赖项数组：一个字符串数组，列出了模块所依赖的其他模块。
工厂函数：一个函数，当所有依赖项都加载完成后，该函数会被调用。这个函数应该返回一个值，这个值就是这个模块的输出（即它的“导出”）。
（可选）模块ID：一个字符串，表示模块的ID。但在实践中，通常通过路径来识别模块，所以这个参数很少使用。

// 使用define定义一个模块  
define(['dep1', 'dep2'], function(dep1, dep2) {  
    // 使用dep1和dep2做一些事情  
    // ...  
   
    // 返回模块的导出值  
    return {  
        someMethod: function() {  
            // ...  
        }  
    };  
});

`require`

require 用于加载和依赖模块。在RequireJS中，你可以使用 require 函数来异步地加载一个或多个模块，并在这些模块加载完成后执行一个回调函数。这个回调函数会接收这些模块作为参数。

// 使用require加载模块  
require(['module1', 'module2'], function(mod1, mod2) {  
    // 使用mod1和mod2做一些事情  
    // ...  
});

另外，在模块的顶层（不在其他函数中），你也可以使用 require 语句来同步地加载一个模块。但是请注意，这种用法在RequireJS中是不推荐的，因为它会阻塞代码的执行直到模块加载完成。

详细示例

当使用RequireJS库时，你需要确保你的HTML页面包含了RequireJS的脚本引用，并且你的JavaScript模块都是按照AMD规范定义的。以下是一个使用RequireJS加载AMD模块的实际示例：

首先，你需要创建两个AMD模块文件。首先是 mathModule.js（假设它位于 js 目录下）：

// js/mathModule.js  
define([], function() {  
    // 这是一个简单的数学模块  
    return {  
        add: function(a, b) {  
            return a + b;  
        },  
        multiply: function(a, b) {  
            return a * b;  
        }  
    };  
});

接下来，是 appModule.js（同样位于 js 目录下）：

// js/appModule.js  
define(['mathModule'], function(mathModule) {  
    // 这是一个依赖于mathModule的应用模块  
    return {  
        calculateSomething: function(a, b) {  
            var sum = mathModule.add(a, b);  
            var product = mathModule.multiply(a, b);  
            console.log('Sum:', sum);  
            console.log('Product:', product);  
        }  
    };  
});

然后，你需要一个HTML文件来包含RequireJS库并配置模块加载：　

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>RequireJS AMD Example</title>  
    <!-- 引入RequireJS库 --> 
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>  
    <script>  
        // RequireJS的配置项  
        require.config({  
            baseUrl: 'js', // 假设你的模块文件都放在js目录下  
            paths: {  
                'mathModule': 'mathModule', // 相对于baseUrl的路径  
                'appModule': 'appModule'  
            }  
        });  
   
        // 当DOM加载完成后，加载appModule模块  
        require(['appModule'], function(app) {  
            app.calculateSomething(5, 3); // 调用appModule的calculateSomething方法  
        });  
    </script>  
</head>  
<body>  
    <!-- 页面内容 --> 
</body>  
</html>

确保你的HTML文件、RequireJS库以及这两个模块文件都在同一台服务器上，并且路径配置正确。当你打开HTML文件时，RequireJS会首先加载其库文件，然后按照你在require.config中指定的配置加载appModule。由于appModule依赖于mathModule，RequireJS会先加载mathModule，然后再加载appModule。最后，当所有模块都加载完成后，appModule的calculateSomething方法会被调用，并输出计算结果到控制台。

区别

定义与加载：define 用于定义模块，而 require 用于加载模块。
作用域：define 是在模块文件中使用的，用于定义模块的导出值；而 require 可以在任何JavaScript文件中使用，用于加载模块并在回调函数中使用它们。
同步与异步：在模块文件的顶层使用 require 是同步的（不推荐），而 require 函数（作为回调函数的一部分）是异步的。define 总是异步的，因为它是在模块加载过程中被调用的。
返回值：define 函数返回一个模块的定义（即它的导出值），而 require 函数没有返回值（但它的回调函数会接收加载的模块作为参数）。

在模块的顶层使用 `require`（同步加载）

在RequireJS中，通常不推荐在模块的顶层（全局作用域）直接使用 require 语句来加载模块，因为这会使得加载过程同步进行，从而阻塞代码的执行。但如果你确实这样做了，它会像这样：

// 假设这是你的主JavaScript文件 main.js  
// 注意：这不是推荐的做法，因为它会阻塞  
var myModule = require(['myModule']);  
   
// 在这里，myModule 已经加载完成，并且你可以使用它  
myModule.doSomething();

上面的代码在 main.js 中同步地加载了 myModule 模块，这意味着 main.js 中的后续代码会在 myModule 完全加载并解析后才继续执行。这会阻塞浏览器的其他脚本和渲染操作，因此是不推荐的。

正确的异步加载方式

RequireJS 提供了异步加载模块的方式，通过 require 函数并传递一个回调函数：

// 假设这是你的主JavaScript文件 main.js  
require(['myModule'], function(myModule) {  
    // 在这里，myModule 已经加载完成，并且你可以使用它  
    myModule.doSomething();  
       
    // 这里的其他代码会在模块加载完成后才执行  
});  
   
// 这里的代码会立即执行，而不管 myModule 是否加载完成  
console.log('This will execute immediately, regardless of module load status.');

　　在上面的代码中，require 函数会异步地加载 myModule，并在模块加载完成后调用提供的回调函数。这使得页面的其他脚本和渲染可以继续进行，不会受到阻塞。

posted @ 2024-05-06 18:58 JackYang 阅读(533) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

2025年4月

日

一

二

三

四

五

六

RequireJS 中的define，require区别

定义

`define`

`require`

详细示例

区别

在模块的顶层使用 `require`（同步加载）

正确的异步加载方式

积分与排名

随笔分类 (1254)

阅读排行榜

推荐排行榜

RequireJS 中的define，require区别

定义

define

require

详细示例

区别

在模块的顶层使用 require（同步加载）

正确的异步加载方式

积分与排名

随笔分类 (1254)

阅读排行榜

推荐排行榜

`define`

`require`

在模块的顶层使用 `require`（同步加载）