JavaScript esențial: primele cinci încărcătoare de scripturi

Autor: Peter Berry

Data Creației: 14 Iulie 2021

Data Actualizării: 11 Mai 2024

Conţinut

Cum funcționează încărcătoarele de scripturi în general
01. HeadJS
02. SolicitațiJS
03. yepnope.js
04. LABjs
05. LazyLoad
06. Concluzie
I-a plăcut asta? Citiți acestea!

Acesta este primul dintr-o serie de articole obișnuite care vor examina resursele dintr-o serie de categorii, inclusiv cadre frontale precum Backbone.js, motoare de tipare precum Handlebars.js și multe altele. Numărul de resurse JavaScript crește în fiecare zi, ceea ce este excelent pentru dezvoltatori, dar de multe ori poate deveni confuz sau copleșitor să alegi care dintre ele se potrivește cel mai bine situației în mână. De multe ori nu există o soluție definitivă și sperăm că această serie va oferi informații și cazuri în care soluțiile particulare sunt cele mai bune.

Cum funcționează încărcătoarele de scripturi în general

Teoria este că încărcătoarele de scripturi, atunci când se încarcă în mai multe scripturi prin utilizarea de scripturi> tag-uri, blochează încărcarea paginii; o pagină se poate reda singură odată ce toate scripturile JS au fost încărcate. Acest lucru poate fi parțial negat prin reducerea tuturor scripturilor într-un singur fișier, dar chiar și așa, va bloca în continuare redarea paginii. Prin urmare, încărcătoarele de scripturi care se pot încărca în scripturi atât asincron, cât și în paralel (mai multe fișiere concomitente) oferă un avantaj distinct. Chiar dacă combinați și reduceți JS-ul într-un singur fișier, includerea acestuia printr-un încărcător de scripturi va avea adesea o performanță mai bună decât includerea tradițională printr-o etichetă script>.

Majoritatea încărcătorilor de scripturi urmează un model foarte similar în utilizarea lor. Primul pas este să treceți în numele fișierelor pentru a fi încărcate:

genericScriptLoader.load ("jquery.js", "underscore.js");

Deoarece scripturile sunt încărcate asincron, nu puteți rula pur și simplu niciun cod care se bazează pe aceste scripturi atunci când doriți. De obicei, includem cod decât depinde de scripturile noastre de sub scriptul> etichete care încarcă bibliotecile necesare; când încărcați în mod asincron, acest lucru nu va funcționa, deoarece nu puteți garanta că dependențele dvs. vor fi încărcate la executarea codului. Soluția pe care o oferă toate încărcătoarele de scripturi este o metodă care va fi invocată după ce scripturile s-au încărcat. Acestea acceptă o funcție care se va executa la încărcarea tuturor scripturilor.

genericScriptLoader.ready (function () {
// codul tău merge aici
});

Acum am acoperit elementele de bază ale unui încărcător de scripturi generic, să aruncăm o privire la cinci pe care le-am ales și la avantajele și dezavantajele fiecăruia.

01. HeadJS

Primul este HeadJS, creat de Tero Piirainen. HeadJS a fost unul dintre cele mai populare încărcătoare de scripturi, dar nu a fost actualizat în ultimele luni, ultimul commit pe depozitul Github fiind acum zece luni. În ciuda acestui fapt, rămâne un excelent încărcător de scripturi care merită examinat. Utilizarea de bază a HeadJS este foarte simplă:

head.js ("jquery.js", "app.js", "twitter.js", funcție () {
// sunat când toate scripturile au fost încărcate
});

Dacă preferați să nu transmiteți codul ca apel invers către funcția de încărcare, puteți utiliza head.js () pentru a încărca fișierele și apoi pentru a transmite codul la cap.preparat:

head.js ("jquery.js", "app.js");
head.ready (function () {
// sunat când toate scripturile au fost încărcate
});

Una dintre cele mai bune caracteristici ale HeadJS este abilitatea de a vă eticheta scripturile și de a rula codul după ce unele au fost încărcate. De exemplu, să presupunem că încărcați în două scripturi, jQuery și Google Analytics, dar codul dvs. se bazează doar pe jQuery, deci doriți să-l executați imediat ce jQuery este încărcat. HeadJS oferă un mod foarte frumos de a face acest lucru:

