Share
L'utilità JavaScript più potente e sottoutilizzata è la stessa: Dojo Toolkit. Mentre quasi ogni framework o toolkit JavaScript promette di fare tutto il necessario, Dojo Toolkit rende il caso più convincente che questa affermazione sia vera. Questo post coprirà molte delle più potenti funzionalità del Dojo Toolkit, e così facendo spiegherò perché dovresti usare Dojo Toolkit per il tuo prossimo progetto.
Non iniziare il prossimo progetto senza verificare tutte le funzionalità che Dojo ha da offrire!
Poiché il codice JavaScript del nostro client cresce di dimensioni, e lo farà, la modularità sarà la chiave per mantenere le nostre applicazioni veloci, manutenibili e performanti. I giorni di utilizzo di un file di libreria di grumi senza caricamento asincrono sono terminati. Per anni, il codice del Dojo Toolkit è stato l'esempio brillante di modularità, usando dojo.require (prima delle build) per caricare dinamicamente solo le risorse richieste dalla pagina. Il metodo predefinito di caricamento delle risorse JavaScript era in modo sincrono, sebbene esistesse un'opzione tra domini che fosse asincrona.
Da allora Dojo si è spostato su un caricatore asincrono, scritto da Rawld Gill, che carica magistralmente tutte le risorse in modo asincrono, migliorando notevolmente la velocità. Per caricare alcune risorse JavaScript, puoi codificare qualcosa come la seguente:
// La funzione require richiede al caricatore di tentare di caricare risorse nel primo array // Se le risorse sono già state caricate, i loro oggetti memorizzati nella cache verranno utilizzati require (// Un array di moduli per caricare ["dojo / on", "dojo / touch", "dijit / form / Button", "dojo / domReady!"], // Una funzione di callback con oggetti modulo caricati come argomenti // Deve essere aggiunta nello stesso ordine in cui sono stati caricati function (on, touch, Button) // Ora fai qualcosa con i componenti che abbiamo caricato!);
Per dichiarare un modulo, è sufficiente codificare il seguente modello:
// Usare 'define' invece di 'require' perché stiamo definendo un modulo define (// Ancora una matrice di dipendenze del modulo per il modulo che vorremmo costruire ["dojo / aspect", "dojo / _base / dichiarare "," dijit / layout / BorderContainer "] // Ancora, una funzione di callback che dovrebbe restituire una funzione oggetto (aspetto, dichiarazione, BorderContainer) // Restituire un modulo (oggetto, funzione o classe dichiarata Dojo) return declare ( "mynamespace.layout.CustomBorderContainer", [BorderContainer], // Attributi e metodi personalizzati qui);)
Questo semplice definire metodo, utilizzato da quasi tutti i caricatori AMD, è incredibilmente semplice e strutturato. molto simile a un blocco richiede, quindi è molto facile da usare. Gli elementi elencati nell'array delle dipendenze vengono caricati prima dell'esecuzione del callback. Il callback (di solito) restituisce una funzione o un oggetto che rappresenta il modulo. Un modello facile che carica velocemente, mantiene la modularità e consente agli sviluppatori di caricare solo ciò di cui hanno bisogno!
Il caricatore ricco di funzioni di Dojo fornisce anche plugin, come domReady, per l'ascolto della disponibilità del DOM e il rilevamento delle funzioni con hasJ. Il caricatore è anche abbastanza intelligente per caricare in modo condizionale i moduli in base all'ambiente o alla configurazione:
// Questo codice è presente nel dojo / Deferred module define (["./has", "./_base/lang", "./errors/CancelError", "./promise/Promise", "./has! config-deferredInstrumentation? ./ promise / instrumentation "], function (has, lang, CancelError, Promise, instrumentation) // ...);
Dojo non è solo modulare come può essere, ma fornisce un caricatore integrato per te!
Accentsconagua
dojo / declare Mentre JavaScript non fornisce un vero sistema di classe, Dojo Toolkit fornisce un modello di ereditarietà simile a una classe dojo / declare. Declare viene utilizzato in tutto il framework in modo che gli sviluppatori possano:
Il sistema di classi di Dojo utilizza l'ereditarietà prototipale, consentendo di ereditare i prototipi e quindi le classi per bambini possono essere potenti quanto i genitori a causa del prototipo condiviso. utilizzando dojo / declare è incredibilmente facile:
// Ovviamente abbiamo bisogno di usare define per creare il modulo define ([// Load dojo / dichiarare dependency "dojo / declare", // Carica anche le dipendenze della classe che intendiamo creare "dijit / form / Button", " dojo / on "," mynamespace / _MyButtonMixin "// I mixin iniziano con" _ "], function (declare, Button, on, _MyButtonMixin) // Restituisce un prodotto declare (), ovvero una dichiarazione di ritorno di classe (// Primo argomento è il nome del widget, se ne stai creando uno // Deve essere nel formato di sintassi dell'oggetto "mynamespace.CustomButton", // Il secondo argomento è un singolo oggetto il cui prototipo verrà utilizzato come base per la nuova classe // Un array può anche essere usato, per ereditarietà multipla [Button, _MyButtonMixin], // Infine, un oggetto che contiene nuove proprietà e metodi, o // diversi valori per proprietà e metodi ereditati myCustomProperty: true, value: "Hello!", myCustomMethod : function () // Fai cose qui!, methodThatOverridesParent: function (val) this.myCustomMethod (val); // Calling "this.inherited (argomenti)" esegue il metodo genitore // dello stesso, passando gli stessi parametri restituisce this.inherited (argomenti); ); );
Mentre la classe di cui sopra non si prefigge di svolgere un compito reale (è semplicemente un esempio), illustra il riutilizzo del codice, attraverso la catena di ereditarietà e i mixin; mostra anche come una classe figlia può chiamare lo stesso metodo della classe genitore per ridurre il codice ripetuto.
Un altro vantaggio nell'usare il sistema di classe di Dojo è quello tutti proprietà e metodi sono personalizzabili - non esiste un oggetto "opzioni" che limiti la quantità di proprietà personalizzabili sulle classi Dojo. Tutto è facilmente modificabile ed esteso durante il processo di creazione della classe.
dojo / _Base / declare dojo / _Base / declare Gli aspetti sono uno dei pezzi più potenti ed essenziali dello sviluppo di applicazioni web avanzate ... e Dojo Toolkit li ha forniti da anni. Invece di attivare la funzionalità dopo un evento utente tradizionale, come clic, mouseover, o keyup, Gli aspetti consentono di attivare la funzione B prima o dopo l'esecuzione della funzione A. Essenzialmente, puoi connettere funzioni a funzioni: geniali!
Attivare una funzione dopo un'altra funzione è simile a:
// after (target, methodName, adviseingFunction, receiveArguments); aspect.after (myObject, "someMethod", function (arg1, arg2) // Esegui funzionalità dopo che la funzione myObject.doSomething si attiva, true);
Garantire che la funzione B scoppi prima la funzione A è altrettanto semplice!
aspect.before (myObject, "someMethod", function (arg1, arg2) // Questa funzione si attiva * prima * l'originale myObject.someMethod fa);
Gli aspetti sono estremamente utili durante la creazione di interfacce utente avanzate con Dijit. L'ascolto di eventi su un singolo widget o classe può innescare una modifica in altri widget, consentendo agli sviluppatori di creare un unico grande widget di controllo tra tanti piccoli:
var auto = questo; aspect.after (this.submitButton, "onClick", function () // Il pulsante di invio è stato cliccato, attiva più funzionalità self.showAjaxSpinner (););
La risorsa aspetto è stata precedentemente trovata con dojo.connect.
dojo / aspetto Documentazione ed esempi dojo / aspetto Non posso approvare abbastanza questa struttura dell'interfaccia utente. Quando dico che non ha eguali, non posso sottolineare quanto intendo. Non c'è niente vicino.
Deferreds sono rappresentazioni basate su oggetti di operazioni asincrone, consentendo agli stati delle operazioni asincrone di passare facilmente da un luogo a un altro. Una delle aggiunte più recenti e importanti di jQuery è stata Deferred. Per coincidenza, il mantra della squadra di Dojo è "Dojo ha fatto". Il Dojo Toolkit include Deferred per diversi anni, che li utilizzano per operazioni AJAX semplici e avanzate, animazioni e altro.
Oltre ad essere in prima linea negli oggetti Deferred, Dojo è stato anche pioniere di diversi metodi di gestione degli I / O al di fuori dello standard XMLHTTPRequest, tra cui un window.name involucro, dojo / io / iframe per il caricamento di file AJAX e altro ancora. Quindi, quando vengono utilizzati oggetti rinviati all'interno di Dojo? Ogni volta che si verifica un'azione asincrona / AJAX! I differimenti vengono restituiti dalle richieste XHR, dojo / io richieste, animazioni e altro!
// Attiva una richiesta AJAX, restituendo il Deferred in risposta var def = xhr.get (url: "/ getSomePage"); // Do lots o 'callbacks def.then (function (result) result.prop =' Qualcosa in più '; return result;). Then (function (resultObjWithProp) // ...). Then (function () // ...);
E poi cosa fa dojo / io / iframeLe API di Google sembrano simili?
require (["dojo / io / iframe"], function (ioIframe) // Invia la richiesta ioIframe.send (modulo: "myform", url: "handler.php", handleAs: "json" // Gestisci il risultato positivo). then (function (data) // Esegui qualcosa // Gestisce il caso di errore, function (err) // Handle Error). then (function () // Altre callback!) );
La bellezza di Dojo con Deferred per ogni operazione AJAX è che, indipendentemente dal metodo, sai sempre che riceverai in cambio un Differito, accelerando lo sviluppo e unificando l'API. Dojo 1.8 vedrà l'introduzione di dojo / richiesta, un nuovo consolidamento dei metodi AJAX. Ecco alcuni esempi di come dojo / richiesta L'API verrà utilizzata in futuro:
// Le richieste più basilari di AJAX richiedono (["dojo / request"], function (request) request ("request.html"). Then (function (response) // fa qualcosa con i risultati, function (err ) // gestisce una condizione di errore, function (evt) // gestisce un evento progress;); Un'API unificata rende lo sviluppo più veloce e il codice più compatto; il nuovo dojo / richiesta modulo di Bryan Forbes promette di rendere Dojo ancora più amichevole per gli sviluppatori!
Senza dubbio, il vantaggio maggiore del Dojo Toolkit rispetto ad altri framework JavaScript è il framework Dijit UI. Questo impareggiabile insieme di layout, forma e altri strumenti vanta:
Dijit consente anche la creazione di widget dichiarativi e programmatici; la creazione di un widget dichiarativo assomiglia a:
... per cui la creazione del widget JavaScript tradizionale ha il seguente aspetto:
require (["dijit / form / Button"], function (Button) // Crea il pulsante a livello di programmazione var button = new Button (label: 'Click Me!', "myNodeId"););
Ci sono diverse dozzine di widget Dijit forniti all'interno dello spazio dei nomi di dijit, e alcune decine di altri disponibili nel namespace dojox. Il framework Dijit UI non è solo alcuni utili widget dell'interfaccia utente, come qualcosa di simile a jQueryUI; Dijit è un framework UI aziendale pronto per l'uso e testato.
Nei miei due anni in SitePen, ho lavorato quasi esclusivamente con Dijit e la complessità della creazione di widget flessibili, localizzabili e efficienti. Non posso approvare abbastanza questa struttura dell'interfaccia utente. Quando dico che non ha eguali, non posso sottolineare quanto intendo. Non c'è niente vicino.
Come per quasi ogni problema sul web, Dojo ha una soluzione; in questo caso, la risposta di Dojo alle vite mobili all'interno dello spazio dei nomi dojox / mobile. L'eccellente soluzione mobile di Dojo offre:
I widget mobili possono essere creati in modo dichiarativo o programmatico, proprio come i widget Dijit. Le visualizzazioni mobili possono essere elaborate pigramente e lo scambio di idee tra le visualizzazioni è semplice. L'anatomia HTML di una pagina dojox / mobile è abbastanza semplice:
Il tuo nome dell'applicazione
Usando dojox / mobile / deviceTheme, possiamo rilevare il dispositivo dell'utente e applicare il tema appropriato:
// Applicherà la base del tema del dispositivo su UA detection require (["dojox / mobile / deviceTheme"]);
Con il tema del dispositivo in atto, il passaggio successivo richiede i widget utilizzati dalla nostra specifica applicazione mobile, così come ogni altra classe personalizzata che desideriamo:
// Alcuni widget richiedono (["dojox / mobile / ScrollableView", "dojox / mobile / Heading", "dojox / mobile / RoundRectList", "dojox / mobile / TabBar", "dojox / parser"]);
Una volta richieste le risorse JavaScript, è ora di aggiungere in modo dichiarativo una serie di viste e widget che compongono l'applicazione:
tweets
- Tweet qui
menzioni
- Menziona l'articolo tweet qui
impostazioni
Mostrare
- Impostazione dell'articolo qui
Un incredibile vantaggio nell'uso di dojox / mobile è che l'API per la creazione di widget è la stessa di tutte le altre classi Dijit, quindi la velocità di sviluppo è maggiore per coloro che hanno già utilizzato Dijit; per quelli che sono nuovi a Dojo, l'API mobile è ancora incredibilmente facile.
Senza dubbio, il vantaggio maggiore del Dojo Toolkit rispetto ad altri framework JavaScript è il framework Dijit UI.
Le animazioni CSS sono un ottimo strumento di visualizzazione, così come le immagini animate, ma non sono né flessibili né potenti quanto la creazione e manipolazione di grafica vettoriale. Il più popolare strumento di generazione grafica vettoriale lato client è sempre stato Raphael JS, ma la libreria GFX di Dojo è sicuramente più potente. GFX può essere configurato per il rendering di grafica vettoriale in SVG, VML, Silverlight, Canvas e WebGL. GFX fornisce un wrapper utilizzabile per creare ogni forma grafica vettoriale (ellisse, linea, percorso, ecc.) Per la velocità di sviluppo e consente agli sviluppatori di:
La creazione di un semplice set di forme su una tela potrebbe essere simile a:
require (["dojox / gfx", "dojo / domReady"], function (gfx) gfx.renderer = "canvas"; // Crea una superficie GFX // Argomenti: nodo, larghezza, altezza surface = gfx.createSurface ( "surfaceElement", 400, 400); // Crea un cerchio con un colore "blu" set surface.createCircle (cx: 50, cy: 50, rx: 50, r: 25). setFill ("blue") ; // Crate un cerchio con un set hex color surface.createCircle (cx: 300, cy: 300, rx: 50, r: 25). SetFill ("# f00"); // Crea un cerchio con un lineare gradient surface.createRect (x: 180, y: 40, width: 200, height: 100). setFill (type: "linear", x1: 0, y1: 0, // x: 0 => 0, gradiente coerente in orizzontale x2: 0, // y: 0 => 420, variazione gradiente verticale y2: 420, colori: [offset: 0, colore: "# 003b80", offset: 0,5, colore: "# 0072e5" , offset: 1, color: "# 4ea1fc"]); // Crea un cerchio con un gradiente radiale surface.createEllipse (cx: 120, cy: 260, rx: 100, ry: 100). setFill (type: "radial", cx: 150, cy: 200, colors: [offset: 0, color: "# 4ea1fc", offset: 0,5, colore: "# 0072e5", offset: 1, colore: "# 003b80"]); ); 
Un'API che è stata scritta su GFX è la potente libreria dojox / charting di Dojo. La visualizzazione dei dati tramite la creazione di grafici è popolare e per una buona ragione; semplicemente la lettura dei numeri non fornisce, beh, il quadro completo. La libreria dojox / charting consente di:
Un grafico a torta di base può essere creato utilizzando il seguente codice JavaScript Dojo:
Mentre il codice sopra crea un semplice grafico a torta, la libreria dojo / charting di Dojo è capace di molto, molto di più.
SitePen, una società di consulenza JavaScript fondata dal fondatore di Dojo Dylan Schiemann, ha cercato di sostituire i grossi widget Grid di DojoX con un widget di griglia molto veloce, estensibile e modificabile; hanno compiuto quel compito con Dgrid. caratteristiche dgrid:
SitePen ha svolto un lavoro eccezionale documentando ogni componente di dgrid, quindi iniziare a creare le tue griglie ricche di funzionalità sarà incredibilmente facile!
Dojo non è solo modulare come può essere, ma fornisce un caricatore integrato per te!
Il test è importante, se non più importante, dal lato client che dal lato server. Con la gamma di browser disponibili e il numero variabile di funzionalità fornite in ogni versione del browser, i test di interattività lato client sono indispensabili. Il proprio framework di test Dojo Toolkit, soprannominato DOH (Dojo Objective Harness), viene fornito con ogni download di versione Dojo. La scrittura di prova è incredibilmente facile e i test possono essere forniti in diversi formati:
// Dichiara il nome del modulo di test per rendere felice il caricatore di moduli di dojo. dojo.provide ( "my.test.module"); // Registra una suite di test doh.register ("MyTests", [// I test possono essere solo una semplice funzione ... function assertTrueTest () doh.assertTrue (true); doh.assertTrue (1); doh.assertTrue (! False );, // ... o un oggetto con nome, setUp, tearDown e proprietà runTest nome: "thingerTest", setUp: function () this.thingerToTest = new Thinger (); this.thingerToTest.doStuffToInit (); , runTest: function () doh.assertEqual ("blah", this.thingerToTest.blahProp); doh.assertFalse (this.thingerToTest.falseProp); // ..., tearDown: function () , // ...]); Il test sopra è un esempio molto semplice di un test Dojo, ma che dire di una situazione più difficile, cioè azioni asincrone? L'azione asincrona più ovvia è una richiesta AJAX, ma le animazioni e altre azioni basate su Deferred creeranno una situazione del genere. DOH fornisce un metodo incredibilmente semplice per testare azioni asincrone usando oggetti doh.Deferred:
name: "Test dell'interazione differita", timeout: 5000, runTest: function () var deferred = new doh.Deferred (); myWidget.doAjaxAction (). then (deferred.getTestCallback (function () doh.assertTrue (true);); return posticipato;
Nel test di esempio sopra, il getTestCallback la funzione non si attiva fino a quando doAjaxAction è completo e restituisce il successo o il fallimento del test.
I test successivi non vanno avanti fino a quando il doh.Deferred non si risolve o va in timeout, quindi non ci sono problemi di temporizzazione o sovrapposizione. DOH fornisce una suite di test incredibilmente affidabile che gli altri framework lato client semplicemente non forniscono. DOH fornisce anche un robot DOH basato su Java che simula azioni reali con mouse e tastiera per test più precisi e realistici. Se senti Homer Simpson urlare "Woohoo!", Passano tutti i tuoi test; se senti quel temuto "DOH!", i tuoi test falliscono e devi refactoring il tuo codice.
Quando un'applicazione web è pronta per il rilascio, è incredibilmente importante, per ottimizzare il carico e la cache, creare un file o file JavaScript minifigure e stratificati. Ciò riduce le richieste e mantiene il carico del sito il più leggero possibile. Ancora meglio è l'analisi del sistema di costruzione di Dojo definire chiama e li usa per rilevare automaticamente le dipendenze per le build. Per utilizzare il processo di compilazione Dojo, puoi creare quello che viene definito come un profilo di build. I profili di costruzione possono contenere numerosi livelli e possono risultare piuttosto complessi, ma il profilo sottostante è un semplice esempio:
var profile = releaseDir: "/ path / to / releaseDir", basePath: "...", azione: "release", cssOptimize: "commenti", mini: true, ottimizzazione: "closure", layerOptimize: "closure", stripConsole : "all", selectorEngine: "acme", layers: "dojo / dojo": include: ["dojo / dojo", "app / main"], customBase: true, boot: true, resourceTags: amd: function (filename, mid) return /\.js$/.test(filename); ;
Il processo di compilazione di Dojo è estremamente personalizzabile, consentendo allo sviluppatore di personalizzare:
I profili di compilazione vengono eseguiti tramite la riga di comando (recentemente riscritta per NodeJS) e la riga di comando offre una varietà di opzioni per sovrascrivere o integrare le impostazioni all'interno del profilo di build. Alcuni esempi di esecuzione del profilo di build includono:
./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js
Il processo di compilazione Dojo offre un incredibile controllo sui file di generazione generati e completa il processo di ottimizzazione dell'applicazione web. Con CSS e JS ridotti a livelli appropriati e stratificati, l'app di Dojo è pronta per lo spettacolo!
Due librerie DojoX molto importanti sono già state citate sopra, DojoX Mobile e GFX, ma quelle sono solo due delle dozzine di tesori nascosti forniti da Dojo. Quei tesori includono:
Queste sono solo alcune delle decine di gemme all'interno di DojoX. Sfoglia la procedura di Dojo per scoprire altri fantastici strumenti disponibili!
Dojo Toolkit è un toolkit JavaScript onnicomprensivo che fornisce:
Non iniziare il prossimo progetto senza verificare tutte le funzionalità che Dojo ha da offrire! Anche se non hai bisogno di alcune delle funzionalità avanzate elencate sopra ancora, l'utilizzo delle funzionalità di base di Dojo Toolkit (query di elementi, animazioni, richieste XHR) ti permetterà di creare un'applicazione web veloce e ricca di funzionalità senza soffitto!
