RequireJS er en effektiv måde at forbedre hastigheden og kvaliteten af din JavaScript-kode og gør det meget mere læselig og lettere at vedligeholde.
I denne artikel vil jeg introducere dig til RequireJS og hvordan du kan begynde at bruge den. Vi vil gå igennem kræver filer og definere et modul og endda berøre optimering.
På simple vilkår require.js er en script loader, der giver dig mulighed for at glide JavaScript-koden i filer og moduler og dermed styre afhængigheden af hver model.
For at begynde at arbejde med RequireJS og dets asynkrone moduldefinition (AMD) skal vi først Hent det, så link til requirements.js filen i hovedet af vores dokument som sådan:
Du kan undre sig over, hvad denne data-hovedattribut er, og ved hjælp af RequireJS betyder, at når du kalder krav i hovedet på dit dokument, linker du også til hovedfilen til din JavaScript-applikation. Datastyret attribut er et link til vigtigste JavaScript-fil til din ansøgning, i dette tilfælde main.js. (Bemærk at RequireJS automatisk tilføjer .js i slutningen af filnavnet.)
I denne main.js-fil vil du placere konfigurationen for RequireJS, indlæse dine moduler og definere en basisvej til brug, når du kræver filer.
KravJS bruger en simpel krævesfunktion til at indlæse i scripts, i dette eksempel Krav JS belastninger jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});En af de bedste ting om RequireJS er, at det er ekstremt læsbart. Hvis du ser på den pågældende blok kode, vil du se, at den første kræver at tage filen med navnet jquery.js, og den overfører en anonym funktion med jQuery's $ som en parameter , når det er gjort, er du fri til at bruge hele JQuery-koden, du har lyst til.
Nu har du normalt ikke jQuery-biblioteket i en fil ved navn jquery.js, som med de fleste plugins og rammer, vælger vi normalt at indlæse dem fra deres GitHub eller Google CDN, og derfor skal vi konfigurere stierne så at de peger på det rigtige sted:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Det betyder, at du kan bruge jQuery via Google og bruge det uden problemer. (Bemærk, at jeg har brugt navnet "jquery" i dette eksempel, men du kan kalde det, hvad du vil.)
Brug af AMD-mønsteret betyder, at vores kode kan struktureres i moduler; Disse modeller er kun kodenheder, der gør noget i vores ansøgning. Du kan placere to linjer kode i et modul eller 100, det afhænger kun af, hvad du vil have, at modulet skal gøre.
For at definere et modul bruger vi kode som denne:
define(function () {function add (x,y) {return x + y;}});I dette eksempel har jeg oprettet en simpel tilføjelsesfunktion uden afhængigheder, men hvis denne funktion skulle bruge jQuery til at fungere korrekt, ville definitionsfunktionen være struktureret som denne:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Ved hjælp af denne syntaks fortæller vi JavaScript for at få jQuery først, og kør koden, så jQuery er tilgængelig, når det er nødvendigt. Vi kan også bruge dette i moduler, vi har skrevet i JavaScript-filer, det er ikke begrænset til rammer eller plugins.
Som du kan se RequireJS er et godt værktøj til at organisere dine filer i moduler og kun indlæse det, du har brug for. Ulempen er, at for mange JavaScript-filer resulterer i dårlige belastningstider, hvilket er grunden til, at RequireJS inkluderer en optimizer at indsamle data fra alle filerne og placere den i en enkelt minimeret fil.
Alt i alt er RequireJS en af de bedste måder at organisere og optimere dit JavaScript på for det moderne web.
Har du brugt RequireJS i et projekt? Har det forbedret din arbejdsgang? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, bokse billede via Shutterstock.