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>");   
});

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

对于 team1 −

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

对于 team2 −

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

输出

在浏览器中打开 HTML 文件;您将收到如下图所示的输出 −

接下来，单击"确定"按钮，您将收到模块的另一个输出，如下图所示 −

requirejs_amd_modules.html