Grav inn i Dojo DOM Basics

Kanskje du så det tweet: "jQuery er et gateway-stoff. Det fører til fullstendig JavaScript-bruk. "En del av den avhengigheten, bekrefter jeg, er å lære andre JavaScript-rammer. Og det er hva denne firedelte serien på den utrolige Dojo Toolkit handler om: tar deg til neste nivå av JavaScript-avhengigheten din.

Før vi begynner

Jeg bør nevne før vi begynner at den eneste forutsetningen for denne serien er at du i det minste har en grunnleggende kunnskap om JavaScript. Hvis du har brukt et annet JS-bibliotek før, blir du enda bedre. Men selv om jeg sammenligner Dojo med jQuery et par ganger, trenger du ikke å vite at jQuery er behagelig i denne klassen.

Foretrekker visuell trening?

Og enda en ting: Jeg skal produsere en screen for hver enkelt av disse veiledningene, dekker alt i de skriftlige opplæringene, og kanskje litt mer. Kastingene er en del av abonnementet på Premium, så hvis du ikke er medlem, registrer deg for å få dem og et metrisk tonn med andre fantastiske Premium-innhold.

Møte Dojo

Dojo er offisielt kalt Dojo Toolkit. Dette er faktisk veldig passende. De fleste andre samlinger av linjer med JavaScript tilgjengelig regner seg som rammer eller biblioteker. I mitt sinn er et rammeverk en mer eller mindre ende-til-ende løsning for å bygge gode webapplikasjoner, og et bibliotek er en samling verktøy som hjelper deg med noen spesifikke (vanligvis relaterte) oppgaver. Dojo passer inn i begge kategorier, og deretter noen. Den har alle DOM-manipulasjon, hendelser og animasjonshjelpere, og AJAX-funksjoner som du vil få med et bibliotek som jQuery. Men det er mer, mye mer.

På dine første par datoer med Dojo, vil du ikke innse hvor mye det er til det. Så, la meg introdusere deg til de tre hoveddelene av Dojo:

Dojo Core: Dojo Core er den viktigste, basale funksjonaliteten. Mesteparten av det er den typen ting du vil få med jQuery. Imidlertid inneholder det også dusinvis av allsidige språkverktøy, samt rørleggerarbeid for de andre delene av Dojo.
Dijit: Dijit er UI-biblioteket av Dojo; Det er et offisielt delprosjekt, administrert av separate personer. På den måten ligner det på jQuery UI. Mye av funksjonaliteten ligner på hva slags ting du vil finne i jQuery UI Widgets-biblioteket også: Kalenderplukkere, kombinationsbokser og knapper. Hvis du ønsker å skru opp webformene dine et hakk, finner du nesten alt du trenger i Dijit. Dijit inneholder også noen interessante layoutverktøy.
DojoX: DojoX (Dojo-utvidelser) er en samling av individuelle prosjekter som du gjettet, utvider Dojo. Det er neppe en overdrivelse å si det, "det er en Dojo forlengelse for det." Utrolig kartlegging verktøy? Kryss av. Hver type datalager du noensinne vil ha, og så noen? Det kan du vedde på. Enda flere formhjelpere til å øke de som er tilgjengelige i Dijit? Det er her. Det er alt her.

Å få Dojo

Vi starter selvfølgelig ved å få Dojo på siden. Jeg vil fortelle deg at Dojo ikke er som jQuery, fordi det er dusinvis av filer som utgjør Dojo, Dijit og Dojox. Grunnen til at jeg er nølende med å si dette er at du sier at jQuery ikke bare er en fil: det er alle plugins og utvidelser som er laget for det. Forskjellen med Dojo er at alle disse ekstradelene er offisielt en del av Dojo, og kan bli kalt inn på din nettside når som helst.

