Недоліки звичайного завантаження JS
Інтерфейс має почати рендеринг після завантаження js
Якщо між js є залежності, їх потрібно завантажувати у порядку відповідно до залежностей. Якщо залежності складні, писати та підтримувати код складніше
Отже, require.js виникло в голосі широких мас народу.
Роль require.js
Реалізувати асинхронне завантаження js, щоб уникнути нечутливості сторінки
Керування залежностями між модулями для полегшення написання коду та обслуговування
require.js завантаження
Спочатку зайдіть на [офіційний сайт] http://requirejs.org/ завантажте останню версію
Покладіть завантажені або скопійовані require.js у каталог проєкту
Завантажте require.js на бажану сторінку
Пряме завантаження: Записати <scrip{filter}t src="js/require.js"></scrip{filter}t>
Асинхронне завантаження: <scrip{filter}t src="js/require.js" відкласти 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'], функція (moduleA, moduleB, moduleC){
Трохи коду тут
});
Функція require() приймає два параметри:
Перший параметр — це масив, який представляє модулі, від яких слід залежати
Другий параметр — це функція зворотного виклику, яка буде викликана після завантаження всіх модулів, зазначених у фронті. Додані модулі передаються у вигляді параметрів, щоб їх можна було використовувати всередині функції зворотного виклику.
Завантаження модулів
Приклад: Якщо залежний модуль основного модуля (main.js) — це ['jquery', 'crypto-js', 'будь-що']
Завантаження за замовчуванням
Якщо файли цих трьох залежних модулів знаходяться jquery.js, crypto-js.js, anything.js і main.js в одній директорії, їх можна автоматично завантажити відповідно до попереднього розділу
Config load 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 09:31:50
|
|
|
