Looking for requirejs Answers? Try Ask4KnowledgeBase
Looking for requirejs Keywords? Try Ask4Keywords

requirejsНачало работы с requirejs


замечания

RequireJS - это реализация API асинхронного модуля (AMD), который используется для загрузки файлов javascript асинхронно (т.е. без блокировки) и управления зависимостями между несколькими файлами javascript. Он также включает инструмент оптимизации для объединения и минимизации файлов сценариев для развертывания, позволяя разработчику поддерживать логически отдельный код.

Привет, мир

В следующем примере будет продемонстрирована базовая установка и настройка RequireJS.

Создайте новый HTML-файл с именем index.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>
 

Создайте новый JS-файл в scripts/say.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. Загрузите модуль say асинхронно из папки scripts . (Обратите внимание, что вам не нужно расширение .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 с вложенными зависимостями

Следующий пример расширяет Hello World , демонстрируя несколько зависимостей с помощью функции define() .

Создайте новый HTML-файл с именем index.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>
 

Создайте новый JS-файл в scripts/say.js и вставьте следующий контент:

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

Создайте новый JS-файл в scripts/translations.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. Загрузите модуль say асинхронно из папки scripts . (Обратите внимание, что вам не нужно расширение .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

Не все библиотеки определены таким образом, который совместим с функцией define() AMD и RequireJS. Автор обратился к этому, включив директиву shim для настройки этих зависимостей.

Одним из примеров является использование плагина jQuery UI Layout. Этот плагин зависит от 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();
});
 

Использование основной точки входа

Единственная точка входа в ваше приложение возможна с RequireJS, используя data-main базу data-main отнесенную к тегу <script> .

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

При загрузке RequireJS будет искать атрибут data-main и вставить основной тег скрипта в DOM с помощью набора атрибутов async . Именно этот файл вам нужно будет выполнить любую конфигурацию, прежде чем начинать свое приложение.

Например:

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