Tavalise JS-koormuse puudused
Liides peab alustama renderdamist pärast js laadimist
Kui js-ide vahel on sõltuvusi, tuleb need laadida sõltuvuste järgi järjekorras. Kui sõltuvused on keerulised, on koodi kirjutamine ja hooldamine keerulisem
Nii sündis require.js laia rahvamassi hääles.
require.js roll
Rakenda js-i asünkroonne laadimine, et vältida lehe reageerimatust
Hallata sõltuvusi moodulite vahel, et hõlbustada koodi kirjutamist ja hooldust
require.js laadimine
Esiteks mine [ametlikule veebilehele] http://requirejs.org/ laadi alla uusim versioon
Kandke alla laaditud või kopeeritud require.js projekti kataloogkonda
Lae require.js soovitud lehele
Otsene laadimine: Kirjuta <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asünkroonne laadimine: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Märkus: asünkroonsus tähendab, et see fail tuleb laadida asünkroonselt, et veebileht ei muutuks reageerimatuks. IE ei toeta asünkroonsust, seega laadi edasilükkamise atribuut;
Kui require.js on laaditud, on järgmine samm laadida oma kood. Oletame, et meie enda koodifail on main.js, samuti js kataloogi all. Nii et kirjuta lihtsalt järgmine: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Andmepõhi atribuudi funktsioon on määrata veebiprogrammi põhimoodul. Ülaltoodud näites laaditakse see fail esmalt require.js main.js js kataloogi all. Kuna require.js vaikimisi failisufiks on js, saab lühendada main.js main'iks.
Kuidas kirjutada põhimoodulit
Eelmise osa main.js nimetatakse peamooduliks. See tähendab kogu mooduli sisestusmeetodit.
Kuidas kirjutada main.js
Meetodid, mis on kirjutatud otse main.js ilma teistele moodulitele tuginemata
main.function()
Põhimoodul sõltub teistest moodulitest, seega kasuta require() funktsiooni
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Siin on natuke koodi
});
Require() funktsioon aktsepteerib kahte parameetrit:
Esimene parameeter on massiivi, mis esindab mooduleid, millele sõltub
Teine parameeter on tagasikutsumise funktsioon, mis kutsutakse välja pärast seda, kui kõik eespool nimetatud moodulid on laaditud. Lisatud moodulid edastatakse parameetrite kujul, et neid saaks kasutada tagasikutsumise funktsioonis.
Moodulite laadimine
Näide: Kui peamooduli (main.js) sõltuv moodul on ['jquery', 'crypto-js', 'anything']
Laadimine vaikimisi
Kui nende kolme sõltuva mooduli failid on jquery.js, crypto-js.js, anything.js ja main.js samas kataloogis, saab need automaatselt laadida vastavalt eelmisele jaotisele
Config load require.config()
require.config() kirjutatakse peamooduli (main.js) peaosas.
Kuidas AMD mooduleid kirjutatakse
require.js laaditud moodul, kasutades AMD spetsifikatsiooni. See tähendab, et moodul peab olema kirjutatud vastavalt AMD regulatsioonidele.
Täpsemalt peavad moodulid olema määratletud kindla define() funktsiooniga. Kui moodul ei sõltu teistest moodulitest, saab selle define() funktsioonis otse define()
Oletame, et nüüd on olemas math.js fail, mis määratleb matemaatikamooduli. Siis math.js kirjutada:
Siin on, kuidas laadida:
Kui moodul sõltub ka teistest moodulitest, peab define() funktsiooni esimene argument olema massiivi, mis näitab mooduli sõltuvusi.
Kui require() funktsioon laadib ülaltoodud mooduli, laadib ta esmalt myLib.js faili.
Laadi mitte-AMD mooduleid
Turul on palju mooduleid, mis ei vasta AMD spetsifikatsioonile, require.js saab laadida
Enne kui need moodulid saavad laadida, tuleb need seada require.config(), et määratleda mõned nende omadused
Näiteks noamd.js ja noamddeps.js mõlemad moodulid on mitte-AMD moodulid ning kui tahad neid laadida, pead nende omadused määratlema:
require.js aktsepteerib konfiguratsiooniobjekti, millel lisaks teede omadusele on ka shim-omadus mitte-AMD moodulite konfigureerimiseks.
Täpsemalt määratleb iga moodul:
- ekspordi väärtus (väljundmuutuja nimi): näitab mooduli nime, kui seda kutsutakse väljastpoolt
- DEPS massiivi: näitab selle mooduli sõltuvusi
Näiteks jQuery pluginat saab defineerida järgmiselt:
require.js plugin
require.js pakub ka mitmesuguseid pluginaid, mis rakendavad mõningaid erifunktsioone
domready plugin võimaldab tagasikutsumise funktsiooni käivitada pärast lehe DOM-struktuuri laadimist:
teksti- ja pildipluginad, mis võimaldavad require.js laadida teksti- ja pildifaile:
Sarnased pluginad on JSON ja MDOWN JSON ja Markdowni failide laadimiseks.
|
Postitatud 11.10.2017 09:31:50
|
|
|
