Essential JavaScript: de fem beste skriptlasterne

Forfatter: Peter Berry

Opprettelsesdato: 14 Juli 2021

Oppdater Dato: 13 Kan 2024

Essential JavaScript: de fem beste skriptlasterne - Kreativ

Innhold

Hvordan manuslastere fungerer generelt
01. HeadJS
02. KrevJS
03. yepnope.js
04. LABjs
05. LazyLoad
06. Konklusjon
Likte dette? Les disse!

Dette er den første i en serie vanlige artikler som vil undersøke ressurser i en rekke kategorier, inkludert front-end-rammer som Backbone.js, malmotorer som Handlebars.js og en rekke andre. Antall JavaScript-ressurser vokser hver dag, noe som er bra for utviklere, men ofte kan det bli forvirrende eller overveldende å velge hvilken som passer best for situasjonen. Ofte er det ingen definitive løsning, og forhåpentligvis vil denne serien gi informasjon og tilfeller der spesielle løsninger er best.

Hvordan manuslastere fungerer generelt

Teorien er at skriptlastere, når de lastes inn i flere skript ved hjelp av skript> koder, blokkerer sidelastingen; en side kan bare gjengi seg selv når alle JS-skriptene er lastet inn. Dette kan delvis negeres ved å minifisere alle skriptene dine i en fil, men likevel vil det fortsatt blokkere gjengivelse av sider. Derfor tilbyr skriptlastere som kan lastes inn i skript både asynkront og parallelt (flere filer samtidig) en klar fordel. Selv om du kombinerer og minifiserer JS til en fil, vil det ofte bedre å inkludere det gjennom en skriptlaster enn å inkludere det tradisjonelt gjennom et skript> -tag.

De fleste skriptlastere følger et veldig lignende mønster i bruken. Det første trinnet er å sende inn filnavn som skal lastes inn:

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

Fordi manusene lastes asynkront, kan du ikke bare kjøre noen kode som er avhengig av disse manusene når du vil. Vanligvis inkluderer vi kode enn avhengig av skriptene våre under skriptet> koder som laster inn de nødvendige bibliotekene; når du laster asynkront, vil dette ikke fungere, siden du ikke kan garantere at avhengighetene dine blir lastet når koden din blir kjørt. Løsningen alle skriptlastere gir er en metode som vil bli påkalt når skriptene er lastet inn. Disse aksepterer en funksjon som vil kjøres når alle skript er lastet inn.

genericScriptLoader.ready (funksjon () {
// koden din kommer hit
});

Nå har vi dekket det grunnleggende om en generisk manuell laster, la oss se på fem jeg har plukket ut og fordeler og ulemper med hver.

01. HeadJS

Den første er HeadJS, opprettet av Tero Piirainen. HeadJS var en av de mest populære skriptlasterne, men har ikke blitt oppdatert de siste månedene, med den siste forpliktelsen på Github-depotet for ti måneder siden. Til tross for dette er det fortsatt en utmerket manusmaskin som er verdt å undersøke. Grunnleggende bruk av HeadJS er veldig rett frem:

head.js ("jquery.js", "app.js", "twitter.js", funksjon () {
// ringes når alle skriptene er lastet inn
});

Hvis du helst ikke vil sende koden inn som tilbakeringing til lastefunksjonen, kan du bruke den head.js () for å laste inn filene og deretter sende inn koden til hodet. klar:

head.js ("jquery.js", "app.js");
head.ready (funksjon () {
// ringes når alle skriptene er lastet inn
});

En av de beste funksjonene i HeadJS er muligheten til å merke skriptene dine, og kjøre kode når enkelte har lastet inn. La oss for eksempel si at du laster inn i to skript, jQuery og Google Analytics, men koden din er bare avhengig av jQuery, så du vil utføre den så snart jQuery er lastet inn. HeadJS tilbyr en veldig fin måte å gjøre dette på:

head.js ({jQuery: "sti / til / jquery.js"},
{gAnalytics: "path / to / analytics.js"};

head.ready ("jQuery", funksjon () {
// kode som er avhengig av jQuery, men ikke analytics.js
});

Hvis du ikke vil merke filene, kan du sende dem inn head.ready () filnavnet og det oppnår det samme:

head.js ("bane / til / jquery.js", "bane / til / analytics.js");

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

02. KrevJS

Neste gang er det på tide å ta en titt på RequireJS. RequireJS fungerer litt annerledes enn HeadJS og andre lastere. Det første du må gjøre er å inkludere RequireJS-kilden, men også angi data-hovedattributtet på skriptet> taggen som forteller RequireJS banen til din viktigste JavaScript-fil. For eksempel:

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

Det antar at den viktigste JS-filen din har tittelen "app.js" og er i samme katalog som filen som skriptet> er i. Hvis JS-en din var i en underkatalog med "skript>", vil du gi RequireJS denne banen:

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

Legg merke til hvordan du ikke trenger å legge til ".js" på slutten av det, RequireJS har det dekket for deg.

Nå, i hovedfilen (i mitt tilfelle app.js) kan vi laste inn skript ved å bruke krever () funksjon. De krever () funksjonen tar to argumenter, manusene som skal lastes inn og funksjonen som skal utføres når disse manusene er lastet inn. Husk at skriptbanene er relative til banen til app.js:

krever ([’lib / jquery’], funksjon () {
// kode som skal utføres når jQuery lastes inn
});

Det er grunnleggende bruk av RequireJS, men det er faktisk i stand til mye mer. RequireJS implementerer AMD-spesifikasjonen (asynchronous module definition), som er en metode for å definere moduler som kan lastes inn. Du skriver all koden din som moduler, hovedsakelig gjennom RequireJS’er definere() funksjon.Dette er en flott tilnærming når du har et stort program med flere skript, alt avhengig av visse andre. Selv om dette er altfor mye å gå inn på i denne artikkelen (jeg kan skrive flere artikler utelukkende på RequireJS), har Jim Hoskins skrevet et flott innlegg om å lage og bruke dine egne moduler med RequireJS som jeg anbefaler.

03. yepnope.js

yepnope.js er en skriptlaster med et litt annet mål enn HeadJS eller RequireJS. yepnope er designet for å være en ressurslaster som kan lastes inn i skript betinget, basert på alle utsagn du kan evaluere til sant eller usant. Den er designet for lasting i flerfyll. Hvor ofte har du måttet skrive litt ekstra JS fordi nettleseren ikke støtter noe? Det er noe som skjer ganske ofte, spesielt hvis du bruker helt nye API-er og funksjoner som ikke alle nettlesere har implementert ennå. Det passer perfekt med et funksjonsdeteksjonsbibliotek som Modernizr - så mye at Modernizr-kilden faktisk inneholder yepnope i den.

Å bruke yepnope er enkelt. Vi bruker yepnope () funksjon, passerer inn et objekt som ser omtrent slik ut:

yepnope ({
test: Modernizr. plassholder,
nope: "placeholder-polyfill.js"
});

Her legger jeg inn en polyfyll for HTML5-plassholderattributter hvis den ikke støttes naturlig. Selvfølgelig er vi ikke begrenset til bare Modernizr-tester. Hva om vi legger til en klasse i html> tag av ".ie" hvis nettleseren er IE8 eller mindre, og vil laste inn filer basert på det?

yepnope ({
test: $ ("html"). hasClass ("ie"),
yep: "ie-fixes.js",
nope: "non-ie.js"
});

Det er også enkelt å laste inn et skript uten betinget gjennom "last" og også utføre en test som er avhengig av dette skriptet:

yepnope ({
last: [’path / to / jquery.js’, ‘app.js’],
komplett: funksjon () {
$ (funksjon () {
yepnope ({
test: $ ("html"). hasClass ("ie"),
yep: "ie-fixes.js",
nope: "non-ie.js",
});
});
});
});

Det er verdt å merke seg at yepnope ikke nødvendigvis er den raskeste skriptlasteren, det er ikke målet, men det tilbyr betinget lasting som ikke kan matches av noen annen ressurs der ute.

04. LABjs

Vår nest siste tilbud i denne artikkelen er LABjs, skrevet av Kyle Simpson. Den er designet for å være en JavaScript-laster for alle formål som laster skript effektivt og raskt. Syntaksen er forskjellig fra andre som er omtalt i denne artikkelen, men det er fortsatt lett å forstå og bruke.

La oss for eksempel si at vi har jQuery og et plugin å laste inn. Med LABjs vil vi gjøre det slik:

$ LAB.script ("path / to / jquery.js"). Vent () .script ("path / to / plugin.js")

I stedet for å sende inn en rekke filer, kaller vi .manus() for hver fil vi vil laste inn. LABjs betyr også avhengigheter annerledes. Her .vente() betyr å vente på at jQuery skal lastes, før du legger i pluginet. Dette betyr at du kan være trygg på at jQuery lastes inn før plugin er. Hvis du vil kjøre litt kode når alt er lastet, send en funksjon til vente():

$ LAB.script ("path / to / jquery.js"). Vent () .script ("path / to / plugin.js"). Vent (funksjon () {// kode for å kjøre når begge filene er lastet} );

Du kan lese mer om bruk av LABjs i dokumentasjonen. Det er imidlertid viktig å merke seg at mens jeg skrev denne artikkelen, ble det kunngjort at det ikke vil være mer utvikling på LABjs. Selv om dette er synd, forblir det en pålitelig skriptlaster (og koden er også på Github hvis du vil vedlikeholde den eller fikse feil), og jeg følte det verdt å inkludere i denne artikkelen.

05. LazyLoad

Sist, men på ingen måte minst, vil jeg ta en titt på LazyLoad, av Ryan Grove. LazyLoad satser på å gjøre en ting og en ting godt. Det er den minste av alle lastere jeg har vist deg (mindre enn 1 KB minifisert) og er bevisst skrevet for å være liten og enkel å bruke, for lasting i CSS og JavaScript. Funksjonaliteten er mindre enn noen andre løsninger, men det er å forvente. Det er enkelt å bruke for innlasting i en eller flere filer:

LazyLoad.js ("jquery.js", funksjon () {// jQuery lastet}); LazyLoad.js (["jquery.js", "plugin.js"], funksjon () {// flere filer alle lastet});

LazyLoad laster filer parallelt, ikke i rekkefølge, så når du trenger å laste inn et skript, men bare en gang en annen har, er den beste tilnærmingen:

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

Funksjonaliteten er veldig lik for lasting i CSS, men det gjøres gjennom .css () funksjon.

06. Konklusjon

Jeg håper denne artikkelen har tjent til å demonstrere noen populære biblioteker og hvordan de best kan brukes. Ulike biblioteker gjør forskjellige ting bedre, og du bør alltid se etter å velge det beste for situasjonen. Personlig, noe mer enn et par enkle skript, pleier jeg å se mot RequireJS, som er full av funksjonalitet. Hvis jeg jobber med polyfills, er det yepnope hver gang, og for noe enkelt går jeg vanligvis for HeadJS. Imidlertid er det ikke å si at valgene passer deg, så jeg oppfordrer deg til å prøve så mange du kan for å få god kunnskap om dem og være i stand til å plukke ut den beste for situasjonen.

Jack Franklin er en 20 år gammel utvikler som bor i London, Storbritannia. Han driver en JavaScript-blogg på javascriptplayground.com og skriver også PHP, Ruby og andre språk. Han tweets som @Jack_Franklin.