Недостатки обычной загрузки JS
Интерфейс должен начать рендеринг после загрузки js
Если между js есть зависимости, их нужно загружать в соответствии с зависимостями. Если зависимости сложны, писать и поддерживать код становится сложнее
Так require.js возникло в голосе широких масс народа.
Роль require.js
Реализовать асинхронную загрузку js для предотвращения неотзывчивости страницы
Управление зависимостями между модулями для облегчения написания и обслуживания кода
require.js загрузка
Сначала зайдите на [официальный сайт] http://requirejs.org/ скачайте последнюю версию
Загрузите или скопированные require.js в каталог проектов
Загрузите require.js на нужную страницу
Прямая загрузка: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Асинхронная загрузка: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Примечание: асинхронный означает, что этот файл нужно загружать асинхронно, чтобы веб-страница не стала неотзывчивой. IE не поддерживает асинхронизацию, поэтому загрузите атрибут отсрочки;
После загрузки require.js следующий шаг — загрузка собственного кода. Предположим, что наш собственный кодовый файл — это main.js, также помещённый в каталог js. Поэтому просто напишите следующее: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Функция атрибута data-main — указывать основной модуль веб-программы. В приведённом выше примере этот файл будет загружен сначала require.js main.js в каталоге js. Поскольку require.js стандартный суффикс файла — js, можно сокращать main.js до main.
Как написать основной модуль
main.js из предыдущего раздела называется основным модулем. То есть метод ввода для всего модуля.
Как писать main.js
Методы, написанные напрямую на main.js без использования других модулей
main.function()
Основной модуль зависит от других модулей, поэтому используйте функцию require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Здесь немного кода
});
Функция require() принимает два параметра:
Первый параметр — это массив, представляющий модули, от которых зависит
Второй параметр — это функция обратного вызова, которая будет вызвана после загрузки всех модулей, указанных в фронте. Добавленные модули передаются в виде параметров, чтобы их можно было использовать внутри функции обратного вызова.
Загрузка модулей
Пример: если зависимый модуль основного модуля (main.js) — это ['jquery', 'crypto-js', 'что угодно']
Загрузка по умолчанию
Если файлы этих трёх зависимых модулей находятся jquery.js, crypto-js.js, anything.js и main.js в одной директории, их можно автоматически загружать согласно предыдущему разделу
Загрузка конфигурации require.config()
require.config() записывается в голове основного модуля (main.js).
Как пишутся модули AMD
require.js загруженный модуль, использующий спецификацию AMD. То есть модуль должен быть написан в соответствии с регламентом AMD.
В частности, модули должны быть определены определённой функцией define(). Если модуль не зависит от других модулей, его можно определить напрямую в функции define()
Предположим, что теперь существует math.js файл, который определяет математический модуль. Затем math.js пишу:
Вот как загрузить:
Если модуль также зависит от других модулей, то первым аргументом функции define() должен быть массив, указывающий зависимости модуля.
Когда функция require() загружает вышеуказанный модуль, она сначала загружает myLib.js файл.
Загрузка модулей без AMD
На рынке есть много модулей, которые не соответствуют спецификации AMD, require.js можно загружать
Перед загрузкой этих модулей необходимо настроить require.config() для определения некоторых их характеристик
Например, noamd.js и noamddeps.js оба модуля не являются AMD-модулями, и если вы хотите их загрузить, нужно определить их характеристики:
require.js принимает объект конфигурации, который, помимо свойства путей, также имеет свойство shim, предназначенное специально для настройки не-AMD модулей.
В частности, каждый модуль определяет:
- значение экспорта (имя выходной переменной): указывает имя модуля при его внешнем вызове
- массив deps: указывает зависимости этого модуля
Например, плагин jQuery можно определить следующим образом:
require.js плагин
require.js также предлагает ряд плагинов, реализующих некоторые специальные функции
Плагин domready позволяет выполнять функцию обратного вызова после загрузки структуры DOM страницы:
Текстовые и изображенные плагины, которые позволяют require.js загружать текстовые и изображенные файлы:
Похожие плагины включают JSON и MDOWN для загрузки файлов JSON и Markdown.
|
Опубликовано 11.10.2017 9:31:50
|
|
|