Men akkurat nå trenger vi bare Dojo-basen. Dette er en delmengde av Dojo Core, tilgjengelig i en enkelt fil. Så, mens du kan laste ned alle Dojo (og Digit og Dojox), eller lage egendefinerte konstruksjoner av det med bare de delene du ønsker, skal vi ta den enkle ruten og få Base fra Google CDN.

Så opprett en index.html fil og start med denne lille malen:

Intro til Dojo, del 1

Et overskrift

Hjem
Portfolio
Abou
Ta kontakt med

Dette er et avsnitt (om enn veldig kort avsnitt). Også her er en lenke.

Jeg har tatt med en mengde elementer i denne lille demosiden. Vi bruker dem når vi utforsker Dojo.

Jeg skal nevne en ting før vi kommer i gang: Når du lærer et bibliotek som Dojo, vil du sikkert finne det nyttig å vise vår testside i din valgte nettleser, og åpne den respektive JavaScript-konsollen. Ta noen linje med kode i denne opplæringen og lim den inn i konsollen, og du vil se hva som skjer.

Finne elementer

I denne opplæringen skal vi lære Dojo først og fremst som en erstatning for jQuery, eller hva DOM-fokusert bibliotek du bruker. Det er selvfølgelig neppe et gulvbrett i denne Titanic, men det er et godt sted å starte. Når du er komfortabel med å bruke den i stedet for ditt vanlige bibliotek, kan vi fortsette med det som gjør Dojo unik.

Den vanlige M.O. med disse tingene er det få det, bruk det; så la oss begynne med å finne DOM-elementer.

Dojo har et par metoder for jakt gjennom DOM. Den første vi ser på er dojo.query, som er veldig mye som jQuery (eller $) metode. Bare send det en CSS velg streng, og det vil finne alle elementene i dokumentet ditt som samsvarer med väljeren.

dojo.query ( "a");

Kjører det i en konsoll, får du en NodeList med 5 elementer. Den har de fem ankeretikettene du forventer. Hva forventer du å få når du prøver dojo.query ("p> a")? dojo.query kan også ta et rot- eller kontekstelement som en andre parameter. Som du kanskje forventer, begrenser dette omfanget av spørringen til elementer i det rotelementet. Så:

dojo.query ("a", "nav"); // returnerer en 'NodeList' på 4 s

Roten parameteren kan enten være et DOM element, eller en streng som er en ID av et element.

Den returnerte NodeLists har også a spørsmål metode, som finner noder som matcher selektoren som er barn av noder i originalen NodeList. For eksempel:

dojo.query ( "a"); // en 'NodeList' av 5 s dojo.query ("p"). spørring ("a"); // en 'NodeList' på 1

Men vent, det er mer, som de sier. Det finnes to andre Dojo-metoder for å få elementer. Hvis elementet du vil ha, har en id attributt, kan du bruke dojo.byId metode.

dojo.byId ( "nav");

Hvis du prøver det ut, vil du legge merke til at du ikke får en NodeList objekt tilbake: det er bare et vanlig gammelt DOM-element. Dette vil være viktig å huske.

En annen, og det er enda mer spesifikk: dojo.body (). Den returnerer element, forutsigbart.

Nå, hvis det er en "main thing" som de fleste devs bruker sine JS-biblioteker for, fungerer det med DOM-elementer. Selvfølgelig har Dojo alle fasilitetene for dette også, så la oss ta turen.

Opprette elementer

Vi begynner med å lage elementer, med dojo.create. For det første kan du bare få et nytt DOM-element som dette:

var h = dojo.create ("h2"); //

Enkel. Men vanligvis vil du gjøre mer. Vel, du kan passere et attributtobjekt som en annen parameter:

var h = dojo.create ("section", rolle: "banner", innerHTML: "Learning Dojo"); //  role = "banner"> Lære Dojo

De dojo.create Metoden kan også legge til elementer direkte til DOM. For det kan vi legge til parametere 3 og 4:

dojo.create ("p", innerHTML: "Hei!", dojo.body (), "first"); dojo.create ("h1", innerHTML: "Overskrift", dojo.query ("h1") [0], "før");

Den tredje parameteren kalles referansenummeret; vår nye node vil bli plassert i DOM i forhold til elementet.

Men hvor, i referanse?

Det er her de fjerde parametrene, posisjonen, kommer inn. Som standard (dvs. hvis du forlater det), er det "sist", som legger til det nye elementet til referansenoden (som sitt siste barn). Dine andre alternativer er disse:

"først" forordner den nye noden til referansenoden.
"før" og "etter" sett den nye noden før eller etter referansenoden.
"erstatte" erstatter referansenoden med den nye noden.
"bare" erstatter alle barnelementene i referansenoden med den nye noden.

Endre nodene

Du vet det ennå ikke, men du har ganske mye lært dojo.attr metode. La oss formalisere denne introduksjonen.

dojo.attr brukes til å få og sette attributter på DOM noder. Husk at attributter objekt som vi passerte som den andre parameteren til dojo.create? Du kan sende det som den andre parameteren til dojo.attr. Den første parameteren er selvfølgelig noden som har sine attributter endret (eller en id-streng):

var navUl = dojo.query ("p") [0]; dojo.attr (navUl, onclick: function () alert ("Learning Dojo!");, rolle: "banner", stil: backgroundColor: "red", fontSize: "2em");

Hvis du bare vil sette et enkelt attributt, bare passere navnet som den andre parameteren og verdien som den tredje:

dojo.attr ("nav", "className", "module"); // første parameter er en id-streng

For å få et attributt er det bare to parametere som kreves:

dojo.attr (dojo.byId ("nav"), "id"); // "nav"

Du kan bruke NodeList metode attr på samme måten:

var items = dojo.query ("li"); items.attr ( "innerhtml"); // ["Hjem", "Portefølje", "Om", "Kontakt"] items.attr (className: "btn");

En ting til: å fjerne attributter, kan du bruke dojo.removeAttr og NodeList motpart for å fjerne attributter fra elementer helt:

dojo.removeAttr ("nav", "id"); dojo.query ( "# nav") removeAttr ( "id.");

Det er andre måter å modifisere disse noderne på. Hva med dojo.addClass, dojo.removeClass, eller dojo.toggleClass? Du kan bruke disse til å legge til, fjerne eller bytte en klasse eller en rekke klasser på enkelte noder:

var nav = dojo.byId ("nav"); dojo.addClass (nav, "valgt");

Det er også NodeList motparter for disse metodene:

dojo.query ("li"). removeClass (["valgt", "uthevet"]);

Å, og ikke glem det dojo.replaceClass og NodeList versjon:

dojo.query ("p"). replaceClass ("newClass", "oldClass");

Fjerne noder

Vil du bli kvitt en knute? Lett: pass dojo.destroy enten en DOM-node eller en id-streng:

var navList = dojo.byId ("nav"); dojo.destroy (navList); // eller, lettere: dojo.destroy ("nav");

Jeg burde merke at det ikke er noen måte å ødelegge en NodeList; dojo.destroy aksepterer bare enkle noder, og har ikke en NodeList motpartsmetode.

Men la oss si at du bare vil ta noder ut av DOM, men ikke egentlig ødelegge dem. Tross alt, vil du kanskje koble dem til et annet sted, eller når det skjer noe annet. Det er her foreldreløs Metoden kommer inn. Denne metoden er bare en NodeList metode:

dojo.query ( "LI") orphan (.);

På vår eksempelside fjerner dette de fire

s og returnerer a NodeList av dem. Hvis du bare vil foreldreløs enkelte noder fra originalen NodeList, pass er en filtreringsvelger. Merk at dette filteret bare samsvarer med noder i originalen NodeList, og ikke deres barn:

. Dojo.query ( "LI") orphan ( "li: første-av-type"); // vil bare forløse den første <li>