head.js ({jQuery: "cale / către / jquery.js"},
{gAnalytics: "cale / către / analytics.js"});

head.ready ("jQuery", funcție () {
// cod care se bazează pe jQuery, dar nu pe analytics.js
});

Dacă nu doriți să etichetați fișierele, puteți transmite head.ready () numele fișierului și obține același lucru:

head.js ("cale / către / jquery.js", "cale / către / analytics.js");

head.ready ("jquery.js", function () {});

02. SolicitațiJS

În continuare, este timpul să aruncăm o privire la RequireJS. RequireJS funcționează ușor diferit de HeadJS și alte încărcătoare. Primul lucru pe care trebuie să-l faceți este să includeți sursa RequireJS, dar să setați și atributul data-main pe script-ul> etichetă care îi spune lui RequireJS calea către fișierul dvs. JavaScript principal. De exemplu:

script data-main = "app" src = "require.js"> / script>

Aceasta presupune că fișierul dvs. principal JS este intitulat „app.js” și se află în același director cu fișierul în care se află scriptul> tag-ul. Dacă JS-ul dvs. se afla într-un subdirector al „scripturilor>”, veți da RequireJS această cale:

script data-main = "scripts / app" src = "require.js"> / script>

Rețineți cum nu trebuie să adăugați „.js” la sfârșitul acestuia, RequireJS are acoperit acest lucru.

Acum, în fișierul principal (în cazul meu, app.js) putem încărca în scripturi folosind require () funcţie. require () funcția preia două argumente, scripturile de încărcat și funcția de executat odată ce aceste scripturi s-au încărcat. Rețineți că căile scriptului sunt relative la calea app.js:

require (['lib / jquery'], function () {
// cod de executat la încărcarea jQuery
});

Aceasta este o utilizare de bază a lui RequireJS, dar este de fapt capabilă de mult mai mult. RequireJS implementează specificația AMD (definirea modulului asincron), care este o metodă pentru definirea modulelor care pot fi încărcate. Vă scrieți tot codul ca module, în principal prin RequireJS’s defini() funcţie.Aceasta este o abordare excelentă atunci când aveți o aplicație mare cu mai multe scripturi, toate depinzând de altele. În timp ce acest lucru este mult prea mult pentru a intra în acest articol (aș putea scrie mai multe articole pur și simplu pe RequireJS), Jim Hoskins a scris o postare excelentă despre crearea și utilizarea propriilor module cu RequireJS pe care le recomand cu drag.

03. yepnope.js

yepnope.js este un încărcător de scripturi cu un obiectiv ușor diferit de HeadJS sau RequireJS. yepnope este conceput pentru a fi un încărcător de resurse care poate fi încărcat în scripturi condiționat, pe baza oricărei afirmații pe care o puteți evalua fie adevărat, fie fals. Este conceput pentru încărcarea în polifenituri. Cât de des a trebuit să scrieți JS suplimentar, deoarece browserul nu acceptă ceva? Este ceva care se întâmplă destul de des, mai ales dacă utilizați API-uri și funcții noi, pe care nu toate browserele le-au implementat încă. Se potrivește perfect cu o bibliotecă de detectare a caracteristicilor precum Modernizr - atât de mult încât sursa Modernizr conține de fapt yepnope în ea.

Utilizarea yepnope este ușoară. Noi folosim yepnope () funcție, trecând într-un obiect care arată cam așa:

yepnope ({
test: Modernizr.placeholder,
nu: „placeholder-polyfill.js”
});

Aici încărc într-un poliamplut pentru atributele de substituent HTML5 dacă nu este acceptat în mod nativ. Desigur, nu ne limităm doar la testele Modernizr. Ce se întâmplă dacă adăugăm o clasă la html> eticheta „.ie” dacă browserul are IE8 sau mai puțin și doriți să încărcați fișiere pe baza acestui lucru?

yepnope ({
test: $ ("html"). hasClass ("ie"),
da: "ie-fixes.js",
nu: „non-ie.js”
});

De asemenea, este ușor să încărcați un script fără condițional prin „încărcare” și, de asemenea, să efectuați un test care se bazează pe acel script:

yepnope ({
încărcare: ['cale / către / jquery.js', 'app.js'],
complete: function () {
$ (function () {
yepnope ({
test: $ ("html"). hasClass ("ie"),
da: "ie-fixes.js",
nu: „non-ie.js”,
});
});
});
});

