RequireJS is een effectieve manier om de snelheid en kwaliteit van uw JavaScript-code te verbeteren, waardoor deze bovendien leesbaarder en gemakkelijker te onderhouden is.
In dit artikel zal ik u voorstellen aan RequireJS en hoe u het kunt gaan gebruiken. We zullen bestanden doornemen en een module definiëren en zelfs de optimalisatie aanraken.
In eenvoudige termen is require.js een script-lader waarmee u uw JavaScript-code in bestanden en modules kunt invoegen en zo de afhankelijkheden van elk model kunt beheren.
Om te beginnen te werken met RequireJS en zijn Asynchronous Module Definition (AMD) moeten we eerst downloaden het, link dan als volgt naar het require.js-bestand in de kop van ons document:
U vraagt zich misschien af wat dat data- hoofdattribuut is, goed gebruik van RequireJS betekent dat wanneer u het vereiste in de kop van uw document oproept dat u ook naar het hoofdbestand van uw JavaScript-applicatie linkt, het data- hoofdattribuut een link naar de JavaScript-hoofdbestand voor uw toepassing, in dit geval main.js. (Merk op dat RequireJS automatisch de .js aan het einde van de bestandsnaam toevoegt.)
In dit main.js-bestand plaatst u de configuratie voor RequireJS, laadt u uw modules in en definieert u een basispad voor gebruik wanneer u bestanden nodig hebt.
RequireJS gebruikt een eenvoudige functie om scripts te laden, in dit voorbeeld laadt RequireJS jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Een van de beste dingen van RequireJS is dat het extreem leesbaar is. Als je naar dat codeblok kijkt, zie je eerst dat je het bestand met de naam jquery.js moet pakken en het geeft een anonieme functie door met jQuery's $ als parameter , wanneer dat is gebeurd, bent u vrij om alle JQuery-code te gebruiken die u wilt.
U zou normaal gesproken de jQuery-bibliotheek niet hebben in een bestand met de naam jquery.js, zoals bij de meeste plug-ins en frameworks, we kiezen er gewoonlijk voor om dan vanuit hun GitHub of de Google CDN te laden, en daarvoor moeten we de paden zo configureren dat ze naar de juiste plek wijzen:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Dit betekent dat u jQuery via Google kunt gebruiken en het probleemloos kunt gebruiken. (Merk op dat ik de naam "jQuery" in dit voorbeeld heb gebruikt, maar je zou het kunnen noemen wat je maar wilt.)
Het gebruik van het AMD-patroon betekent dat onze code in modules kan worden gestructureerd; deze modellen zijn slechts stukjes code die iets in onze applicatie doen. Je kunt twee regels code in een module of 100 plaatsen, het hangt er maar net vanaf wat je met die module wilt doen.
Om een module te definiëren gebruiken we code zoals deze:
define(function () {function add (x,y) {return x + y;}});In dit voorbeeld heb ik een eenvoudige toevoegfunctie gemaakt zonder afhankelijkheden, maar als deze functie jQuery nodig had om correct te werken, zou de definitiefunctie als volgt gestructureerd zijn:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Met behulp van deze syntaxis vertellen we JavaScript om eerst jQuery te krijgen en vervolgens de code uit te voeren zodat jQuery beschikbaar is wanneer dat nodig is. We kunnen dit ook gebruiken in modules die we in JavaScript-bestanden hebben geschreven, het is niet beperkt tot frameworks of plug-ins.
Zoals je ziet is RequireJS een geweldig hulpmiddel om je bestanden in modules te organiseren en alleen te laden wat je nodig hebt. Het nadeel is dat te veel JavaScript-bestanden leiden tot slechte laadtijden, daarom bevat RequireJS een optimizer om de gegevens van alle bestanden te verzamelen en in een enkel geminimaliseerd bestand te plaatsen.
Al met al is RequireJS een van de beste manieren om uw JavaScript voor het moderne web te organiseren en te optimaliseren.
Heb je RequireJS in een project gebruikt? Heeft het uw workflow verbeterd? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, vakken afbeelding via Shutterstock.