Mens det ikke fjerner et element, kaster jeg dette inn her: dojo.empty () vil ta en enkelt node eller id og fjerne alt inni den. Bak kulissene, gjør Dojo faktisk bare node.innerHTML = "". Det er også en NodeList versjon av denne metoden som åpenbart krever ingen parametere.

Flytte / duplikere noder

Det er et par metoder knyttet til flytting eller duplisering av DOM noder.

Du finner at du allerede er delvis kjent med dojo.place, fra dojo.create. Det tar tre parametre: noden, referansekoden og stillingen. Som du kanskje forventer spiller disse parameterne de samme rollene de gjør i dojo.create:

var nav = dojo.byId ("nav"), p = dojo.query ("p") [0]; dojo.place (nav, p, "after"); // beveger 'nav' til høyre etter 'p' i DOM

Etter trenden med så mange Dojo DOM-metoder, er det en NodeList metode motpart:

dojo.query ("p"). sted (dojo.body (), "first");

Så er det dojo.clone. Mens det vil klone mer enn bare DOM node strukturer, det er det vi skal bruke det for akkurat nå: Hvis du overfører denne metoden en referanse til en DOM node, vil den klone eller kopiere den noden og alle sine barn. Dette vil duplisere vår eksempel navigasjon ul, og legg kopien øverst i dokumentet:

var u2 = dojo.clone (dojo.byId ("nav")); dojo.attr (u2, "id", "nav2"); dojo.place (u2, dojo.body (), "first");

Du kan bruke dojo.clone å klone andre JavaScript-objekter også.

var o1 = one: "one", o2 = dojo.clone (o1); o1 === o2; // falsk

Deretter er det NodeList metode adoptere. Jeg må innrømme at mens dette er en interessant metode, er jeg fortsatt ikke helt sikker på hvor jeg ville bruke den. Her er hva det gjør: det tar to parametre: en valgstreng eller DOM-node (r), og en valgfri posisjonsverdi, som har de samme alternativene som dojo.place ("Sist" som standard, etc.). Og så adoptere Metoden vil ta elementet / elementene du passerte inn som den første parameteren (eller elementene i DOM som samsvarer med väljeren) og plassere dem i forhold til det første elementet i NodeList. Deretter returnerer den de adopterte elementene som en ny NodeList. Så, på vår eksempelside, erstatter dette alle de første barnets barn

med avsnittet:

dojo.query ("li"). adopter ("p", "bare");

Så det er det.

Iterating over noder

Siden NodeLists ligner på arrayer, du kan bare bruke en vanlig til loop for å iterere over dem. derimot, NodeLists har a for hver metode:

