Недостатъци на нормалното зареждане на 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" 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'], функция (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 г. 9:31:50 ч.
|
|
|
