Share
Als u, net als veel andere Flash-ontwikkelaars, HTML5 voor uw web-apps wilt gebruiken, bent u vrijwel zeker jQuery tegengekomen. Het is een erg populaire JavaScript-bibliotheek die wordt gebruikt door een groot percentage van de meest bezochte websites, maar waar maakt u zich druk over, en moet u het gebruiken?
Als je AS3 kent, ken je eigenlijk al veel JavaScript; de twee talen lijken erg op elkaar. Dus het is verleidelijk om gewoon recht naar binnen te springen en te coderen - maar er zijn een paar belangrijke concepten die je eerst moet begrijpen. Een van deze is het idee van de DOM.
Wanneer u een webpagina laadt, verandert uw browser platte HTML in een boomachtige structuur van JavaScript-objecten, het DOM (Document Object Model). Het JavaScript-DOM lijkt dus sterk op de ActionScript-weergavelijst; en als je een Flex-ontwikkelaar bent, kun je de overeenkomsten zien tussen MXML en HTML.
In Flash hebben we toegang tot specifieke weergaveobjecten door naar hen te navigeren via de weergavelijst, zoals stage.getChildAt (3) .getChildAt (0), maar dit is behoorlijk belachelijk. In plaats daarvan geven we eerder vertoningsobjecten instantienamen (via de Flash IDE), of slaan we verwijzingen ernaar op in variabelen, arrays of objecteigenschappen, zoals dialogBox.okButton = new SimpleButton ().
In JavaScript, wij kon bouw onze DOM volledig op via JS en vertel de browser om deze te renderen, maar dit is een ongewone benadering; we zijn veel vaker geneigd om de DOM via HTML te definiëren, misschien met een kleine JS-augmentatie. JavaScript heeft dus verschillende methoden om toegang te krijgen tot elementen van de DOM.
De eenvoudigste hiervan is document.getElementById (). Als we een HTML-document hebben dat als volgt is gedefinieerd:
Voorbeeldpagina Hier is een voorbeeldtekst.
… dan document.getElementById ( "voorbeeld") zal ons het gemarkeerde naar voren brengen span object van de DOM. We zouden dan een seconde kunnen toevoegen p tag zoals zo:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Meer voorbeeldtekst die we tijdens de vlucht hebben gemaakt."); newPara.appendChild (newTextNode); document.getElementById ( "voorbeeld") appendChild (newPara).; Hiermee wordt de DOM bijgewerkt en gelijk gemaakt met wat zou zijn gemaakt als de oorspronkelijke HTML als volgt was:
Voorbeeldpagina Hier is een voorbeeldtekst.
Meer voorbeeldtekst die we on the fly hebben gemaakt.
Wat als je de twee wilde benaderen p elementen? We hebben er geen rechtstreeks toegang toe document.getElementById (), omdat ze geen ID hebben, maar we kunnen gebruiken document.getElementsByTagName ( "p") om een array te verkrijgen die beide bevat.
En als we een andere hadden gehad span, zoals dit:
Hier is een voorbeeldtekst.
Meer voorbeeldtekst die we on the fly hebben gemaakt.
Een tweede span.
Wij geven niet om deze paragrafen.
... en we wilden alleen de eerste twee verkrijgen p tags, we kunnen bellen document.getElementById ( "example1"). getElementsByTagName ( "p") gewoon om die twee op te halen - al deze DOM-functies werken op elk niveau in de boomstructuur, net zoals elke Flash DisplayObjectContainer heeft methoden zoals getChildAt ().
Dit is eenvoudig genoeg om te begrijpen, maar er zijn problemen. De eerste, u zult niet verbaasd zijn om te horen, betreft Internet Explorer.
Indrukwekkende Webs heeft een geweldige schets van Internet Explorer's getElementById () probleem. Kort gezegd, als je een HTML-element hebt zoals dit:
... dan, in de meeste browsers, document.getElementById ( "exampleName") zullen niet geef je de span in kwestie, maar in IE7 wel zullen. (Andere browsers zouden kunnen gebruiken document.getElementsByName ( "exampleName") [0] om dit te retourneren span.)
Dit betekent dat, om consistent te zijn in alle browsers (en ervan uitgaande dat we de HTML niet kunnen wijzigen), we code als volgt moeten schrijven:
var theSpan; if (usingIE) // Ik zal hier niet uitleggen hoe de browser te detecteren var temp = document.getElementById ("exampleId"); // dit kan een element hebben geretourneerd met de naam "exampleId", dus we moeten controleren: if (temp.getAttribute ("id") == "exampleId") theSpan = temp; else theSpan = document.getElementById ("exampleId"); Meer in het algemeen zouden we dat kunnen verpakken in een herbruikbare functie:
functie getElById (id) if (usingIE) var temp = document.getElementById (id); if (temp.getAttribute ("id") == id) return temp; else theSpan = document.getElementById (id); Super goed! Maar helaas zijn er zoveel van deze irritante kleine verschillen; het zal je waarschijnlijk verbazen, als je afkomstig bent van een gewone Flash-achtergrond, waarbij "compatibiliteitsprobleem" in het algemeen betekent dat de Flash Player een beetje traag is op bepaalde platforms.
jQuery lost dit op. Het documenteert de scheuren tussen verschillende browsers met zijn eigen set functies, dus als de browser van de gebruiker minstens zo nieuw is als IE6, kan uw code een consistente interface hebben.
Dat is niet de enige manier waarop jQuery JavaScript eenvoudiger maakt ...
Laten we teruggaan naar dit HTML-fragment en aannemen dat we het gemarkeerde willen ophalen p elementen uit de DOM:
Hier is een voorbeeldtekst.
Meer voorbeeldtekst die we on the fly hebben gemaakt.
Een tweede span.
Wij geven niet om deze paragrafen.
Met jQuery kunnen we gewoon schrijven:
jQuery ("# example1 p") Dat is alles wat we nodig hebben! #voorbeeld 1 zegt: "haal het element met een ID van voorbeeld 1"en p zegt "haal alle p elementen die kinderen van dat element zijn. "Het retourneert een" jQuery-object ", een JavaScript-object dat de twee bevat p elementen zelf van de JS DOM, plus enkele extra eigenschappen en methoden die specifiek zijn voor jQuery.
We kunnen het nog korter maken, door het te vervangen jQuery met $ - er is hier geen mysterie; $ is slechts een korte variabelenaam. Vergelijk het met native JavaScript-code:
// normale JS, zonder compatibiliteit tussen browsers: document.getElementById ("example1"). getElementsByTagName ("p") // jQuery, met geïntegreerde cross-browsercompatibiliteit: $ ("# example1 p") Het is niet alleen korter, het is consistent met CSS, waardoor het gemakkelijk op te halen is. We kunnen precies hetzelfde gebruiken keuzeschakelaar als in onze jQuery () oproep om deze specifieke paragrafen in een CSS-stylesheet in te richten:
# example1 p color: red
Dat is slechts een heel eenvoudig voorbeeld; Ik ga niet in detail treden, maar ik ben er zeker van dat je het voordeel kunt zien van het kunnen gebruiken van dezelfde selectors in zowel CSS als jQuery.
Ik heb gezegd dat de jQuery-objecten zijn geretourneerd door een $ () oproep had aanvullende methoden en eigenschappen. Deze geven u een eenvoudige syntaxis voor het schrijven van andere veelvoorkomende stukjes code.
We kunnen bijvoorbeeld een muisklik-gebeurtenislistener en -handlerfunctie aan beide toevoegen p elementen zoals:
$ ("# example1 p"). klik (functie () alert ("U hebt een alinea aangeklikt!");); Of je zou ze allemaal onzichtbaar kunnen maken:
$ ("# example1 p"). hide (); Of u kunt wat meer algemeen JavaScript op hen gebruiken:
var allText = ""; $ ("# example1 p"). each (function () allText + = $ (this) .text ();); In beide gevallen biedt jQuery een eenvoudige, korte, consistente manier van schrijven. Het betekent dat het sneller is om code van uw hoofd naar de browser te krijgen - en niet alleen omdat het minder tekens vereist.
Omdat Flash zijn oorsprong vindt in animatie, zijn we eraan gewend dat er voldoende ingebouwde tweening-mogelijkheden zijn - zowel in de Flash IDE als in de Tween klasse, om nog maar te zwijgen over de verschillende beschikbare tweeningbibliotheken.
JavaScript is anders; animatie is geen intrinsiek onderdeel van het platform. Maar kleine tweens en overgangen zijn verwachte delen van de gebruikersinteractie van de moderne webapp: als ik een nieuw commentaar toevoeg op een thread, schuift het op zijn plaats; als ik een artikel uit mijn winkelmandje verwijder, knippert het rood en verdwijnt het. Zonder deze zien apps er ongepolijst uit.
jQuery voegt deze kleine overgangen toe.
Laten we bijvoorbeeld zeggen dat we een van de bovengenoemde alinea's willen laten vervagen wanneer erop wordt geklikt. Gemakkelijk:
$ ("# example1 p"). klik (function () $ (this) .fadeOut ();); Niets aan! En je kunt een a passeren looptijd en Bel terug naar de Fadeout () functie, als u niet van de standaardwaarden houdt.
Voor iets krachtigers kunnen we de animeren () methode. Dit is in essentie het equivalent van een tween; geef het een aantal CSS-eigenschappen en -waarden door om te animeren naar, een duur, een type verlaging en een callback, en het zorgt voor alles voor u.
Het is niet echt Greensock, maar het is veel handiger dan deze effecten helemaal zelf te schrijven en ideaal voor web-app-interfaces.
Over wat gezegd ...
HTML heeft een paar UI-componenten ingebouwd, natuurlijk: knoppen, tekstvelden, enzovoort. HTML5 definieert een paar nieuwe, zoals een pop-up kalenderkiezer en een kleurkiezer (hoewel deze momenteel alleen worden ondersteund in Opera).
Maar dit is op zich niet genoeg om een volledige, moderne webapp-interface te vormen. Er is niets om tabbladen binnen een pagina, of een voortgangsbalk, of zelfs een eenvoudig dialoogvenster (buiten alert () en prompt ()).
jQuery UI, een optionele bibliotheek die bovenop jQuery wordt gebouwd, voegt deze extra widgets toe, met methoden en gebeurtenissen die consistent zijn met de gebruikelijke jQuery-syntaxis. Zie het als een JavaScript-equivalent voor de AS3 MinimalComps van Keith Peters. De demopagina laat het beter zien dan ik het kan uitleggen.
Elke widget kan aangepaste thema's ondersteunen, zodat u een enkele skin kunt maken die bij uw site past en deze op elk onderdeel kunt toepassen, waardoor het uiterlijk in één keer kan worden gewijzigd. Nogmaals: consistentie! Bovendien kunt u UI-gerelateerde effecten toepassen op andere elementen; het voor de gebruiker mogelijk maken om een DOM-element te verslepen of de grootte ervan te wijzigen, of klik en sleep een vak rond een groep elementen om ze te selecteren voor inzending.
De compatibiliteit tussen browsers, eenvoudige syntaxis, tween-functies en UI-elementen zijn in mijn ogen de belangrijkste voordelen van jQuery voor gewone JS. Er zijn echter nog andere redenen om het leuk te vinden:
Dus waarom zou het niet gebruik je jQuery? Zoals met de meeste technologische keuzes, is het een kwestie van ervoor zorgen dat u de juiste tool voor de klus gebruikt. Als u een eenvoudige DOM-structuur hebt, of geen fancy animaties en overgangen nodig hebt, of voornamelijk de canvas om je interface te maken, in plaats van widgets, is jQuery waarschijnlijk niet nodig.
Als u al een of meer JavaScript-bibliotheken gebruikt - Dojo, MooTools, YUI, enz. - zult u waarschijnlijk merken dat u de functionaliteit van jQuery niet nodig hebt bovenop wat zij bieden. Maar mijn doel in dit artikel is niet om u te proberen te verkopen aan een bepaalde bibliotheek boven een andere.
Ik hoop dat dit artikel heeft geholpen om uit te leggen wat het probleem is van jQuery, vooral als je afkomstig bent uit de wereld van AS3 en Flash. Als je het wilt leren, bekijk dan de jQuery-tag op Nettuts + - jQuery voor Absolute Beginners is een goede plek om te beginnen.
Laat het me weten als je nog vragen hebt!