dojo.query ("li"). forEach (funksjon (element, indeks, arr) // gjør din ting);

Som du kan se, tilbakekaller funksjonen tre parametere, elementet, indeksen og selve arrayet. Hvis du vil sløyfe over andre arrays, kan du bruke dojo.forEach på samme måte, bare passerer den gruppen som den første parameteren:

dojo.forEach ([1,2,3], funksjon (element) // act here);

for hver returnerer NodeList eller array som du startet med. Hvis du vil returnere et endret system, kan du bruke kart metode. Uansett hva du kommer tilbake fra tilbakeringingsfunksjonen, vil være i arrayet (eller NodeList) returnert på slutten.

dojo.map ([1,2,3], funksjon (element) returelement * element;); // [1, 4, 9]

Noe knyttet til dette er filtrering noder ut av en NodeList, med filter.Du kan bare passere denne metoden en CSS-velg, og bare elementer som samsvarer med den, blir holdt.

dojo.query ( "LI") filter ( "heve.."); // NodeList med en

derimot, filter kan også ta en tilbakeringingsfunksjon som mottar tre parametere: gjeldende element, indeks og array. Hvis funksjonen returnerer ekte, elementet holdes; ellers er det utelatt. En ny NodeList av de holdte elementene returneres.

dojo.query ("li"). filter (funksjon (el) return dojo.query ("a", el) [0] .innerHTML === "Om";); // returnerer en NodeList som bare inneholder listeposten med teksten "Om"

Handily, det er også en dojo.filter versjon som tar en matrise som den første parameteren og tilbakeringingen som et sekund.

dojo.filter (["Nettuts", "Psdtuts", "Phototuts"], funksjon (el, idx, arr) return el.slice (0,1) === "P"); // ["Psdtuts", "Phototuts"]

Arbeider med hendelser

La oss nå snakke om hendelser med Dojo. Og vi starter med DOM-hendelser, siden det er vanligvis det du bruker. la oss si at vi vil gjøre noe når vår

er klikket. Det er flere måter å gjøre dette på, og vi diskuterer dem alle her.

Først må vi anta at vi håndterer en hendelse som oppstår på et element eller elementer som vi har hentet med dojo.query. Vi kunne bruke ved trykk metode som NodeList barbere:

dojo.query ("h1"). onclick (function () alert ("Learning Dojo"););

Men dette er egentlig bare en "syntaktisk sukker" metode. Bak kulissene bruker Dojo den koble NodeList metode:

dojo.query ("h1") .koble ("onclick", funksjon (e) alert ("learning Dojo"););

Denne metoden overfører faktisk jobben til en annen metode, dojo.connect; du vil nok bruke denne metoden direkte når du har en enkelt DOM-node som du vil håndtere en hendelse på:

var h = dojo.query ("h1") [0]; // eller dojo.byId ("some_element"), for eksempel dojo.connect (h, "onclick", funksjon () alert ("learning Dojo"););

Legg merke til hvordan hver gang vi "flytter opp et lag", legger vi til en annen parameter i begynnelsen av metallsamtalen.

La oss snakke kort om å koble sammen hendelser. Når du bruker metodene som er oppgitt på en NodeList For eksempel, det er for øyeblikket ingen enkel måte å koble fra hendelsene. Dette er fordi dojo.connect returnerer et håndtak som brukes i frakobling av hendelser. For å koble fra en hendelse, send håndtaket til dojo.disconnect:

var h = dojo.query ("h1") [0], håndtere = dojo.connect (h, "onclick", funksjon () alert ("learning Dojo"); dojo.disconnect (handle););

Hvis du setter det i konsollen, klikker du på

, du får et varsel. Deretter vil håndtereren bli frakoblet, slik at etterfølgende klikk ikke vil gjøre noe.

Hvis du vil lage dine egne hendelser (eller ved å bruke Dojos terminologi, dine egne emner), kan du bruke Dojos publisere og abonnere metoder. Hvis du er kjent med hvordan andre pub / sub-systemer fungerer, har du ingen problemer med dette.

For å abonnere på et emne, bare pass navn på emnet og funksjonen som skal vises når emnet blir publisert:

dojo.subscribe ("myTopic", funksjon (data, moreData) alert (data); console.log (moreData););

Deretter kan du publisere emnet nesten like enkelt:

dojo.publish ("myTopic", ["noen data", "noen flere data"]);

Legg merke til at alle data du vil overføre til funksjoner som abonnerer på emnet ditt, blir satt inn i en matrise og bestått som en andre parameter.

Konklusjon

I denne opplæringen har vi dekket sannsynligvis 90% av DOM-funksjonaliteten som er bygd inn i Dojo-basen filen vi kommer fra Googles CDN. Det er imidlertid mer funksjonalitet å diskutere. Før vi kommer dit, må vi imidlertid lære om å trekke i Dojos ekstra funksjonalitet. Vi diskuterer det og mye mer i neste episode av denne serien.

Har du noen forespørsler om ting du vil lære å gjøre i Dojo? Jeg leser alltid kommentarene, så du vet hva du skal gjøre!

Kode