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