RequireJS – это эффективный способ повышения скорости и качества кода JavaScript, а также его чтения и простоты в обслуживании.
В этой статье мы ознакомим вас с RequireJS и как начать им пользоваться. Мы поговорим о “требующихся файлах”, “определение модуля”, а также коснемся “оптимизации”. Проще говоря, require.js это скрипт-загрузчик, который позволяет вставить ваш JavaScript код в файлы и модули, таким образом управляя зависимостью каждой модели.
Требующиеся файлы
Для начала работы с RequireJS и его Асинхронным Модулем Определения (AMD) нам нужно его скачать, а затем привязать его к require.js файлу в хэдере (head) нашего документа, следующим образом:
<script src="require.js" data-main="main"></script>
Вам наверно интересно, что это за data-main атрибут. Так вот, использование RequireJS означает, что при вызове require в начале (head) вашего документа, вы также связываетесь с основным файлом вашего приложения JavaScript, Атрибут data-main является ссылкой на основной файл JavaScript для вашего приложения, в данном случае main.js. (Заметим, что RequireJS автоматически добавляет .js в конце имени файла.)
В main.js файле нужно разместить конфигурации для RequireJS, загрузить модули и определить базовый путь использования при требование (requiring) файлов.
Функция “Require”
RequireJS использует простую функции require для загрузки скриптов, в следующем примере RequireJS загружает jQuery:
require(["jquery"], function($) {
return $(‘#mydiv”).html(‘Привет! Это сообщение от RequireJS!”);
});Одна из лучших вещей в RequireJS является то, что он хорошо читаем. Если вы посмотрите на этот код, то вы увидите, что сначала require берет файл с именем jquery.js и передает анонимную функции с jQuery $ в качестве параметра. Когда это будет сделано, вы можете свободно использовать все jQuery кода, которые пожелаете.
Обычно у вас не будет jQuery библиотеки в файле jquery.js, как и с большинством плагинов и структур. Мы загружаем их с GitHub или Google CDN, а для этого нам нужно настроить путь, чтобы они указывали в нужное место:
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
}
});Это означает, вы можете потребовать (require) jQuery через Google и использовать его без проблем.
Определение модуля
Использование AMD шаблона означает, что наш код может быть структурирован в модули; эти модули – просто кусочки кода, которые делают что-то в нашем приложении. Вы можете разместить две строки кода в модуле или 100, всё зависит от того, что вы хотите, чтобы модуль делал.
Для определения модуля используем такой код:
define(function () {
function add (x,y) {
return x + y;
}
});В этом примере мы создали простую функцию добавить (add) без зависимостей, но если этой функции необходимо, чтоб JQuery работал должным образом, функция определение (define) будет структурирована следующим образом:
define([‘jquery’], function () {
function place(mydiv) {
return $(mydiv).html(‘Мой пример текста’);
}
});Используя этот синтаксис мы говорим JavaScript пойти взять jQuery, а затем запустить код, чтобы jQuery был доступен при необходимости.
Оптимизация
Как вы видите, RequireJS является отличным инструментом для организации файлов в модули и загрузки только необходимого. Недостатком является то, что слишком много файлов JavaScript приводят к ухудшению времени загрузки, поэтому RequireJS включает в себя оптимизатор для сбора данных из всех файлов и размещение их в одном минимизированом файле.
В целом, RequireJS является одним из лучших способов организовать и оптимизировать ваш JavaScript для современного веб мира.
Высоких конверсий!
