Share
Het meest krachtige en weinig gebruikte JavaScript-hulpprogramma is één en dezelfde: de Dojo Toolkit. Hoewel bijna elk JavaScript-framework of elke toolkit alles belooft wat je nodig hebt, is de Dojo Toolkit het meest overtuigende argument dat deze uitspraak waar is. Dit bericht zal veel van de krachtigste functies van de Dojo Toolkit behandelen, en daarmee doen waarom u de Dojo Toolkit voor uw volgende project zou moeten gebruiken.
Start uw volgende project niet zonder alle functies te bekijken die Dojo te bieden heeft!
Omdat onze JavaScript-code aan de kant van de klant groter wordt, en het zal, modulariteit is de sleutel om onze applicaties snel, onderhoudbaar en performant te houden. De dagen van het gebruik van één stuk bibliotheekbestand zonder asynchrone laden zijn voorbij. Jarenlang was de code van de Dojo Toolkit het lichtend voorbeeld van modulariteit, gebruiken dojo.require (vóór builds) om alleen de benodigde resources voor de pagina dynamisch in te voeren. De standaardmethode voor het laden van JavaScript-bronnen was synchroon, hoewel er een cross-domeinoptie was die asynchroon was.
Dojo is sindsdien verhuisd naar een asynchrone loader, geschreven door Rawld Gill, die alle bronnen meesterlijk asynchroon laadt, waardoor de snelheid enorm verbetert. Als u enkele JavaScript-bronnen wilt laden, kunt u iets als het volgende coderen:
// De vereiste functie stuurt de lader om te proberen bronnen in de eerste array te laden // Als de bronnen al zijn geladen, worden hun in de cache opgeslagen objecten gebruikt (// Een reeks modules om ["dojo / on") te laden, "dojo / touch", "dijit / form / Button", "dojo / domReady!"], // Een callback-functie met geladen module-objecten als argumenten // Moet in dezelfde volgorde worden toegevoegd als waarin de functie geladen was (aan, druk op, knop) // Doe nu iets met de componenten die we hebben geladen!);
Om een module te declareren, codeert u gewoon het volgende patroon:
// Gebruik 'define' in plaats van 'require' omdat we een module definiëren (// Nogmaals, een array met module-afhankelijkheden voor de module die we willen bouwen ["dojo / aspect", "dojo / _base / declare "," dijit / layout / BorderContainer "] // Nogmaals, een callback-functie die een objectfunctie moet retourneren (aspect, declare, BorderContainer) // Retourneer een module (object, functie of door Dojo gedeclareerde klasse) return declare ( "mynamespace.layout.CustomBorderContainer", [BorderContainer], // Aangepaste attributen en methoden hier);)
Dit is eenvoudig bepalen methode, gebruikt door bijna alle AMD-laders, is ongelooflijk eenvoudig en gestructureerd. heel erg zoals een vereiste blok, dus het is heel gemakkelijk te gebruiken. De items in de afhankelijkheidsarray worden geladen voordat de callback wordt uitgevoerd. De callback retourneert (meestal) een functie of object die de module vertegenwoordigt. Een eenvoudig patroon dat snel laadt, modulariteit behoudt en ontwikkelaars toestaat om alleen te laden wat ze nodig hebben!
Dojo's feature-rijke loader biedt ook plug-ins, zoals domReady, om te luisteren naar DOM-gereedheid en heeft kenmerkdetectie met hasJS. De lader is ook intelligent genoeg om modules voorwaardelijk te laden op basis van omgeving of configuratie:
// Deze code is te zien in de dojo / Uitgestelde module define (["./has", "./_base/lang", "./errors/CancelError", "./promise/Promise", "./has! config-deferredInstrumentation? ./ promise / instrumentation "], function (has, lang, CancelError, Promise, instrumentation) // ...);
Dojo is niet alleen modulair als het kan, het biedt een ingebouwde loader voor u!
Accentsconagua
dojo / declare Hoewel JavaScript geen echt klassensysteem biedt, biedt de Dojo Toolkit een klasse-achtig overervingspatroon dat wordt gebruikt dojo / declare. Declare wordt in het hele framework gebruikt, zodat ontwikkelaars:
Het doelsysteem van Dojo maakt gebruik van prototypische overerving, waardoor prototypen kunnen worden geërfd en kinderenklassen dus net zo krachtig kunnen zijn als ouders als gevolg van het gedeelde prototype. Gebruik makend van dojo / declare is ongelooflijk eenvoudig:
// Natuurlijk moeten we define gebruiken om de module define te maken ([// Load dojo / declare dependency "dojo / declare", // Ook afhankelijkheden van de klasse laden die we willen maken "dijit / form / Button", " dojo / on "," mynamespace / _MyButtonMixin "// Mixins beginnen met" _ "], functie (declare, Button, on, _MyButtonMixin) // Retourneer een declare () product, dat wil zeggen een class return declare (// Eerste argument is de naam van de widget, als u er een aanmaakt. // Moet in de syntaxis van de object-indeling zijn "mynamespace.CustomButton", // Het tweede argument is een enkel object waarvan het prototype als basis voor de nieuwe klasse zal worden gebruikt // Een array kan ook worden gebruikt, voor multiple inheritance [Button, _MyButtonMixin], // Ten slotte, een object dat nieuwe eigenschappen en methoden bevat, of // verschillende waarden voor overgenomen eigenschappen en methoden myCustomProperty: true, value: "Hello!", myCustomMethod : function () // Hier dingen doen!, methodThatOverridesParent: function (val) this.myCustomMethod (val); // Calling "this.inherited (arguments)" voert de methode // van de ouder uit van dezelfde, dezelfde parameters doorgeven retourneert deze.herhaling (argumenten); ); );
Hoewel de bovenstaande klasse niet bedoeld is om een echte taak te vervullen (het is gewoon een voorbeeld), illustreert het codehergebruik, via de overervingsketen en mixins; het laat ook zien hoe een onderliggende klasse de methode van een bovenliggende klasse kan aanroepen om de herhaalde code te verminderen.
Een ander voordeel van het gebruik van Dojo's klassensysteem is dat allemaal eigenschappen en methoden zijn aanpasbaar - er is geen "options" -object dat het aantal eigenschappen dat kan worden aangepast op Dojo-klassen beperkt. Alles kan gemakkelijk worden veranderd en uitgebreid gedurende het proces van het maken van de klas.
dojo / _base / declare dojo / _base / declare Aspecten zijn een van de krachtigste en meest essentiële onderdelen van de geavanceerde ontwikkeling van webtoepassingen ... en de Dojo Toolkit biedt ze al jaren. In plaats van functionaliteit te activeren na een traditioneel gebruikersevenement, zoals Klik, mouseover, of keyup, Met aspecten kunt u functie B activeren voordat of nadat functie A is uitgevoerd. In wezen kun je functies verbinden met functies - geweldig!
Een functie triggeren nadat een andere functie eruitziet:
// after (target, methodName, advisingFunction, receiveArguments); aspect.after (myObject, "someMethod", function (arg1, arg2) // Functionaliteit uitvoeren nadat de functie myObject.doSomething is geactiveerd, true);
Zorgen dat functie B vuurt voor functie A is net zo eenvoudig!
aspect.before (myObject, "someMethod", function (arg1, arg2) // Deze functie vuurt * before * the original myObject.someMethod does);
Aspecten zijn uitermate handig bij het maken van geavanceerde UI's met Dijit. Luisteren naar evenementen op één widget of klasse kan een wijziging in andere widgets activeren, waardoor ontwikkelaars één grote, controlerende widget kunnen maken van vele kleine:
var self = this; aspect.after (this.submitButton, "onClick", functie () // op de knop Verzenden is geklikt, activeer meer functionaliteit self.showAjaxSpinner (););
De aspectresource is eerder gevonden met dojo.connect.
dojo / aspect Documentatie en voorbeelden dojo / aspect Ik kan niet genoeg instemmen met dit UI-framework. Als ik zeg dat het ongeëvenaard is, kan ik niet benadrukken hoeveel ik het meen. Er is niets in de buurt.
Deferreds zijn object-gebaseerde representaties van asynchrone operaties, waardoor asynchroon operaties gemakkelijk van de ene plaats naar de andere kunnen worden doorgegeven. Een van de meest recente en belangrijke toevoegingen van jQuery was Deferreds. Toevallig is de mantra van het Dojo-team 'Dojo deed het'. De Dojo Toolkit bevat Deferreds voor meerdere jaren en gebruikt ze voor eenvoudige en geavanceerde AJAX-bewerkingen, animaties en meer.
Naast het feit dat hij op de voorgrond stond van uitgestelde objecten, was Dojo ook de pionier van verschillende IO-afhandelingsmethoden buiten het standaard XMLHTTP-verzoek, inclusief een window.name wikkel, dojo / io / iframe voor het uploaden van AJAX-bestanden en meer. Dus wanneer worden uitgestelde objecten gebruikt in Dojo? Wanneer een asynchrone / AJAX-actie plaatsvindt! Uitstel wordt teruggestuurd van XHR-verzoeken, dojo / io verzoeken, animaties en meer!
// Vuur een AJAX-verzoek in en ontvang de uitgestelde variabele var def = xhr.get (url: "/ getSomePage"); // Doe veel o 'callbacks def.then (functie (resultaat) result.prop =' Something more '; return result;) then (function (resultObjWithProp) // ...). Then (function () // ...);
En wat dan wel dojo / io / iframeAPI ziet eruit als?
require (["dojo / io / iframe"], function (ioIframe) // Verstuur de aanvraag ioIframe.send (form: "myform", url: "handler.php", handleAs: "json" // Behandel de succesresultaat). then (functie (gegevens) // Iets doen // De fout behandelen, functie (err) // Handle Error). then (function () // More callbacks!) );
De schoonheid in Dojo met Deferreds voor elke AJAX-bewerking is dat, ongeacht de methode, je altijd weet dat je een uitgestelde teruggave ontvangt, waardoor de ontwikkeling wordt versneld en de API wordt verenigd. Dojo 1.8 ziet de introductie van dojo / verzoek, een nieuwe consolidatie van AJAX-methoden. Hier zijn een paar voorbeelden van hoe het dojo / verzoek API wordt in de toekomst gebruikt:
// De meest elementaire AJAX-aanvragen vereisen (["dojo / request"], functie (request) request ("request.html"). Then (function (response) // do something with results, function (err ) // omgaan met een foutvoorwaarde, functie (evt) // een voortgangsgebeurtenis afhandelen);); Een uniforme API maakt ontwikkeling sneller en code compacter; de nieuwe dojo / verzoek module van Bryan Forbes belooft Dojo nog ontwikkelaarvriendelijker te maken!
Het grootste voordeel van de Dojo Toolkit ten opzichte van andere JavaScript-frameworks is zonder twijfel het Dijit UI-framework. Deze ongeëvenaarde set van lay-out, vorm en andere tools biedt:
Dijit maakt ook declaratieve en programmatische widgetcreatie mogelijk; declarative widget creation ziet eruit als:
... waardoor traditionele JavaScript-widgetcreatie eruitziet:
require (["dijit / form / Button"], functie (Button) // Maak de knop programmatisch var button = new Button (label: 'Click Me!', "myNodeId"););
Er zijn enkele tientallen Dijit-widgets beschikbaar in de dijit-naamruimte en een paar dozijn meer beschikbaar binnen de dojox-naamruimte. Het Dijit UI-framework is niet slechts een paar nuttige gebruikersinterfaces, zoals zoiets als jQueryUI; Dijit is een enterprise-ready, enterprise-geteste UI-framework.
In mijn twee jaar bij SitePen werkte ik bijna uitsluitend met Dijit en de fijne kneepjes van het creëren van flexibele, lokaliseerbare, efficiënte widgets. Ik kan niet genoeg instemmen met dit UI-framework. Als ik zeg dat het ongeëvenaard is, kan ik niet benadrukken hoeveel ik het meen. Er is niets in de buurt.
Zoals met bijna elk probleem op het web, heeft Dojo een oplossing; in dit geval leeft Dojo's antwoord op mobiel binnen de dojox / mobiele naamruimte. Dojo's uitstekende mobiele oplossing biedt:
Mobiele widgets kunnen declaratief of programmatisch worden gemaakt, net zoals Dijit-widgets. Mobiele weergaven kunnen lui worden weergegeven en wisselen tussen weergaven is naadloos. De HTML-anatomie van een dojox / mobiele pagina is vrij eenvoudig:
Uw applicatie naam
Door het gebruiken van dojox / mobile / deviceTheme, we kunnen het gebruikersapparaat detecteren en het juiste thema toepassen:
// Past de apparaatthema-basis toe op UA-detectie vereist (["dojox / mobile / deviceTheme"]);
Met het apparaatthema op zijn plaats vereist de volgende stap de widgets die worden gebruikt door onze specifieke mobiele applicatie, evenals alle andere aangepaste klassen die we wensen:
// Trek een paar widgets in (["dojox / mobile / ScrollableView", "dojox / mobile / Heading", "dojox / mobile / RoundRectList", "dojox / mobile / TabBar", "dojox / parser"]);
Zodra de JavaScript-bronnen vereist zijn, is het tijd om declaratief een reeks views en widgets toe te voegen waaruit de applicatie bestaat:
tweets
- Tweet artikel hier
vermeldingen
- Noem hier een tweet-item
instellingen
Laten zien
- Item hier instellen
Een ongelooflijk voordeel van het gebruik van dojox / mobiel is dat de API voor het maken van widgets hetzelfde is als alle andere Dijit-klassen, dus is de snelheid in ontwikkeling verhoogd voor degenen die eerder Dijit hebben gebruikt; voor degenen die nog geen ervaring hebben met Dojo, is de mobiele API nog steeds ongelooflijk eenvoudig.
Het grootste voordeel van de Dojo Toolkit ten opzichte van andere JavaScript-frameworks is zonder twijfel het Dijit UI-framework.
CSS-animaties zijn een geweldige visualisatietool, net als geanimeerde beelden, maar geen van beide is zo flexibel en krachtig als het maken en manipuleren van vectorafbeeldingen. De meest populaire grafische vectorgeneratietool aan de kant van de klant is altijd Raphael JS geweest, maar de GFX-bibliotheek van Dojo is ongetwijfeld krachtiger. GFX kan worden geconfigureerd om vectorafbeeldingen weer te geven in SVG, VML, Silverlight, Canvas en WebGL. GFX biedt een bruikbare wrapper om elke vector grafische vorm (ellips, lijn, pad, enz.) Te creëren voor snelheid in ontwikkeling, en stelt ontwikkelaars in staat om:
Het maken van een eenvoudige reeks vormen op een canvas kan er als volgt uitzien:
require (["dojox / gfx", "dojo / domReady"], function (gfx) gfx.renderer = "canvas"; // Maak een GFX-oppervlak // Argumenten: knooppunt, breedte, hoogte-oppervlak = gfx.createSurface ( "surfaceElement", 400, 400); // Creëer een cirkel met een ingesteld "blauw" kleuroppervlak.createCircle (cx: 50, cy: 50, rx: 50, r: 25). setFill ("blue") ; // Krat een cirkel met een gekleurd hex-oppervlak.createCircle (cx: 300, cy: 300, rx: 50, r: 25). SetFill ("# f00"); // Creëer een cirkel met een lineaire gradient surface.createRect (x: 180, y: 40, width: 200, height: 100). setFill (type: "linear", x1: 0, y1: 0, // x: 0 => 0, consistent verloop horizontaal x2: 0, // y: 0 => 420, verticaal verloop verticaal wijzigen y2: 420, kleuren: [offset: 0, kleur: "# 003b80", offset: 0.5, kleur: "# 0072e5" , offset: 1, color: "# 4ea1fc"]) // Creëer een cirkel met een radiaal verloopoppervlak.createEllipse (cx: 120, cy: 260, rx: 100, ry: 100). setFill (type: "radial", cx: 150, cy: 200, colors: [offset: 0, colour: "# 4ea1fc", offset: 0.5, color: "# 0072e5", offset: 1, color: "# 003b80"]); ); 
Een API die bovenop GFX is geschreven, is Dojo's krachtige dojox / diagrambibliotheek. Visualisatie van gegevens via grafieken is populair en niet zonder reden; gewoon het lezen van nummers biedt niet, nou ja, het volledige beeld. De dojox / grafiekbibliotheek biedt ruimte voor:
Een basiscirkeldiagram kan worden gemaakt met behulp van de volgende Dojo JavaScript-code:
Terwijl de bovenstaande code een eenvoudig cirkeldiagram creëert, kan Dojo's Dojox / grafiekbibliotheek van Dojo veel, veel meer.
SitePen, een JavaScript-adviesbureau, opgericht door Dojo-oprichter Dylan Schiemann, zocht de onhandige en opgeblazen Grid-widgets van DojoX door een zeer snelle, uitbreidbare en bewerkbare rasterwidget; ze hebben die taak met dgrid volbracht. dgrid-functies:
SitePen heeft uitstekend werk gedaan met het documenteren van elk onderdeel van dgrid, dus het is ongelofelijk eenvoudig om aan de slag te gaan met het maken van uw eigen functierijke rasters!
Dojo is niet alleen modulair als het kan, het biedt een ingebouwde loader voor u!
Testen is net zo belangrijk, zo niet belangrijker, aan de clientzijde dan aan de serverkant. Met het bereik van beschikbare browsers en het variërende aantal functies in elke browserversie is interactiviteitstesten aan de kant van de klant een must. Het Dojo Toolkit's eigen testraamwerk, bijgenaamd DOH (Dojo Objective Harness), wordt bij elke Dojo-versie gedownload. Testschrijven is ongelooflijk eenvoudig en tests kunnen in een aantal verschillende indelingen worden uitgevoerd:
// Verklaar de naam van de testmodule om de module-lader van dojo tevreden te maken. dojo.provide ( "my.test.module"); // Registreer een testpakket doh.register ("MyTests", [// Tests kunnen slechts een eenvoudige functie zijn ... function assertTrueTest () doh.assertTrue (true); doh.assertTrue (1); doh.assertTrue (! False );, // ... of een object met naam, setUp, tearDown en runTest-eigenschappen name: "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 () , // ...]); De bovenstaande test is een zeer eenvoudig voorbeeld van een Dojo-test, maar hoe zit het met een moeilijkere situatie, d.w.z. asynchrone acties? De meest voor de hand liggende asynchrnous-actie is een AJAX-aanvraag, maar animaties en andere acties met uitgestelde acties zullen een dergelijke situatie creëren. DOH biedt een ongelooflijk eenvoudige methode voor het testen van asynchrone acties met doh.Deferred-objecten:
name: "Uitgestelde interactie testen", time-out: 5000, runTest: function () var deferred = new doh.Deferred (); myWidget.doAjaxAction (). then (deferred.getTestCallback (function () doh.assertTrue (true);); retourneer uitgestelde;
In de voorbeeldtest hierboven, de getTestCallback functie vuurt niet tot doAjaxAction is voltooid en geeft het succes of falen van de test als resultaat.
De volgende tests worden niet uitgevoerd totdat de doh.Deferred is opgelost of een time-out heeft opgetreden, dus er zijn geen testtiming of overlappingsproblemen. DOH biedt een ongelooflijk betrouwbare testsuite die andere client-side frameworks simpelweg niet bieden. DOH biedt ook een door Java aangedreven DOH-robot die echte muis- en toetsenbordacties simuleert voor nauwkeurigere en realistischere tests. Als je Homer Simpson "Woohoo!" Hoort roepen, gaan al je tests voorbij; als je die gevreesde "DOH!" hoort, zijn je tests mislukt en moet je je code opnieuw aanvullen.
Wanneer een webtoepassing klaar is om vrijgegeven te worden, is het ongelofelijk belangrijk om, omwille van geoptimaliseerde belasting en cacheabiliteit, een geminimaliseerd, gelaagd JavaScript-bestand of bestand (en) te creëren. Dit vermindert aanvragen en houdt de sitelading zo licht mogelijk. Beter nog is dat het bouwsysteem van Dojo analyseert bepalen roept en gebruikt deze om afhankelijkheden voor builds automatisch te detecteren. Als u het Dojo-buildproces wilt gebruiken, maakt u wat wordt aangeduid als een buildprofiel. Build-profielen kunnen meerdere lagen bevatten en kunnen behoorlijk complex worden, maar het onderstaande profiel is een eenvoudig voorbeeld:
var profile = releaseDir: "/ path / to / releaseDir", basePath: "...", actie: "release", css Optimaliseren: "comments", mini: true, optimaliseren: "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); ;
Het bouwproces van Dojo is uiterst aanpasbaar, waardoor de ontwikkelaar zijn eigen instellingen kan aanpassen:
Build-profielen worden uitgevoerd via de opdrachtregel (recentelijk herschreven voor NodeJS) en de opdrachtregel biedt een verscheidenheid aan opties om instellingen in het buildprofiel te overschrijven of aan te vullen. Een paar voorbeelden van het uitvoeren van het buildprofiel zijn:
./build.sh --profile /path/to/app/app.profile.js --require /path/to/app/boot.js
Het bouwproces van Dojo biedt ongelooflijk veel controle over de gegenereerde build-bestanden en rondt het optimalisatieproces van de webtoepassing af. Met de CSS en JS verkleind en gelaagd op de juiste niveaus, je Dojo-aangedreven app is klaar voor de showtime!
Twee zeer prominente DojoX-bibliotheken zijn hierboven al genoemd, DojoX Mobile en GFX, maar dat zijn slechts twee van de tientallen verborgen schatten die Dojo biedt. Die schatten omvatten:
Dit zijn slechts een paar van de tientallen edelstenen binnen DojoX. Blader door de Dojo-kassa om meer te weten te komen over de geweldige randgereedschappen die beschikbaar zijn!
De Dojo Toolkit is een allesomvattende JavaScript-toolkit die het volgende biedt:
Start je volgende project niet zonder alle functies te bekijken die Dojo te bieden heeft! Zelfs als u sommige van de geavanceerde functies die hierboven worden vermeld, niet nodig hebt nog, het gebruik van de meest elementaire functies van de Dojo Toolkit (elementquerying, animaties, XHR-verzoeken) zal u er goed aan doen om een snelle, feature-rijke webapplicatie zonder plafond te creëren!
