Share
La oss gå med en hands-on tilnærming i dag. Vi skal skrive en liten kodebit i jQuery og deretter overføre den til flere forskjellige biblioteker. Utenfor den delen vil vi se på hvordan å implementere noen grunnleggende, nødvendig funksjonalitet i hvert av disse bibliotekene. Høres morsomt ut? La oss dykke inn!
JavaScript-rammer er en velsignelse når du har mange ideer til å bli en funksjonell, ren kode. Og med meteorisk økning av webapplikasjoner ved hjelp av AJAX-teknologi, er rammebetingelser som jQuery nødvendige for å redusere tiden du bruker til å implementere den nødvendige funksjonaliteten. Og ser deg rundt, se jQuery dette og jQuery det med lite eller ingen omtale av andre rammer. Faktum er at det er massevis av andre rammer som er like elegante som jQuery. I dag skal vi ta en titt på to rammer som lover å gjøre skrive kode enklere. Legg merke til at jeg bruker ordene bibliotek, rammeverk og verktøykasse utveksling. Jeg kommer ikke til å gå inn i semantikk og heller ikke du. Hver av disse bibliotekene prøver å oppnå forskjellige ting. Vi skal bare se på delene der de tilsiktede funksjonene overlapper.
Utenfor esoteriske og / eller dedikerte apper kan de fleste JavaScript-kodene bli brutt ned i biter som tar seg av følgende funksjonalitet:
En JavaScript-utvikler løper inn i dette problemet før eller senere: hans uberørte kode vil bare ikke løpe. Han har feilsøkt koden igjen og igjen, men til ingen nytte. Problemet er at koden bare er plassert øverst på siden. Når skriptet blir utført, eksisterer ikke de elementene han refererer til i sin kode i DOM som fører til disse feilene.
Husk at skriptanrop er synkron. Dette betyr at når en nettleser ser en skriptkode, slutter den å laste inn alt annet før skriptene lastes inn. Dette er i sterk kontrast til den generelle lastemekanismen der andre gjenstander ofte lastes asynkront.
Du kan alltid jobbe rundt dette ved bare å plassere koden nederst på siden, men du vet aldri. Med dette i bakhodet gir de fleste biblioteker en DOM-klarfunksjon for å sikre at koden kun utføres etter at DOM er klar til å låse n'last, men før bildene er fullstendig lastet.
Med rå JavaScript, ser du på noe som dette.
window.onload = someFunction;
Du vil åpenbart få tilgang til bestemte elementer og manipulere dem på en eller annen måte. Dessverre er IE ganske fin og kan ødelegge koden din. For å la utviklere skrive bedre kode, gir hvert bibliotek en kryssbrowser-metode som lar deg få tilgang til et bestemt element. De fleste biblioteker bruker CSS-stilvelger til null på deres målelementer for å gjøre lærekurven kortere og enda viktigere, renere ser kode.
Uten et rammeverk, må du gjøre dette:
Accentsconagua
var elem = document.getElementById ('header'); var io = document.getElementsByTagName ('input'); Selvfølgelig, når du har oppnådd elementet, ønsker du å utføre en del operasjon. Dette inkluderer å legge til eller fjerne en klasse, bytte synlighet, endre dimensjoner, redigere innholdet og så videre. Som alltid skriver alt dette i rå JavaScript kan være smertefullt. Hvert av disse bibliotekene gir wrapper-funksjoner for å gjøre alt det ovenfor nevnte arbeidet og mye mer.
Med rå JavaScript vil koden din se slik ut:
. Document.getElementById ( "title") innerhtml = "Title";
Ofte vil du direkte bytte noder i DOM. Du vil kanskje opprette et nytt innpakningsobjekt som du vil sette din siste Twitter-status på, eller du vil kanskje fjerne et div-element for en e-postprogram du skriver. I hvert av disse tilfellene vil du ønske å manipulere DOM effektivt, og alle disse bibliotekene gir metoder for å gjøre det på en ren måte.
Hvis du legger til et element, vil dette ta mye kode med rå JS.
var myElement = document.createElement ("Sometext"); document.all.myBody.appendChild (myElement); Hendelser er byggesteinene i en hvilken som helst applikasjon og en av de mer peskier delene av kryssleserskripting. Saken er, W3C definerer en måte, og IE gjør sin egen ting. For å komme over dette, gir alle disse bibliotekene måter å legge ved eller unattach selv behandlere til bestemte hendelser av elementet.
Hooking opp hendelser i rå JavaScript.
element.addEventListener ( 'klikk', doSomething, false)
Native JavaScript ved hjelp av XHR-objektet er kjedelig å skrive og feilsøke. For å la utviklere skrive kode enklere, utvider hver av disse rammene de kjedelige detaljene for å implementere en AJAX-forespørsel bak en enkel funksjonsanrop med metoder for å ringe når forespørselen lykkes eller feiler.
Jeg skal ikke engang prøve å legge inn noen kode for å gjøre AJAX-forespørsel med rå JS. I stedet bør du se på Jeffres utmerkede screencast. Kort fortalt ser vi hvordan et rammeverk kutter ned koden din drastisk.
Ingenting fancy egentlig; vi vil bygge en enkel demo. Markeringen ser slik ut:
Netto Tuts Dette er noen eksempler tilfeldig tekst. Klikk på ordet tilfeldig for å endre DOM ved å opprette et nytt element og legge det til det nåværende innholdet.
Vi har litt tekst i et p-element. Vi har ordet tilfeldig innpakket i et spenningselement med en ID av maintrigger. Hver gang et element elementet med en ID for maintrigger klikkes, må et nytt div-element legges til avsnittet elementet som inneholder teksten "klikket". Denne enkle demoen berører alle grunnleggende funksjonalitetskravene, inkludert tilgang til elementer, tilkobling av hendelser og tilføyende elementer, unntatt AJAX-abstraksjon, og lar oss få en følelse for hvert bibliotek.
Før vi ser på de andre bibliotekene, er det best vi ser på hvordan jQuery lar oss gjøre hver av dem.
Ah, alt pervading jQuery. Det har vært snakk om byen blant webutviklere for en stund vet og med rette. jQuery prøver ikke å gjøre for mange ting. Du kommer ikke til å finne et dusin pluss widgets som følger med basen, eller måter å støtte klasser eller klassebaserte objekter på. jQuery fokuserer primært på DOM og jeg tror de har gjort en utmerket jobb.
Hvis arbeidet ditt hovedsakelig er DOM-relatert, er jQuery veien å gå. Syntaxen er blant de enkleste og mange ganger føles det å lese pseudokode enn den virkelige arbeidskoden. Samfunnet er stort og vennlig, og det er massevis av plugins du kan bare slippe inn for ekstra funksjonalitet. I tillegg er det UI-biblioteket hvis du vil legge til noen vanlige widgets til nettstedet ditt.
jQuery brukerbasen inkluderer:
Ekstremt imponerende hvis du spør meg.
Nå ser vi på hvordan jQuery lar oss redusere tiden vi bruker koding før vi ser på de andre rammene.
$ (dokument) .ready (funksjon () // Dine ting her);
Når du skriver jQuery-koden, er det viktig at du setter koden inn i denne delen. Her spør vi koden som skal utføres når DOM er klar til å bli manipulert. Du kan enten passere i et funksjonsnavn eller bare skrive all din kode inne i en anonym funksjon som i eksemplet ovenfor.
var container = $ ("# main"); var innlegg = $ (". post"); var overskrifter = $ ("h1"); Enkelt som det blir. Vi lager først en variabel for å holde en referanse til DOM-noden, siden vi ikke vil se etter det igjen og igjen. $ er et alias til jQuery navnerom. Vi sender bare inn id, klasse eller etikett av elementet, akkurat som du ville gjøre hvis du skrev en CSS-deklarasjon. Passerer i CSS-selektorer fungerer akkurat som du forventer. Eksempler som underarbeidet også.
$ ( "Span: har (a)") doSomething ();. $ ("ul li: nth-child (3)"). doSomething (); . $ ( "P: skjult") doSomething (); $ ("div"). attr ("klasse", "klikket"); $ ( "Div"). Html ("Hallo"); $ (" span "). addClass (" current "); Endring av elementegenskaper, innholdet eller klassene det har er ganske trivielt. Vi har bare tilgang til det nødvendige elementet og kaller den nødvendige funksjonen. De attr Metode lar oss endre et bestemt attributt for et element, html Metoden lar oss spesifisere HTML-innholdet og addClass Metoden trenger ingen forklaring.
$ ( "# Post"). Etter ("kommentarer"); $ (" p "). wrap (""); $ (". kommentar "). legge til ("Postet av"); Hvis du legger til elementer etter det angitte elementet, legger du til innhold i et element eller pakker det bestått elementet med et annet, er det like enkelt. Vi skaffer elementet og deretter ring funksjonen som passer best til vårt behov.
// Bruk av anonyme funksjoner $ ("# submit"). Bind ("klikk", funksjon (e) // Din kode her); // Passerer i et funksjonsnavn $ ("# submit"). Bind ("klikk", evHandler); Hooking hendelser er like lett. Vi får elementet og kaller bindingsfunksjonen. Det første argumentet er hendelsestypen og den andre er koden som skal utføres når hendelsen utløses. Du kan enten passere i funksjonens navn eller bare lage en anonym funksjon og plassere all koden inne i det.
$ .ajax (type: "GET", url: "test.html", suksess: funksjon (xhr) // Noen kode her, feil: funksjon (xhr) // Noen kode her $ .ajax type: "POST", url: "test.php", suksess: funksjon (xhr) // Noen kode her, feil: funksjon (xhr) // Noen kode her);
Du trenger bare 3 linjer for å lage en barebones AJAX-samtale. Angi typen forespørsel, nettadressen, og du er god til å gå. Suksess- og feilfunksjoner kan defineres for å angi hva som skjer hvis navnene deres oppstår.
For å oppnå ønsket funksjonalitet som er nevnt ovenfor, vil jQuery-koden din omtrentlig se ut slik:
$ ("# maintrigger"). klikk (funksjon () $ ("p"). etter ("klikket");); 3 linjer er alt som trengs. Vi velger de nødvendige elementene, kaller klikkfunksjonen, lager en anonym funksjon og legger til et div-element. Det høres mye mer komplisert enn det egentlig er.
Nå som vi har sett på jQuery-koden, kan vi utforske de andre bibliotekene.
Prototype er den store pappa av JavaScript-rammer. Det gir deg alle de hyggelighetene du kan forvente av et modent rammeverk og legger til litt mer. Det gir også en rekke biblioteksfunksjoner som kan hjelpe deg med å skrive pent abstraherte, objektorientert kode.
Prototypes brukerbase inkluderer:
Mange kjente, topp tier navn der. Som jeg sa, var prototypen rammevalg i lang tid før jQuery kom inn.
Nå som introduksjonene er gjort, la oss se hvordan Prototype kan hjelpe deg med å skrive bedre JavaScript.
document.observe ("dom: loaded", funksjon () // Din kode her); Ovenstående er Prototypes versjon av DOM klar. Det ser merkelig ut først hvis du kommer fra jQuery, men det er like enkelt. De observere Funksjon lytter til den overførte hendelsen for levetiden til dokumentet. Vi passerer bare i nødvendig hendelse og innhyller hele koden i en anonym funksjon, akkurat som med jQuery.
// Få tilgang til et element med et id med post $ ('post'); // Bruk CSS-valgmotor $$ ('. Kommentar'); $ gir et alias for document.getElementById metode. Det lar deg finne elementer med bestått ID-verdi.
$$ lar deg bruke CSS selectors i stedet. Det tar som noen argumenter et antall CSS-selektorer og returnerer det bestemte elementet eller en rekke av dem. På samme måte som med jQuery-seleksjonsmotoren kan du bruke alle slags falske CSS3-seleksorer, inkludert barnselektorer, attributtvelektorer og til og med pseudoklasser.
$ ( 'Innlegg') addClassName ( 'forfatter.'); $ ( 'Beholder') getWidth (.); $ ( 'Innlegg') skjule (.);
Prototype gir en rekke kraftige metoder for å arbeide med det returnerte elementet. Husk at du trenger tilgang til dette gjennom $ objektet. Hvilket betyr at du først må lagre referansen før du kan manipulere elementet på den måten du ser det.
Manipulering av et element er like enkelt som å oppnå en referanse til elementet og kalle den nødvendige funksjonen. Du kan gjøre mange ting fra å sette sttributes, å gjemme elementet.
$ ('post'). wrap ('div', 'id': 'container'); $ ( 'Innlegg'). Oppdatering ('Noen tilfeldig tekst
'); $ ('innlegg'). Sett inn ('div', 'Noen tilfeldig tekst
'); Den første metoden ombryter det bestått elementet med en beskrevet elementinnstilling, dens forskjellige egenskaper i prosessen. Oppdateringsfunksjonene erstatter innholdet i det bestått elementet med den vi ønsker. Sett inn innsatser vanlig tekst eller HTML-utklipp øverst, bunn, før eller etter elementet. Istedenfor å bruke separate metoder som føyer og etter Som i jQuery, trenger vi bare å spesifisere posisjonen og vi er ferdige.
// Bruk av anonyme funksjoner $ (btn) .observe ('klikk', funksjon (hendelse) // Din kode her); // Passerer i en funksjons navn $ (btn) .observe ('klikk', doSomething); Som jeg nevnte før, ble observere funksjonen lar deg koble hendelser til hendelsesbehandlere. Vi får først en referanse til elementet og deretter ringe til observere metode som passerer i eventets navn og funksjon som parametere. Hvis du ikke vil lage en egen funksjon bare for dette, er du alltid fri til å opprette en anonym funksjon og sette all koden inne der.
ny Ajax.Request ("test.html", metode: 'get', onSuccess: funksjon (transport) // Noen kode her, onFailure: funksjon (transport) // Noen kode her); ny Ajax.Request ("test.php", metode: 'post', onSuccess: funksjon (transport) // Noen kode her, onFailure: funksjon (transport) // Noen kode her); Prototype gir omfattende wrapper-funksjoner for å lage en AJAX-forespørsel. Jeg har vist det laveste nivået AJAX POST og GET forespørsler her. Det finnes massevis av andre spesialiserte metoder for AJAX-forespørsler, inkludert en automatisk oppdaterer.
For å oppnå ønsket funksjonalitet nevnt ovenfor, vil koden din omtrentlig se ut slik:
$ ("maintrigger"). observere ('klikk', funksjon (hendelse) $ ("text"). Sett inn ('klikket'); ); Fortsatt en 3-liner. Hva vi gjør er ligner jQuery-koden, syntaksen er bare annerledes. Vi bruker observere funksjon for å knytte klikkhendelsen til koden vi opprettet i en anonym funksjon. Vi legger bare inn litt tekst for å betegne at prosessen var en suksess.
Du ser at vi vanligvis gjør det samme som jQuery gjør, bare med en annen syntaks og noen forskjeller. Når arbeidet ditt ikke er DOM-sentrert, og du trenger riktig gjenstand for å utnytte dine ideer på riktig måte, er Prototype rammen å velge.
Mootools beklager ikke å være en enkel ramme for å lære. La oss innse det, websiden sier at det er et webapplikasjonsramme for mellomliggende til avanserte webutviklere. Ikke la dem lure deg. Det er et ekstremt elegant rammeverk som lar deg lage svært stilig JavaScript. Det fokuserer på JavaScript som helhet i stedet for bare DOM. Med det for øye, gir det en rekke funksjoner for å øke hastigheten på arbeidsflyten din, og utvider også DOM når det er mulig. Og akkurat som Prototype, inneholder den et klasseskap og arvssystem som burde få de som kommer fra C # eller Java, mer komfortabel med JavaScript.
Bedrifter som bruker MooTools inkluderer:
Et annet rammeverk med en meget imponerende brukerbase.
La oss nå se på hvordan MooTools gjør livet ditt som en JavaScript-utvikler enklere.
window.addEvent ('domready', funksjon () // Din kode her); Det kan se komplisert ut, men ikke frykt. Det ser bare annerledes ut. Vi legger til den allerede hendelsen i vinduene til den anonyme funksjonen. De addEvent La oss legge ved hendelser til deres håndtere. MooTools definerer hendelsen som vi benytter her. Som vanlig pakker vi all vår kode inn i en anonym funksjon og plasserer den inne. Der! Det var ikke så vanskelig, var det?
// Bruk $ -funksjonen $ ('someElement'); // Bruk CSS selectors $$ ("# main"); $$ ( "post."); $$ ( "h1"); Akkurat som med Prototype, kan du bruke $-funksjonen som et alias for direkte henting eller bruk $$-funksjonen til å bruke mye mer intuitive CSS-selektorer.
Hver av disse metodene returnerer enten et DOM-element eller en rekkevidde, avhengig av hvilken du bruker.
$ ( 'SomeElement) .hasClass (' klikket "); // Returnerer sant hvis elementet faktisk har den klassen $ ("someElement"). SetProperty ('class', 'clicked'); $ ( "SomeElement") tom (.); // Tømmer elementet av alle sine barn MooTools gir en rekke metoder for å manipulere et bestemt element, inkludert innstilling av attributter, endring av innholdet og så videre. Hvis du er interessert, bør du konsultere MooTools dokumentasjonen her
var someElement = nytt element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Injiser innholdet i someElement innenfor someOtherElement $ ("someElement"). Destroy (); // Fjerner element og alle sine barn fra DOM $ ('someElement'). Klone (). // Lag en kopi av elementet På samme måte som de fleste biblioteker, tilbyr MooTools en mengde funksjoner for å la oss endre DOM. Alt fra å legge til innhold for å helt fjerne en node fra DOM er inkludert.
// Bruk av anonyme funksjoner $ ('myElement'). AddEvent ('klikk', funksjon () // Noen kode); // Passerer i funksjonsnavnet $ ('myElement'). AddEvent ('klikk', doSomething); Som nevnt ovenfor bruker vi addEvent metode for å legge hendelsen til sin håndterer. Vi sender navnet på arrangementet til funksjonen og som vanlig kan vi velge mellom å lage en egen eller anonym funksjon for å sette koden inn i.
// En GET-forespørsel var myRequest = ny forespørsel (metode: 'get', url: 'test.html'); myRequest.send (); // En POST-forespørsel var myRequest = ny forespørsel (url: 'test.html'); myRequest.send (someData);
Å sette opp en AJAX-forespørsel er like lett. MooTools gir en robust Be om klasse som lar bruk gjøre POST eller GET AJAX forespørsler. Standardmetoden er POST, så det er ikke nødvendig å spesifisere om du gjør en forespørsel.
På samme måte som andre rammer støtter forespørselsklassen tilbakekallinger for suksess, feil og ferdigstillelse.
For å oppnå ønsket funksjonalitet nevnt ovenfor, vil koden din omtrentlig se ut slik:
$$ ("# maintrigger"). addEvent ("klikk", funksjon () var elem = $ ("tekst"); var someElement = nytt Element ('div'); someElement.appendText ("Clicked!"). injiser (elem, "etter");); Litt mer verbose enn de andre 2 implementasjonene, men her oppretter vi faktisk en div-node fra bunnen av og legger den til. Vi lagrer også en referanse til selve avsnittet. Deretter legger vi enkelt den nødvendige teksten i det nyopprettede elementet og legger det til DOM.
Mer verbose? Ja. Vanskeligere? Absolutt nei. Det er bare en annen form for koding.
$ ("# maintrigger"). klikk (funksjon () $ ("p"). etter ("klikket");); $ ("maintrigger"). observere ('klikk', funksjon (hendelse) $ ("text"). Sett inn ('klikket'); ); $$ ("# maintrigger"). addEvent ("klikk", funksjon () var elem = $ ("tekst"); var someElement = nytt Element ('div'); someElement.appendText ("Clicked!"). injiser (elem, "etter");); Alle disse kodestykkene gjør det samme. Bare i forskjellige stiler og med ulike mengder kontroll.
Denne artikkelen var på ingen måte ment å sammenligne disse rammene. I stedet ønsket jeg å ringe leserens oppmerksomhet til de andre levedyktige løsningene som er tilgjengelige utenfor jQuery. Det er ikke at jQuery er dårlig. Jeg elsker jQuery, det er et flott rammeverk, men det fokuserer først og fremst på DOM og DOM alene. Hvis du ønsker å skrive et webapplikasjon eller en gjengivelse eller noe annet, er det en prioritet å skape vedlikeholdsbar, utvidbar, ren kode. Det er for slike scenarier når det er mer fornuftig å ty til et annet rammeverk.
Jeg kunne velge bare to rammer i denne artikkelen på grunn av plassbegrensninger. Det finnes en rekke andre, like kraftige rammer som Dojo, YUI, Rico og GWT som også fortjener din oppmerksomhet.
Forhåpentligvis har jeg pikket interessert i alternative JavaScript-rammer i dag, og jeg håper virkelig at du skal eksperimentere med andre rammer. Gi oss beskjed om hvordan eksperimentet går i kommentarene. Glad koding!