Este demn de remarcat faptul că yepnope nu este neapărat cel mai rapid încărcător de scripturi, nu acesta este scopul său, dar oferă o încărcare condiționată care nu poate fi egalată de nicio altă resursă.

04. LABjs

Penultima noastră ofertă din acest articol este LABjs, scrisă de Kyle Simpson. Este conceput pentru a fi un încărcător JavaScript pentru toate scopurile, care încarcă scripturile eficient și rapid. Sintaxa sa diferă ușor de celelalte prezentate în acest articol, dar este totuși ușor de înțeles și de utilizat.

De exemplu, să presupunem că avem jQuery și un plugin de încărcat. Cu LABjs am face acest lucru:

$ LAB.script ("cale / către / jquery.js"). Wait () .script ("cale / către / plugin.js")

Mai degrabă decât să trecem într-o serie de fișiere, apelăm .script () pentru fiecare fișier pe care dorim să îl încărcăm. LABjs semnifică, de asemenea, dependențe în mod diferit. Aici .aștepta() înseamnă să aștepți încărcarea jQuery, înainte de încărcare în plugin. Acest lucru înseamnă că puteți avea încredere că jQuery este încărcat înainte ca pluginul să fie încărcat. Dacă doriți să rulați un cod odată ce totul este încărcat, treceți o funcție în aștepta():

$ LAB.script ("cale / către / jquery.js"). Wait () .script ("cale / către / plugin.js") .wait (funcție () {// cod pentru a rula după încărcarea ambelor fișiere} );

Puteți citi mai multe despre utilizarea LABjs în documentație. Cu toate acestea, este important să rețineți că, pe măsură ce scriam acest articol, a fost anunțat că nu va mai exista dezvoltare pe LABjs. Deși este o rușine, rămâne un încărcător de scripturi de încredere (și codul este și pe Github dacă doriți să îl mențineți sau să remediați erorile) și am considerat că merită să fie inclus în acest articol.

05. LazyLoad

Nu în ultimul rând, dar în niciun caz cel puțin, vreau să arunc o privire la LazyLoad, de Ryan Grove. LazyLoad își propune să facă bine un lucru și un lucru. Este cel mai mic dintre toate încărcătoarele pe care vi le-am arătat (mai puțin de 1 KB minimizat) și este scris în mod deliberat pentru a fi mic și simplu de utilizat, pentru încărcare în CSS și JavaScript. Setul de funcționalități este mai mic decât alte soluții, dar este de așteptat. Este ușor de utilizat pentru încărcarea într-unul sau mai multe fișiere:

LazyLoad.js ("jquery.js", function () {// jQuery încărcat}); LazyLoad.js (["jquery.js", "plugin.js"], function () {// mai multe fișiere toate încărcate});

LazyLoad încarcă fișiere în paralel, nu în ordine, așa că atunci când trebuie să încărcați un script, dar numai odată ce altul are, cea mai bună abordare este:

LazyLoad.js ("jquery.js", function () {LazyLoad.js ("plugin.js", function () {// executa plugin});});

Funcționalitatea este foarte similară pentru încărcarea în CSS, dar se face prin .css () funcţie.

06. Concluzie

Sper că acest articol a servit pentru a demonstra câteva biblioteci populare și cum să le folosim cel mai bine. Diferite biblioteci fac lucruri diferite mai bine și ar trebui să căutați întotdeauna să alegeți ce este mai bun pentru situația în cauză. Personal, mai mult decât câteva scripturi simple, tind să mă uit la RequireJS, care este plin de funcționalități. Dacă lucrez cu polifenituri, este de fiecare dată nedumerit și, pentru ceva simplu, de obicei merg pentru HeadJS. Cu toate acestea, asta nu înseamnă că aceste alegeri vi s-ar potrivi, așa că vă încurajez să încercați cât mai multe pentru a le cunoaște bine și pentru a putea alege cea mai bună pentru situația în cauză.

Jack Franklin este un dezvoltator în vârstă de 20 de ani, care locuiește în Londra, Marea Britanie. El conduce un blog JavaScript la javascriptplayground.com și scrie și PHP, Ruby și alte limbi. El trimite pe Twitter ca @Jack_Franklin.