Share
Cea mai puternică și mai puțin folosită utilitate JavaScript este una și aceeași: Dojo Toolkit. În timp ce aproape fiecare cadru JavaScript sau set de instrumente promite să facă tot ce aveți nevoie, Dojo Toolkit face cel mai convingător caz pentru acea afirmație fiind adevărată. Acest post va acoperi multe dintre cele mai puternice caracteristici ale Dojo Toolkit și, în acest sens, va face cazul pentru motivul pentru care ar trebui să utilizați Dojo Toolkit pentru următorul proiect.
Nu începeți proiectul următor fără a verifica toate funcțiile pe care Dojo le oferă!
Pe măsură ce codul nostru JavaScript pentru client crește, dimensiunea acestuia, și va fi, Modularitatea va fi esențială pentru menținerea rapidă a aplicațiilor noastre, pentru întreținere și performanță. Zilele de utilizare a unui fișier bibliotecă forfetară fără încărcare asincronă s-au încheiat. De ani de zile, codul Dojo Toolkit a fost un exemplu strălucitor de modularitate, folosind dojo.require (înainte de a construi) pentru a trage dinamic numai resursele cerute de pagină. Metoda implicită de încărcare a resurselor JavaScript a fost sincronă, deși a existat o opțiune cu domenii multiple, care era asincronă.
Dojo sa mutat de atunci într-un încărcător asincron, scris de Rawld Gill, care încarcă cu mândrie toate resursele în mod asincron, îmbunătățind foarte mult viteza. Pentru a încărca câteva resurse JavaScript, puteți codifica ceva de genul:
Accentsconagua
// Funcția necesită direcționează încărcătorul să încerce să încarce resursele în primul array // Dacă resursele au fost deja încărcate, obiectele lor cache vor fi folosite (// O serie de module care se încarcă ("dojo / on", " "Dojo / touch", "dijit / form / Button", "dojo / domReady!"], // Funcție de apel inversă cu obiecte modul încărcate ca argumente // Trebuie adăugate în aceeași ordine în care au fost încărcate funcția touch, Button) / Acum faceți ceva cu componentele pe care le-am încărcat!); Pentru a declara un modul, codificați pur și simplu următorul model:
// Folosind 'define' in loc de 'require' pentru ca definim un modul defineste (// Din nou, o serie de dependente de module pentru modulul pe care dorim sa-l construim (dojo / aspect, dojo / _base / declare "," dijit / layout / BorderContainer "] // Din nou, o functie inversa care ar trebui sa returneze o functie obiect (aspect, declarare, BorderContainer) // Return un modul (obiect, functie sau clasa declarata Dojo) "mynamespace.layout.CustomBorderContainer", [BorderContainer], // Atribute și metode personalizate aici);)
Acest lucru simplu defini , utilizată de aproape toate încărcătoarele AMD, este incredibil de simplă și structurată. foarte mult ca un bloc de cereri, deci este foarte usor de folosit. Elementele listate în matricea de dependență sunt încărcate înainte ca apelul să fie apelat. Callback-ul (de obicei) returnează o funcție sau obiect reprezentând modulul. Un model ușor care încarcă rapid, menține modularitatea și permite dezvoltatorilor să încarce doar ceea ce au nevoie!
Încărcătorul bogat cu funcții Dojo oferă, de asemenea, plugin-uri, cum ar fi domReady, pentru a asculta disponibilitatea DOM și are detectarea funcțiilor cu hasJS. Încărcătorul este, de asemenea, suficient de inteligent pentru a încărca în mod condiționat module bazate pe mediu sau configurație:
// Acest cod este prezentat în modulul dojo / Modul amânat definește (["./has", "./_base/lang", "./errors/CancelError", "./promise/Promise", "./has! config-deferredInstrumentation? / promise / instrumentation "], funcție (has, lang, CancelError, promisiune, instrumentație) // ...);
Nu numai că este modularul Dojo așa cum se poate, ci vă oferă un încărcător în cuptor!
dojo / vestim În timp ce JavaScript nu oferă un sistem de clasă adevărat, Dojo Toolkit oferă un model de moștenire asemănător clasei folosind dojo / vestim. Declarația este utilizată în întreaga platformă, astfel încât dezvoltatorii să poată:
Sistemul de clasă Dojo folosește moștenirea prototip, permițând prototipurile să fie moștenite și astfel clasele pentru copii pot fi la fel de puternice ca și părinții datorită prototipului comun. Utilizarea dojo / vestim este incredibil de ușor:
// Desigur, trebuie să folosim define pentru a crea modulul define ([// Load dojo / declare dependență "dojo / declare", // De asemenea, încărcați dependențele clasei pe care intenționăm să o creăm "dijit / form / Button" dojo / on "," mynamespace / _MyButtonMixin "// Mixins începe cu" _ "], funcția (declară, Buton, on, _MyButtonMixin) // Return un declare () este numele widget-ului, dacă creați un // Trebuie să fie în formatul sintaxei obiect "mynamespace.CustomButton", // Al doilea argument este un obiect unic al cărui prototip va fi folosit ca bază pentru noua clasă // Un array poate fi folosit și pentru moștenire multiplă [Button, _MyButtonMixin], // În cele din urmă, un obiect care conține proprietăți și metode noi sau // valori diferite pentru proprietățile și metodele moștenite myCustomProperty: true, value: "Hello!", myCustomMethod : function () // Do chestii aici!, methodThatOverridesParent: functie (val) this.myCustomMethod (val); // Apelarea "this.inherited (arguments)" rulează metoda părintelui // a aceluiași lucru, parcurgând aceleași paramuri returnează acest lucru.inherited (argumente); ); );
În timp ce clasa de mai sus nu dorește să îndeplinească o sarcină reală (este pur și simplu un exemplu), ea ilustrează reutilizarea codului, prin intermediul lanțului de mosteniri și a amestecurilor; de asemenea, arată modul în care o clasă copilă poate apela o clasă părinte "aceeași metodă pentru a reduce codul repetat.
Un alt avantaj al utilizării sistemului de clasă Dojo este acela toate proprietățile și metodele sunt personalizabile - nu există niciun obiect "opțiuni" care să limiteze cantitatea de proprietăți personalizabile pe clasele Dojo. Totul este ușor schimbat și extins pe tot parcursul procesului de creare a clasei.
dojo / _base / vestim dojo / _base / vestim Aspecte sunt una dintre cele mai puternice și esențiale piese de dezvoltare avansată a aplicațiilor web ... și Dojo Toolkit le-a furnizat de ani de zile. În loc să declanșeze funcționalitate după un eveniment tradițional de utilizator, cum ar fi clic, mouse-ul peste, sau keyup, aspectele vă permit să declanșați funcția B înainte sau după executarea funcției A. În esență, puteți conecta funcțiile la funcții - genial!
Declanșarea unei funcții după o altă funcție arată astfel:
// dupa ce (target, methodName, adviceFunction, receiveArguments); aspect.after (myObject, "someMethod", funcția (arg1, arg2) // Execută funcționalitatea după ce funcția myObject.doSomething se declanșează, true);
Asigurați-vă că funcția B se declanșează inainte de funcția A este la fel de ușor!
aspect.before (myObject, "someMethod", funcția (arg1, arg2) // Această funcție se declanșează * înainte de * originalul myObject.someMethod face);
Aspectele sunt extrem de utile atunci când creați interfețe avansate cu Dijit. Ascultarea evenimentelor de pe un widget sau de o clasă poate declanșa o schimbare în alte widget-uri, permițând dezvoltatorilor să creeze un widget mare, de control, din multe mici:
var self = aceasta; aspect.after (this.submitButton, "onClick", functie () // Butonul de trimitere a fost clickat, declansa mai multe functionalitati self.showAjaxSpinner (););
Resursa de aspect a fost găsită anterior cu dojo.connect.
dojo / aspect Documentație și exemple dojo / aspect Nu pot aproba acest cadru UI suficient. Când spun că este de neegalat, nu pot să subliniez cât de mult mă refer. Nu este nimic aproape.
Deferreds sunt reprezentări obiectuale ale operațiilor asincrone, permițând ca stările de funcționare a asincronului să fie transferate cu ușurință de la un loc la altul. Una dintre cele mai recente și importante adăugări ale jQuery era Deferreds. Coincidență, mantra echipei Dojo este "Dojo a făcut-o". Dojo Toolkit a prezentat Deferreds de mai mulți ani, folosind pentru operații simple și avansate AJAX, animații și multe altele.
Împreună cu a fi în fruntea obiectelor amânate, Dojo a pionierat mai multe metode de manipulare IO în afara standardului XMLHTTPRequest, window.name învelitoare, dojo / io / iframe pentru încărcarea fișierelor AJAX și multe altele. Deci, atunci când sunt obiecte amânate folosite în cadrul Dojo? Ori de câte ori are loc o acțiune asincronă / AJAX! Amânările sunt returnate din cererile XHR, dojo / io solicitări, animații și multe altele!
// Aprindeți o solicitare AJAX, obținând întârzierea înapoi var def = xhr.get (url: "/ getSomePage")); / / () () (Rezultatul) result.prop = 'Ceva mai mult'; return rezultatul;), apoi (functie (resultObjWithProp) // ... // ...);
Și apoi ce face dojo / io / iframeAPI-ul arată?
(// formularul: "myform", url: "handler.php", handleAs: "json" / / Handle the ("dojo / io / iframe" rezultatul rezultatului), apoi (funcția (date) // Do ceva // manipulați cazul de eroare, funcția (err) // Manipulați eroarea), apoi (funcția (// Mai multe apeluri! ); Frumusețea în Dojo care utilizează Deferreds pentru fiecare operație AJAX este că, indiferent de metodă, știți mereu că veți primi un Deferred în schimb, accelerarea dezvoltării și unificarea API-ului. Dojo 1.8 va vedea introducerea dojo / cerere, o nouă consolidare a metodelor AJAX. Iată câteva exemple despre modul în care dojo / cerere API va fi utilizat în viitor:
// Cererile cele mai de baza ale AJAX necesita ([dojo / request]], functia (request) request ("request.html"), apoi (function (response) ) // manipulați o condiție de eroare, funcția (evt) // gestionați un eveniment de progres);); Un API unificat face dezvoltarea mai rapidă și codificată mai compactă; noul dojo / cerere module de Bryan Forbes promite să facă Dojo chiar mai mult dezvoltator prietenos!
Fără îndoială, cel mai mare avantaj al Dojo Toolkit față de alte cadre JavaScript este cadrul său de interfață Dijit. Acest set nemaipomenit de aspect, formă și alte instrumente se mândrește:
Dijit permite, de asemenea, crearea de obiecte declarative și programatice; declarația de creare a widgetului arată astfel:
... prin care se creează crearea tradițională a widgetului JavaScript:
necesita (["dijit / form / Button"], functie (buton) // Creeaza butonul programabil var buton = buton nou (eticheta: "Click Me!", "myNodeId";
Există câteva duzină de widget-uri Dijit furnizate în spațiul de nume dijit și câteva duzini mai multe disponibile în spațiul de nume dojox. Cadrul de interfață Dijit nu este doar câteva widget-uri UI utile, ca ceva de genul jQueryUI; Dijit este un cadru UI testat de întreprindere.
În cei doi ani petrecuți la SitePen, am lucrat aproape exclusiv cu Dijit și cu complicațiile de a crea widget-uri flexibile, localizabile și eficiente. Nu pot aproba acest cadru UI suficient. Când spun că este de neegalat, nu pot să subliniez cât de mult mă refer. Nu este nimic aproape.
Ca la aproape orice problemă de pe web, Dojo are o soluție; în acest caz, răspunsul lui Dojo la mobil trăiește în spațiul de nume dojox / mobil. Soluția mobilă excelentă Dojo oferă:
Widgeturile mobile pot fi create declarativ sau programabil, la fel ca widget-urile Dijit. Vizualizările mobile pot fi redate leneș și schimbarea între vizualizări este fără probleme. Anatomia HTML a unei pagini dojox / mobile este destul de simplă:
Numele aplicației
Prin utilizarea dojox / mobil / deviceTheme, putem detecta dispozitivul utilizator și aplicăm tema potrivită:
// va aplica tema bazei de dispozitive pe care o necesită detecția UA (["dojox / mobile / deviceTheme"]);
Cu tema dispozitivului în loc, următorul pas este să cerem widget-urile folosite de aplicația noastră mobilă specifică, precum și orice alte clase personalizate pe care le dorim:
/ / Trageți în câteva widgeturi (["dojox / mobile / ScrollableView", "dojox / mobile / Heading", "dojox / mobile / RoundRectList", "dojox / mobile / TabBar", "dojox / parser");
Odată ce resursele JavaScript au fost necesare, este timpul să adăugați declarativ o serie de vizualizări și widget-uri care alcătuiesc aplicația:
Tweets
- Tweet element aici
menţionează
- Menționați articolul tweet aici
Setări
Spectacol
- Setați elementul aici
Un avantaj incredibil la utilizarea dojox / mobile este faptul că API-ul pentru crearea de widget-uri este același ca toate celelalte clase Dijit, deci viteza în dezvoltare este crescută pentru cei care au folosit anterior Dijit; pentru cei care sunt noi pentru Dojo, API-ul mobil este încă incredibil de ușor.
Fără îndoială, cel mai mare avantaj al Dojo Toolkit față de alte cadre JavaScript este cadrul său de interfață Dijit.
Animațiile CSS sunt un instrument de vizualizare excelent, precum imaginile animate, dar nici ele nu sunt la fel de flexibile și puternice ca și crearea și manipularea grafică vectorială. Cel mai popular instrument de generare grafică a clientului a fost întotdeauna Raphael JS, dar biblioteca GFX a lui Dojo este fără îndoială mai puternică. GFX poate fi configurat pentru a face grafica vectorială în SVG, VML, Silverlight, Canvas și WebGL. GFX oferă o bandă utilizabilă pentru a crea fiecare formă grafică vectorială (elipsă, linie, cale, etc.) pentru viteza în dezvoltare și permite dezvoltatorilor să:
Crearea unui set simplu de forme pe o pânză ar putea să arate ca:
(gfx) gfx.renderer = "canvas"; // Crearea unei suprafețe GFX // Argumente: nod, lățime, suprafață înălțime = gfx.createSurface (("dojox / gfx" "surfaceElement", 400, 400); // Crearea unui cerc cu un set "blue" color surface.createCircle (cx: 50, cy: 50, rx: 50, r: 25 ; // Crate un cerc cu un set de culoare hexagonală surface.createCircle (cx: 300, cy: 300, rx: 50, r: 25) setFill ("# f00"); (tip: "liniar", x1: 0, y1: 0, / x: 0 => 0, gradient constant orizontal x2: 0, // y: 0 => 420, schimbarea gradientului vertical y2: 420, culori: [offset: 0, culoare: "# 0072e5" , offset: 1, color: "# 4ea1fc"]); // Creați un cerc cu un gradient radiant surface.createEllipse (cx: 120, cy: 260, rx: 100, ry: 100). setFill (tip: "radial", cx: 150, cy: 200, culori: [offset: 0, culoare: "# 4ea1fc" "# 0072e5", offset: 1, culoare: "# 003b80"]); ); 
Un API care a fost scris pe GFX este biblioteca Dojo puternică dojox / charting. Vizualizarea datelor prin intermediul graficelor este populară și pentru un motiv bun; simpla citire a numerelor nu oferă, bine, imaginea completă. Biblioteca dojox / charting permite:
O schemă de plăci de bază poate fi creată folosind următorul cod JavaScript Dojo:
În timp ce codul de mai sus creează o diagramă simplă, diagrama dojox / charting a lui Dojo este capabilă de mult, mult mai mult.
SitePen, un consultant bazat pe JavaScript, fondat de fondatorul Dojo, Dylan Schiemann, a căutat să înlocuiască widgeturile DojoX de la Grid, cu ajutorul unui widget foarte rapid, extensibil și editabil; au îndeplinit această sarcină cu dgrid. Caracteristici dgrid:
SitePen a realizat o lucrare remarcabilă documentând fiecare componentă a dgrid-ului, astfel încât începerea de a crea propriile dvs. grilaje bogate în funcții va fi incredibil de ușoară!
Nu numai că este modularul Dojo așa cum se poate, ci vă oferă un încărcător în cuptor!
Testarea este la fel de importantă, dacă nu mai importantă, pe partea clientului decât pe partea de server. Cu gama de browsere disponibile și numărul diferit de caracteristici oferite în fiecare versiune de browser, testarea interactivității pe partea clientului este o necesitate. Cadrul propriu de testare Dojo Toolkit, poreclit DOH (Dojo Objective Harness), este prevăzut cu fiecare descărcare de versiune Dojo. Testarea scrisului este incredibil de ușoară, iar testele pot fi furnizate în câteva formate diferite:
// Declarați numele modulului de testare pentru a face fericit încărcătorul modulului dojo. dojo.provide ( "my.test.module"); // Inregistreaza o suita de test doh.register ("MyTests", [// Testele pot fi doar o simpla functie ... function assertTrueTest () doh.assertTrue (true); doh.assertTrue (1); doh.assertTrue (! False );, // ... sau un obiect cu nume, setUp, tearDown și runTest proprietăți name: "thingerTest", setUp: function () this.thingerToTest = new Thinger (); this.thingerToTest.doStuffToInit (); , runTest: functie () superv.assertEqual ("blah", this.thingerToTest.blahProp); ...]); Testul de mai sus este un exemplu foarte bun al unui test Dojo, dar cum rămâne cu o situație mai dificilă, adică acțiuni asincrone? Cea mai evidentă acțiune asynchrnous este o solicitare AJAX, dar animațiile și alte acțiuni cu întârziere vor crea o astfel de situație. DOH oferă o metodă incredibil de ușoară pentru testarea acțiunilor asincrone folosind obiectele doh.Deferred:
name: "Testarea interacțiunii amânate", timeout: 5000, runTest: function () var deferred = new doh.Deferred (); myWidget.doAjaxAction () și apoi (deferred.getTestCallback (function () doh.assertTrue (true);); întoarcere amânată;
În testul de probă de mai sus, getTestCallback funcția nu se declanșează până când doAjaxAction este complet, și returnează succesul sau eșecul testului.
Testele ulterioare nu se mișcă înainte până când soluția doh.Deferred nu se rezolvă sau nu, astfel că nu există probleme de sincronizare sau de suprapunere. DOH oferă o suită de testare incredibil de fiabilă pe care alte cadre de pe partea clientului nu le oferă. DOH oferă, de asemenea, un robot DOH bazat pe Java care simulează acțiunile reale ale mouse-ului și ale tastaturii pentru teste mai precise și mai realiste. Dacă auziți Homer Simpson strigă "Woohoo!", Toate testele tale trec; dacă auziți acest temut "DOH!", testele dvs. au eșuat și trebuie să refaceți codul.
Atunci când o aplicație web este gata de lansare, este foarte important, din motive de încărcare și cachere optimizată, să creați un fișier JavaScript sau fișiere JavaScript. Aceasta reduce solicitările și menține sarcina site-ului cât mai ușoară. Este mai bine să analizăm sistemul de construcție al lui Dojo defini solicită și le folosește pentru a detecta automat dependențele pentru construcții. Pentru a utiliza procesul de construire Dojo, creați ceea ce se numește un profil de construire. Profilele de construcție pot conține numeroase straturi și pot deveni destul de complexe, dar profilul de mai jos este un exemplu simplu:
var profile = releaseDir: "/ path / to / releaseDir", basePath: "...", acțiune: "release", cssOptimize: "comments", mini: true, optimize: "closure", layerOptimize: : "toate", selectorEngine: "acme", straturi: dojo / dojo: include: [dojo / dojo, app / main] amd: funcție (nume fișier, mijloc) return /\.js$/.test(filename); ;
Procesul de construire Dojo este extrem de personalizabil, permițând dezvoltatorului să personalizeze:
Profilele de execuție sunt executate prin linia de comandă (recent rescrisă pentru NodeJS), iar linia de comandă oferă o varietate de opțiuni pentru suprascrierea sau completarea setărilor în cadrul profilului de construire. Câteva exemple de rulare a profilului de execuție includ:
./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js
Procesul de construire Dojo oferă o cantitate incredibilă de control asupra fișierelor generate și generează procesul de optimizare a aplicației web. Cu CSS și JS miniat și stratificat la niveluri adecvate, aplicația dvs. Dojo este pregătită pentru showtime!
Două biblioteci DojoX foarte proeminente au fost deja menționate mai sus, DojoX Mobile și GFX, dar acestea sunt doar două dintre cele zeci de comori ascunse oferite de Dojo. Aceste comori includ:
Acestea sunt doar câteva din cele zeci de pietre prețioase din cadrul DojoX. Răsfoiți comanda Dojo pentru a afla mai multe dintre instrumentele minunate disponibile!
Dojo Toolkit este un set complet de instrumente JavaScript care oferă:
Nu începeți proiectul următor fără a verifica toate funcțiile Dojo are de oferit! Chiar dacă nu aveți nevoie de unele dintre caracteristicile avansate enumerate mai sus inca, folosind funcțiile cele mai de bază ale instrumentului Dojo Toolkit (interogarea elementelor, animațiile, cererile XHR) vă va ajuta să creați o aplicație web rapidă, bogată în funcții, fără tavan!
