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

列印頁面

上一個

下一個