requirejsrequirejs入門


備註

RequireJS是異步模塊(AMD)API的一種實現,用於異步加載javascript文件(即沒有阻塞)並管理多個javascript文件之間的依賴關係。它還包括一個優化工具,用於組合和最小化腳本文件以進行部署,同時允許開發人員維護邏輯上獨立的代碼。

你好,世界

以下示例將演示RequireJS的基本安裝和設置。

創建一個名為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) {
            alert(say.hello());
        });
    </script>
</body>
 

scripts/say.js 創建一個新的JS文件並粘貼以下內容:

define([], function(){
    return {
        hello: function(){
           return "Hello World";
        }
    };
});
 

您的項目結構應如下所示:

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

在瀏覽器中打開index.html 文件,它會以“Hello World”提醒您。


說明

  1. 加載require.js腳本文件。

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. scripts 文件夾異步加載say 模塊。 (請注意,引用模塊時不需要.js 擴展名。)然後將返回的模塊傳遞給提供的函數,其中調用hello()

    <script>
       requirejs(["scripts/say"], function(say) {
           alert(say.hello());
       });
    </script>
     
  3. say 模塊返回一個對象,其中定義了一個函數hello

    define([], function(){
        return {
            hello: function(){
               return "Hello World";
            }
        };
    });
     

嵌套依賴項的Hello World

以下示例通過使用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
 

說明

  1. 加載require.js腳本文件。

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
     
  2. 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>
     
  3. say 模塊返回一個定義了一個函數hello 的單個對象,但是在這種情況下我們定義了一個依賴項( scripts/translations ),我們將從那裡提取翻譯。

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
     
  4. translations 模塊只返回具有各種單詞翻譯的對象。

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

合併非AMD庫

並非所有庫都以與AMD和RequireJS的define() 函數兼容的方式define() 。作者已經通過包含用於配置這些依賴項的shim 指令來解決這個問題。

一個例子是使用jQuery UI Layout Plugin。該插件依賴於jQuery。您可以像這樣配置它:

requirejs.config({
    paths: {
        'jquery': '../path/to/jquery.min',
        'jquery.layout': '../path/to/jquery.layout.min'
    },
    shim: {
        'jquery.layout': {
            deps: ['jquery']
        }
    }
});
 

然後在這樣的佈局模塊中使用它:

define(['jquery', 'jquery.layout'], function ($, layout) {
    $('body').layout();
});
 

使用data-main入口點

通過使用<script> 標記內的data-main ,RequireJS可以為您的應用程序提供單一入口點。

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

在加載時,RequireJS將查找data-main 屬性並將主腳本標記註入到具有async 屬性集的DOM中。啟動應用程序之前,您需要進行任何配置。

例如:

// contents of scripts/main.js
require.config({
    waitSeconds: 10,
    paths: {
        jquery: 'libs/jquery-1.4.2.min'
    }
});

requirejs(["jquery", "libs/say"], function($, say) {
    var $body = $('body');
    $body.append( $('<p/>').text(say.hello("english")) );
    $body.append( $('<p/>').text(say.hello("spanish")) );
    $body.append( $('<p/>').text(say.hello("french")) );
});