RequireJS - 模块加载

在 js 文件中使用 define() 函数来加载模块。在 HTML 文件中加载模块的语法如下所示 -

<script data-main = "main" src = "require.js"></script>

在上面给出的脚本标记中，main 用于设置相对于 require.js 的软件包，在本例中是源软件包 team1 和 team2 -

示例

以下示例描述如何在 RequireJS 中定义和加载模块。创建一个名为 index.html 的 html 文件，并放置以下代码。

<!DOCTYPE html>
<html>
   <head>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Example</h2>
   </body>
</html>

创建一个名为 main.js 的 js 文件，并放置以下代码。

define(function (require) {
   var team1 = require("./team1");
   var team2 = require("./team2");

   alert("Welcome to Tutorialpoint");
   document.write("<h4>Hyderabad Team: </h4>" + "<br>" + " Team:"+team1.team +"<br>
      "+"Captain:" +team1.captain +"<br>");
   
   document.write("<h4>Bangalore Team: </h4>" + "<br>" + " Team:"+team2.team +"<br>
      "+"Captain:"+team2.captain +"<br>");   
});

再创建两个名为 team1.js 和 team2.js 的 js 文件，并分别放置以下代码。

对于 team1 -

define({
   team: "Sunrisers Hyderabad",
   captain : " David Warner"
});

对于 team2 -

define({
   team: "RCB",
   captain : "Virat Kohli"
});

输出

在浏览器中打开 HTML 文件；你将收到一个输出，如下面的截图所示 -

接下来，单击“确定”按钮，你将从模块中得到另一个输出，如下面的截图所示 -

requirejs_amd_modules.htm

打印页面

上一个

下一个