Why bry seg med jQuery? A Guide for (tidligere) Flash Developers
Del
Del
28
Del
Dette Cyber mandag Envato Tuts + kurs vil være redusert til bare $ 3. Ikke gå glipp av.
Hvis du, som mange Flash-utviklere, ser på ved hjelp av HTML5 for dine web apps, vil du ganske sikkert ha kommet over jQuery. Det er en veldig populær Javascript-bibliotek, som brukes av en stor andel av de mest besøkte nettstedene - men hva er alt oppstyret om, og bør du bruke det
Bakgrunn
Hvis du vet? AS3, du i utgangspunktet vet mye om Javascript allerede; de to språkene er svært like. Så det er fristende å bare hoppe rett inn og kode - men det er noen viktige begreper som du må forstå først. En av disse er ideen om DOM.
Når du laster inn en nettside, blir din nettleser flat HTML i en trestruktur av Javascript objekter kalt DOM (Document Object Model). Javascript DOM, da, er svært lik den Action Vis liste; og hvis du er en Flex-utvikler, vil du være i stand til å se likhetene mellom MXML og HTML.
I Flash, kan vi få tilgang til bestemte visningsobjekter ved å navigere til dem gjennom listen display, som scenen. getChildAt (3) .getChildAt (0), men dette er ganske latterlig. I stedet er vi mer sannsynlig å gi visningsobjekter forekomstnavn (gjennom Flash IDE), eller lagre referanser til dem i variabler, matriser, eller objektegenskaper, som dialogBox.okButton = new Simple ().
i Javascript, vi kan Den enkleste av disse er document.getElementById (). Hvis vi har et HTML-dokument definert slik:! ... deretter document.getElementById ("eksempel") vil få oss den markerte span objektet fra DOM. Vi kunne deretter legge til en annen p tag som så: This ville oppdatere DOM, slik at det tilsvarer det ville ha blitt opprettet hvis den opprinnelige HTML var som følger: Hva om du ønsket å deretter få tilgang til de to p elementer Vi kan ikke få tilgang til dem direkte med dokumentet?. . getElementById (), siden de har ingen ID, men vi kan bruke document.getElementsByTagName ("p") for å oppnå en matrise som inneholder begge Og hvis vi hadde hatt en annen span, som dette: ... og vi ønsket bare å få tak i de to første p-koder, vi kan kalle document.getElementById ("mittnavn1") getElementsByTagName ("p") bare for å hente de to - alle disse DOM. funksjonene fungerer på alle nivå i trestrukturen, akkurat som hvordan hvert Flash Display har metoder som getChildAt (). Dette er enkelt nok å forstå, men det er problemer. Den første, kan du ikke bli overrasket over å høre, gjelder Internet Explorer. Imponerende Webs har en stor oversikt over Internet Explorer getElementById () problem. Egentlig, hvis du har en HTML-element som dette: ... så, i de fleste nettlesere, document.getElementById ("exampleName") vil ikke Dette betyr at for å være konsekvent på tvers av nettlesere (og forutsatt at vi ikke kan endre HTML), vi må skrive kode som dette: Mer generelt kan vi bryte det opp til en gjenbrukbar funksjon: Great! Men, dessverre, det er så mange av disse irriterende små forskjeller; det vil trolig overraske deg, hvis du kommer fra en rett-Flash bakgrunn, der "kompatibilitetsproblem" betyr vanligvis at Flash Player er litt treg på enkelte plattformer. jQuery løser dette. Det papirer gjennom sprekker mellom ulike nettlesere med sitt eget sett av funksjoner, så hvis brukerens nettleser er minst like ny som IE6, kan koden ha en konsistent grensesnitt. Det er ikke den eneste måten som jQuery gjør Javascript enklere ... La oss gå tilbake til denne bit med HTML, og antar vi ønsker å hente inn de markerte p elementer fra DOM: Med jQuery, kan vi bare skrive: Det er alt vi trenger! # mittnavn1 sier "få element med en ID for mittnavn1" og p sier "få alle p elementer som er barn av at element". Den returnerer en "jQuery objekt", som er en Javascript-objekt som inneholder de to p elementer selv fra JS DOM, pluss noen ekstra egenskaper og metoder som er spesifikke for jQuery. Vi kan gjøre det enda kortere fortsatt, ved å erstatte jQuery med $ - det er ingen hemmelighet her; $ Ligger bare en kort variabelnavn. Sammenlign det med morsJavaScript-kode: Det er ikke bare kortere, er det i samsvar med CSS, som gjør det lett å plukke opp. Vi kunne bruke nøyaktig samme velger Det er bare et veldig enkelt eksempel; Jeg har ikke tenkt å gå i detalj, men jeg er sikker på at du kan se fordelen av å kunne bruke de samme velgerne i både CSS og jQuery. Jeg nevnte at jQuery objekter som returneres av en $ () kaller hadde flere metoder og egenskaper. Disse gir deg en enkel syntaks for å skrive andre vanlige deler av koden For eksempel kunne vi legge et museklikk hendelse lytteren og handler funksjon til begge disse p elementer som så. Eller du kan gjøre dem alle usynlige: Eller du kan kjøre litt mer generell Javascript på dem. I hvert fall gir jQuery en enkel, kort, konsistent måte å skrive. Det betyr at det er raskere å få koden fra hodet til nettleseren -. Og ikke bare fordi det krever færre tegn Siden Flash har sine røtter i animasjon, vi er vant til det å ha rikelig med tweening som er innebygd i - både i Flash IDE og i Tween klassen, for ikke å nevne de ulike tweening bibliotekene tilgjengelig Javascript er annerledes;. Animasjonen er ikke en iboende del av plattformen. Men små tweens og overganger er forventet deler av brukermedvirkning av moderne web app: hvis jeg legger til en ny kommentar på en tråd, glir den på plass; hvis jeg fjerne et element fra min handlekurv, blinker det rødt og forsvinner. Uten disse, apps ser upolert. jQuery legger disse små overganger. For eksempel, la oss si at vi ønsker å gjøre noen av de nevnte paragrafer fade ut når de er klikket. Easy: Ikke noe til det.! Og du kan passere en varighet og tilbakeringing til fadeout () -funksjonen, hvis du ikke liker standardinnstillingene. For noe litt kraftigere, vi kan bruke animere () metoden. Dette er egentlig det samme som en tween; gi det et sett med CSS egenskaper og verdier å animere mot, en varighet, en type lettelser, og en tilbakeringing, og det tar vare på alt for deg. Det er ikke akkurat Greensock, men det er langt mer praktisk enn å skrive disse effektene fra bunnen av, og ideell for web app-grensesnitt. Speaking hvorav ... HTML har noen UI komponenter innebygd, selvfølgelig: knapper, tekstfelt, og så videre. HTML5 definerer noen nye, som en pop-up kalender velgeren og farge picket (men disse er foreløpig kun støttet i Opera). Men dette er ikke nok, på egen hånd, for å gjøre opp en full , moderne web app grensesnitt. Det er ingenting å håndtere faner på en side, eller en fremdriftslinje, eller en enkel dialogvindu (utenom alert () og rask ()). jQuery UI, en valgfri bibliotek bygge på toppen av jQuery, legger disse ekstra widgets, med metoder og hendelser som er i samsvar med den vanlige jQuery syntaks. Tenk på det som en Javascript tilsvarer Keith Peters 'AS3 MinimalComps. Demoen siden viser det seg bedre enn jeg kan forklare det. Hver widget kan støtte egendefinerte temaer, slik at du kan lage en enkelt hud som passer din side og bruke det til hver komponent, som gjør det mulig å endre sin Utseendet på en gang. Igjen: konsistens! Plus, kan du bruke UI relaterte effekter til andre elementer; gjør det mulig for brukeren å dra eller endre størrelsen på et DOM-element, eller klikk og dra en boks rundt en gruppe av elementer for å velge dem for innlevering. Så hvorfor vil ikke anbefale deg å bruke jQuery? Som med de fleste teknologivalg, er det et spørsmål om å sørge for at du bruker riktig verktøy for jobben. Hvis du har en enkel DOM struktur, eller ikke krever fancy animasjoner og overganger, eller er i hovedsak bruker lerret å gjengi grensesnitt, i stedet for widgets, er jQuery sannsynligvis ikke nødvendig. Hvis du er allerede bruker en eller flere Javascript-biblioteker - Dojo, MooTools, YUI, etc. - du kan godt oppleve at du ikke trenger jQuery funksjonalitet på toppen av hva de tilbyr. Men mitt mål i denne artikkelen er ikke å prøve å selge deg på en bestemt bibliotek over alle andre. Jeg håper denne artikkelen har bidratt til å forklare akkurat hva big deal handler om jQuery, spesielt hvis du kommer fra verden av AS3 og Flash. Hvis du ønsker å lære det, sjekk ut jQuery tagge over på Nettuts + - jQuery for Absolute Beginners er et bra sted å starte Gi meg beskjed hvis du har noen spørsmål
konstruere vår DOM helt gjennom JS og deretter fortelle leseren å gjengi det, men dette er en uvanlig tilnærming; vi er mye mer sannsynlig å definere DOM via HTML, kanskje med en liten JS styrking. Så, har Javascript ulike metoder for å bruke elementer av DOM.
≪! DOCTYPE html > < html > < head > < title > Eksempel Page < /title > < /head > < body > < div > < span id = "eksempel" > < p > Her er noen eksempel tekst. < /p > < /span > < /div > < /body > < /html >
Var newPara = document.createElement ("p"); Var newTextNode = document.createTextNode ("More eksempel tekst som vi opprettet på fly.");newPara.appendChild(newTextNode);document.getElementById("example").appendChild(newPara);
<! DOCTYPE html > < html > < head > < title > Eksempel Page < /title > < /head > < body > < div > < span id = "eksempel" > < p > Her er noen eksempel tekst. < /p > < p > More eksempel tekst som vi laget på sparket. < /p > < /span > < /div > < /body > < /html >
< div > < span id = "mittnavn1" > < p > Her er noen eksempel tekst. < /p > < p >. Mer eksempel tekst som vi laget på sparket < /p > < /span > < span id = "Eksempel 2" > < p >. En annen span < /p > < p > Vi bryr oss ikke om disse punktene. < /p > < /span > < /div >
Cross-Browser kompatibilitet
< span name = "exampleName" > < /span >
gi deg span i spørsmålet, men i IE7, det vil
. (Andre nettlesere kan bruke document.getElementsByName ("exampleName") [0] for å returnere denne span.)
Var theSpan; if (usingIE) {//Jeg vil ikke forklare hvordan å oppdage leseren her Var temp = document.getElementById ("exampleId"); //dette kan ha returnert et element med navnet "exampleId", så vi må sjekke: if (temp.getAttribute ("id") == "exampleId") {theSpan = temp; }} else {theSpan = document.getElementById ("exampleId");}
funksjon getElById (id) {if (usingIE) {var temp = document.getElementById (id); if (temp.getAttribute ("id") == id) {return temp; }} Else {theSpan = document.getElementById (id); }}
Easy Syntax
< div > < span id = "mittnavn1" > < p > Her er noen eksempel tekst. < /p > < p > More eksempel tekst som vi laget på sparket. < /p > < /span > < span id = "Eksempel 2" > < p > En annen span. < /p > < p > Vi bryr oss ikke om disse punktene. < /p > < /span > < /div >
jQuery ("# mittnavn1 p")
//vanlige JS, uten kryss-nettleser kompatibilitet: document.getElementById ("mittnavn1") getElementsByTagName ("p") //jQuery, med kryss-nettleser kompatibilitet bygget i. $ ( "# mittnavn1 p")
som inne våre jQuery () kaller å style disse avsnittene i en CSS-stilark:
# mittnavn1 p {color: red}
Mer enn bare Utvalg
$ ("# mittnavn1 p ") klikk (function () {alert. (" du klikket et avsnitt! ");});
$ (". # mittnavn1 p ") skjul ();
Var allText = ""; $ ("# mittnavn1 p") hver (function () {allText + = $ (denne). tekst ();});
Tweens og overganger
$ ("# mittnavn1 p") klikk (function () {$ (denne) .fadeOut ();});
UI Widgets
Andre grunner jQuery er så populære
< p> Den kryss-nettleser kompatibilitet, enkel syntaks, tween evner, og brukergrensesnittelementer er de viktigste fordelene med jQuery enn vanlig JS i mine øyne. Det er andre grunner til å like det, men:
Det er mye brukt, og har eksistert i seks år: det er ikke noen flash-in-the-pan "nye hotness" det er fortsatt uprøvd og kan bare dø ut i løpet av få måneder. Du kan stole på at det vil være rundt en stund
Det er et stort fellesskap rundt det: dette betyr at det er nok av tutorials og bøker og fora og folk til å lære av;. du kommer ikke til å bli fomle rundt i mørket
Dokumentasjonen er utmerket: seriøst, ta en titt;. det er veldig rent og full av eksempler og demoer
Det er enda alternative sett av dokumenter med ulike grensesnitt, hvis det er det du trenger (et annet eksempel på den store fellesskapet)
Det er åpen kildekode: samfunnet kan legge til det, og du kan hacke på det og lære av det
Paul Irish har to videoer bryte ned hva han lærte av bare kjører gjennom kilden
.!