RequireJS är ett effektivt sätt att förbättra hastigheten och kvaliteten på din JavaScript-kod, vilket gör det mycket lättare och lättare att underhålla.
I den här artikeln ska jag presentera dig för att kräva JS och hur du kan börja använda den. Vi kommer att gå igenom kräver filer och definiera en modul och till och med kontakta optimering.
I enkla termer require.js är en skriptläsare som låter dig skicka din JavaScript-kod till filer och moduler och hanterar därmed beroendet av varje modell.
För att börja arbeta med RequireJS och dess asynkront moduldefinition (AMD) måste vi först ladda ner det, länka sedan till filen require.js i huvudet på vårt dokument så här:
Du kanske undrar vad den viktigaste attributet är, med hjälp av RequireJS innebär det att när du ringer kräver i huvudet på ditt dokument länkar du också till huvudfilen i din JavaScript-applikation. Datatributet är en länk till huvud JavaScript-fil för din ansökan, i det här fallet main.js. (Observera att RequireJS automatiskt lägger till .js i slutet av filnamnet.)
I denna main.js-fil kommer du att placera konfigurationen för RequireJS, ladda in dina moduler och definiera en basväg för användning vid behov av filer.
KravJS använder en enkel kräver funktion för att ladda i skript, i det här exemplet Kräver JS-laddningar jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});En av de bästa sakerna med RequireJS är att den är extremt läsbar. Om du tittar på det kvarteret ser du att det första kravet tar filen med namnet jquery.js och det övergår en anonym funktion med jQuery's $ som en parameter , när det är klart är du fri att använda all JQuery-kod du vill ha.
Nu brukar du inte ha jQuery-biblioteket i en fil med namnet jquery.js, som med de flesta plugins och ramar, väljer vi normalt att ladda sedan från deras GitHub eller Google CDN, och för det behöver vi konfigurera banorna så att de pekar på rätt ställe:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Det innebär att du kan kräva jQuery via Google och använda det utan problem. (Observera att jag har använt namnet "jquery" i det här exemplet, men du kan kalla det som helst du vill.)
Användning av AMD-mönstret innebär att vår kod kan struktureras i moduler; dessa modeller är bara bitar av kod som gör något i vår ansökan. Du kan placera två rader av kod i en modul eller 100, det beror bara på vad du vill att den modulen ska göra.
För att definiera en modul använder vi kod så här:
define(function () {function add (x,y) {return x + y;}});I det här exemplet har jag skapat en enkel tilläggsfunktion utan beroenden, men om den här funktionen behövde jQuery fungera korrekt skulle definieringsfunktionen vara strukturerad så här:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Med hjälp av denna syntax berättar vi JavaScript för att få jQuery först och kör sedan koden så att jQuery är tillgängligt när det behövs. Vi kan också använda det i moduler som vi har skrivit i JavaScript-filer, det är inte begränsat till ramar eller plugins.
Som du kan se KravJS är ett bra verktyg för att organisera dina filer i moduler och bara laddar vad du behöver. Nackdelen är att för många JavaScript-filer resulterar i dåliga belastningstider, varför KravJS innehåller en Optimizer att samla in data från alla filer och placera den i en enda minimerad fil.
Sammantaget är RequireJS ett av de bästa sätten att organisera och optimera ditt JavaScript för den moderna webben.
Har du använt RequireJS i ett projekt? Har det förbättrat ditt arbetsflöde? Låt oss veta i kommentarerna.