巢狀依賴項的 Hello World

Created: November-22, 2018

以下示例通過使用 define() 函式演示多個依賴項來擴充套件 Hello World。

建立一個名為 index.html 的新 HTML 檔案並貼上以下內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            console.log(say.hello("english"));
            console.log(say.hello("spanish"));
            console.log(say.hello("french"));
        });
    </script>
</body>

在 scripts/say.js 建立一個新的 JS 檔案並貼上以下內容：

define(["scripts/translations"], function(translations){
    return {
        hello: function(language){
           return translations[language].hello + " " + translations[language].world;
        }
    };
});

在 scripts/translations.js 建立一個新的 JS 檔案並貼上以下內容：

define([], function(){
    return {
        "english": {
            hello: "Hello",
            world: "World"
        },
        "spanish": {
            hello: "Hola",
            world: "Mundo"
        },
        "french": {
            hello: "Bonjour",
            world: "Le Monde"
        }
    };
});

你的專案結構應如下所示：

- project
    - index.html
    - scripts
        - say.js
        - translations.js

在瀏覽器中開啟 index.html 檔案，控制檯將輸出：

Hello World
Hola Mundo
Bonjour Le Monde

說明

載入 require.js 指令碼檔案。

<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>

從 scripts 資料夾非同步載入 say 模組。 （請注意，引用模組時不需要 .js 擴充套件。） 然後將返回的模組傳遞給提供 hello() 的函式。

<script>
     requirejs(["scripts/say"], function(say) {
         console.log(say.hello("english"));
         console.log(say.hello("spanish"));
         console.log(say.hello("french"));
     });
</script>

say 模組返回一個物件，其中定義了一個函式 hello，但在這種情況下，我們定義了一個依賴項（scripts/translations），我們將從那裡拉出翻譯。

define(["scripts/translations"], function(translations){
    return {
        hello: function(language){
           return translations[language].hello + " " + translations[language].world;
        }
    };
});

translations 模組只返回具有各種單詞翻譯的物件。

define([], function(){
    return {
        "english": {
            hello: "Hello",
            world: "World"
        },
        "spanish": {
            hello: "Hola",
            world: "Mundo"
        },
        "french": {
            hello: "Bonjour",
            world: "Le Monde"
        }
    };
});