RequireJS è un modo efficace per migliorare la velocità e la qualità del tuo codice JavaScript rendendolo inoltre più leggibile e più facile da mantenere.
In questo articolo ti presenterò RequireJS e come puoi iniziare ad usarlo. Passeremo attraverso la richiesta di file e la definizione di un modulo e persino il tocco sull'ottimizzazione.
In parole povere require.js è un caricatore di script che consente di inserire il codice JavaScript in file e moduli, gestendo in tal modo le dipendenze di ciascun modello.
Per iniziare a lavorare con RequireJS e la sua Asynchronous Module Definition (AMD) dobbiamo prima Scaricare esso, quindi link al file require.js nella testa del nostro documento in questo modo:
Forse ti starai chiedendo quale sia l'attributo data-main , usando bene RequireJS significa che quando chiami require nella parte iniziale del tuo documento stai anche collegando al file principale della tua applicazione JavaScript, l'attributo data-main è un link al il file JavaScript principale per la tua applicazione, in questo caso main.js. (Nota che RequireJS aggiunge automaticamente .js alla fine del nome del file.)
In questo file main.js posizionerai la configurazione per RequireJS, caricerai i tuoi moduli e definirai un percorso di base da usare quando richiedi i file.
RequireJS utilizza una semplice funzione di richiesta per caricare gli script, in questo esempio RequireJS carica jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Una delle cose migliori di RequireJS è che è estremamente leggibile, se guardi quel blocco di codice che vedrai, prima devi richiedere il file con il nome di jquery.js e passa una funzione anonima con $ come parametro , quando ciò è fatto, sei libero di usare tutto il codice JQuery che ti piace.
Ora, normalmente non avresti la libreria jQuery in un file chiamato jquery.js, come con la maggior parte dei plugin e dei framework, di solito decidiamo di caricare poi dal loro GitHub o dal CDN di Google, e per questo dobbiamo configurare i percorsi in modo tale che indicano il posto giusto:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Ciò significa che puoi richiedere jQuery tramite Google e utilizzarlo senza problemi. (Nota che in questo esempio ho usato il nome "jquery", ma puoi chiamarlo come preferisci.)
L'utilizzo del pattern AMD significa che il nostro codice può essere strutturato in moduli; questi modelli sono solo bit di codice che fanno qualcosa nella nostra applicazione. Puoi posizionare due linee di codice in un modulo o 100, dipende solo da cosa vuoi che quel modulo faccia.
Per definire un modulo usiamo un codice come questo:
define(function () {function add (x,y) {return x + y;}});In questo esempio ho creato una semplice funzione di aggiunta senza dipendenze, ma se questa funzione avesse bisogno di jQuery per funzionare correttamente, la funzione define sarebbe strutturata in questo modo:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Usando questa sintassi, diciamo a JavaScript di andare a ottenere jQuery per primo, e quindi di eseguire il codice in modo che jQuery sia disponibile quando necessario. Possiamo anche usarlo nei moduli che abbiamo scritto nei file JavaScript, non è limitato a framework o plug-in.
Come puoi vedere RequireJS è un ottimo strumento per organizzare i tuoi file in moduli e caricare solo ciò di cui hai bisogno. Il lato negativo è che troppi file JavaScript provocano tempi di caricamento scadenti, motivo per cui RequireJS include un ottimizzatore per raccogliere i dati da tutti i file e posizionarli in un unico file minimizzato.
Tutto sommato, RequireJS è uno dei modi migliori per organizzare e ottimizzare il tuo JavaScript per il web moderno.
Hai usato RequireJS in un progetto? Ha migliorato il tuo flusso di lavoro? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di scatole via Shutterstock.