RequireJS er en effektiv måte å forbedre hastigheten og kvaliteten til JavaScript-koden din, og gjør den mye mer lesbar og lettere å vedlikeholde.
I denne artikkelen vil jeg introdusere deg for å kreve JS og hvordan du kan begynne å bruke den. Vi vil gå gjennom å kreve filer og definere en modul og til og med berøre optimalisering.
På enkle vilkår krever .js en skriptlaster som lar deg slippe JavaScript-koden i filer og moduler og dermed administrere avhengighetene til hver modell.
For å begynne å jobbe med RequireJS og dets asynkrone moduldefinisjon (AMD) må vi først nedlasting det, så lenke til require.js filen i hodet til dokumentet vårt slik som:
Du lurer kanskje på hva den datahovedattributtet er, og ved å bruke RequireJS, betyr det at når du ringer krever i dokumentets hode, kobler du også til hovedfilen til JavaScript-applikasjonen. Datamaskinens hovedattributt er en lenke til hoved JavaScript-fil for søknaden din, i dette tilfellet main.js. (Merk at KravJS legger automatisk til .js på slutten av filnavnet.)
I denne main.js-filen vil du plassere konfigurasjonen for RequireJS, laste inn modulene dine og definere en grunnbane for bruk når du krever filer.
KravJS bruker en enkel krever funksjon for å laste inn skript, i dette eksemplet Krev JS-laster jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});En av de beste tingene med RequireJS er at det er ekstremt lesbart. Hvis du ser på den koden, ser du at den første krever filen med navnet jquery.js, og det overfører en anonym funksjon med jQuery's $ som en parameter , når det er gjort, er du fri til å bruke all JQuery-koden du ønsker.
Nå ville du normalt ikke ha jQuery-biblioteket i en fil med navnet jquery.js, som med de fleste plugins og rammer, velger vi vanligvis å laste inn fra deres GitHub eller Google CDN, og for det må vi konfigurere stiene slik at de peker til riktig sted:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Dette betyr at du kan kreve jQuery via Google og bruke det uten et problem. (Merk at jeg har brukt navnet "jquery" i dette eksemplet, men du kan kalle det alt du liker.)
Bruke AMD-mønsteret betyr at vår kode kan struktureres i moduler; Disse modellene er bare koden med kode som gjør noe i vår søknad. Du kan plassere to linjer med kode i en modul eller 100, det avhenger bare av hva du vil at modulen skal gjøre.
For å definere en modul bruker vi kode slik:
define(function () {function add (x,y) {return x + y;}});I dette eksemplet har jeg opprettet en enkel tilleggsfunksjon uten avhengigheter, men hvis denne funksjonen trengte jQuery å fungere skikkelig, ville defineringsfunksjonen være strukturert slik:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Ved hjelp av denne syntaksen forteller vi JavaScript for å få jQuery først, og kjør koden slik at jQuery er tilgjengelig når det trengs. Vi kan også bruke dette i moduler vi har skrevet i JavaScript-filer, det er ikke begrenset til rammer eller plugins.
Som du kan se KravJS er et flott verktøy for å organisere filene dine i moduler og bare laster inn det du trenger. Ulempen er at for mange JavaScript-filer resulterer i dårlige belastningstider, og derfor krever KJ inkluderer en optimizer å samle dataene fra alle filene og plassere den i en enkelt minimalisert fil.
Alt i alt er RequireJS en av de beste måtene å organisere og optimalisere JavaScript for det moderne web.
Har du brukt RequireJS i et prosjekt? Har det forbedret arbeidsflyten din? Gi oss beskjed i kommentarene.