Share
Se tu, come molti sviluppatori Flash, stai cercando di utilizzare HTML5 per le tue app Web, quasi sicuramente troverai jQuery. È una libreria JavaScript molto popolare, utilizzata da una grande percentuale dei siti Web più visitati, ma qual è il problema, e dovresti usarlo?
Se conosci AS3, in pratica conosci già un sacco di JavaScript; le due lingue sono molto simili. Quindi è forte la tentazione di passare direttamente al codice, ma ci sono alcuni concetti importanti che devi capire prima. Una di queste è l'idea del DOM.
Quando si carica una pagina Web, il browser trasforma HTML in una struttura ad albero di oggetti JavaScript denominata DOM (Document Object Model). Il DOM JavaScript, quindi, è molto simile all'elenco di visualizzazione di ActionScript; e se sei uno sviluppatore Flex, sarai in grado di vedere le somiglianze tra MXML e HTML.
In Flash, possiamo accedere a specifici oggetti di visualizzazione navigandoci attraverso l'elenco di visualizzazione, ad esempio stage.getChildAt (3) .getChildAt (0), ma questo è abbastanza ridicolo. Invece, è più probabile che forniamo nomi di istanze di oggetti di visualizzazione (tramite l'IDE Flash) o memorizziamo riferimenti ad essi in variabili, matrici o proprietà di oggetti, come dialogBox.okButton = new SimpleButton ().
In JavaScript, noi poteva costruisci il nostro DOM interamente attraverso JS e poi dica al browser di renderlo, ma questo è un approccio insolito; siamo molto più propensi a definire il DOM tramite HTML, magari con un piccolo aumento di JS. Quindi, JavaScript ha vari metodi per accedere agli elementi del DOM.
Il più semplice di questi è document.getElementById (). Se abbiamo un documento HTML definito in questo modo:
Pagina di esempio Ecco alcuni esempi di testo.
… poi document.getElementById ( "esempio") ci porterà l'evidenziata campata oggetto dal DOM. Potremmo quindi aggiungere un secondo p tag in questo modo:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Altro testo di esempio che abbiamo creato al volo."); newPara.appendChild (newTextNode); document.getElementById ( "esempio") appendChild (newPara).; Questo aggiornerebbe il DOM, rendendolo equivalente a ciò che sarebbe stato creato se l'HTML originale fosse il seguente:
Pagina di esempio Ecco alcuni esempi di testo.
Altro esempio di testo che abbiamo creato al volo.
Cosa succede se si desidera accedere ai due p elementi? Non possiamo accedervi direttamente con document.getElementById (), dal momento che non hanno ID, ma possiamo usare document.getElementsByTagName ( "p") per ottenere un array contenente entrambi.
E se avessimo avuto un altro campata, come questo:
Ecco alcuni esempi di testo.
Altro esempio di testo che abbiamo creato al volo.
Una seconda campata.
Non ci importa di questi paragrafi.
... e volevamo solo ottenere i primi due p tag, potremmo chiamare document.getElementById ( "esempio1"). getElementsByTagName ( "p") solo per recuperare questi due - tutte queste funzioni DOM funzionano a qualsiasi livello nella struttura ad albero, proprio come ogni Flash DisplayObjectContainer ha metodi come getChildAt ().
Questo è abbastanza semplice da capire, ma ci sono problemi. Il primo, potresti non essere sorpreso di sentire, riguarda Internet Explorer.
Impressionante Web ha un grande profilo di Internet Explorer getElementById () problema. In sostanza, se hai un elemento HTML come questo:
... quindi, nella maggior parte dei browser, document.getElementById ( "exampleName") volontà non darti il campata in questione, ma in IE7, it volontà. (Altri browser potrebbero usare document.getElementsByName ( "exampleName") [0] per restituire questo particolare campata.)
Ciò significa che, per essere coerenti tra i browser (e supponendo che non possiamo cambiare l'HTML), avremo bisogno di scrivere un codice come questo:
var theSpan; if (usingIE) // Non spiegherò come rilevare il browser qui var temp = document.getElementById ("exampleId"); // questo potrebbe aver restituito un elemento con un nome di "exampleId", quindi dobbiamo verificare: if (temp.getAttribute ("id") == "exampleId") theSpan = temp; else theSpan = document.getElementById ("exampleId"); Più in generale, potremmo integrarlo in una funzione riutilizzabile:
function getElById (id) if (usingIE) var temp = document.getElementById (id); if (temp.getAttribute ("id") == id) return temp; else theSpan = document.getElementById (id); Grande! Ma sfortunatamente ci sono così tante di queste irritanti piccole differenze; probabilmente ti sorprenderà, se provieni da uno sfondo flash diretto, dove "problema di compatibilità" in genere significa che Flash Player è un po 'lento su determinate piattaforme.
jQuery risolve questo. Stampa le fessure tra i diversi browser con il proprio set di funzioni, quindi se il browser dell'utente è almeno nuovo come IE6, il tuo codice può avere un'interfaccia coerente.
Questo non è l'unico modo in cui jQuery rende JavaScript più semplice ...
Torniamo a questo frammento di codice HTML e supponiamo di voler recuperare l'evidenziato p elementi dal DOM:
Ecco alcuni esempi di testo.
Altro esempio di testo che abbiamo creato al volo.
Una seconda campata.
Non ci importa di questi paragrafi.
Con jQuery, possiamo semplicemente scrivere:
jQuery ("# esempio1 p") Questo è tutto ciò di cui abbiamo bisogno! #Esempio 1 dice "ottieni l'elemento con un ID di Esempio 1" e p dice "prendi tutto il p elementi che sono figli di quell'elemento ". Restituisce un" oggetto jQuery ", che è un oggetto JavaScript che contiene i due p elementi stessi dal DOM JS, oltre ad alcune proprietà e metodi aggiuntivi specifici per jQuery.
Possiamo renderlo ancora più corto, sostituendo jQuery con $ - non c'è nessun mistero qui; $ è solo un nome di variabile breve. Confrontalo con il codice JavaScript nativo:
// JS regolare, senza compatibilità cross-browser: document.getElementById ("example1"). getElementsByTagName ("p") // jQuery, con compatibilità cross-browser integrata: $ ("# esempio1 p") Non è solo più breve, è coerente con i CSS, il che lo rende facile da imparare. Potremmo usare lo stesso identico selettore come dentro il nostro jQuery () chiama per definire questi paragrafi specifici in un foglio di stile CSS:
# example1 p color: red
Questo è solo un esempio molto semplice; Non ho intenzione di entrare nei dettagli, ma sono sicuro che puoi vedere il vantaggio di poter utilizzare gli stessi selettori sia in CSS che in jQuery.
Ho menzionato che gli oggetti jQuery restituiti da a $ () la chiamata aveva ulteriori metodi e proprietà. Questi ti danno una sintassi semplice per scrivere altri pezzi di codice comuni.
Ad esempio, potremmo aggiungere un listener di eventi del mouse e una funzione di gestore per entrambi p elementi come questi:
$ ("# esempio1 p"). click (function () alert ("Hai fatto clic su un paragrafo!");); Oppure potresti renderli tutti invisibili:
$ ("# esempio1 p"). hide (); Oppure potresti eseguire un JavaScript più generale su di loro:
var allText = ""; $ ("# esempio1 p"). each (function () allText + = $ (this) .text ();); In ogni caso, jQuery fornisce un modo di scrivere semplice, breve e coerente. Significa che è più veloce ottenere codice dalla tua testa al browser e non solo perché richiede meno caratteri.
Poiché Flash ha le sue radici nell'animazione, siamo abituati ad avere un sacco di funzionalità di tweening integrate - sia nell'IDE Flash che nel Gemello classe, per non parlare delle varie librerie di tweening disponibili.
JavaScript è diverso; l'animazione non è una parte intrinseca della piattaforma. Ma piccole interpolazioni e transizioni sono previste parti dell'interazione dell'utente della moderna web app: se aggiungo un nuovo commento su un thread, scorre in posizione; se rimuovo un articolo dal mio carrello, lampeggia in rosso e scompare. Senza questi, le app sembrano non lucidate.
jQuery aggiunge queste piccole transizioni.
Ad esempio, supponiamo di voler rendere sfumato uno dei paragrafi sopra menzionati quando vengono cliccati. Facile:
$ ("# esempio1 p"). click (function () $ (this) .fadeOut ();); Niente da fare! E tu puoi passare a durata e richiama al dissolvenza() funzione, se non ti piacciono i valori predefiniti.
Per qualcosa di un po 'più potente, possiamo usare il animare() metodo. Questo è essenzialmente l'equivalente di un'interpolazione; passare un set di proprietà e valori CSS per animare verso, una durata, un tipo di andamento e una richiamata, e si prende cura di tutto ciò che è per te.
Non è esattamente Greensock, ma è molto più conveniente rispetto alla scrittura di questi effetti da zero e ideale per interfacce di app web.
A proposito di ...
HTML ha alcuni componenti UI integrati, ovviamente: pulsanti, campi di testo e così via. HTML5 ne definisce alcuni nuovi, come un raccoglitore di calendari pop-up e un picchetto di colori (anche se al momento sono supportati solo in Opera).
Ma questi non bastano, da soli, a creare un'interfaccia web completa e moderna. Non c'è nulla per gestire le schede all'interno di una pagina, o una barra di avanzamento, o anche una semplice finestra di dialogo (al di fuori di mettere in guardia() e richiesta()).
L'interfaccia utente di jQuery, una libreria opzionale costruita su jQuery, aggiunge questi widget aggiuntivi, con metodi ed eventi coerenti con la solita sintassi jQuery. Consideralo come un equivalente JavaScript di AS3 MinimalComps di Keith Peters. La pagina demo lo mostra meglio di quanto possa spiegarlo.
Ogni widget può supportare temi personalizzati, così puoi creare una singola skin che si adatta al tuo sito e applicarla a ogni componente, rendendo possibile modificare il loro aspetto tutto in una volta. Di nuovo: coerenza! Inoltre, puoi applicare effetti relativi all'interfaccia utente ad altri elementi; rendere possibile all'utente di trascinare o ridimensionare un elemento DOM, oppure fare clic e trascinare una casella attorno a un gruppo di elementi per selezionarli per l'invio.
La compatibilità cross-browser, la sintassi semplice, le funzionalità di interpolazione e gli elementi dell'interfaccia utente sono i principali vantaggi di jQuery rispetto a JS nei miei occhi. Ci sono altri motivi per apprezzarlo, però:
Allora perché no usi jQuery? Come con la maggior parte delle scelte tecnologiche, è una questione di assicurarsi di utilizzare lo strumento giusto per il lavoro. Se hai una semplice struttura DOM, o non hai bisogno di animazioni e transizioni fantasiose, o stai usando principalmente la tela per rendere la tua interfaccia, piuttosto che i widget, jQuery probabilmente non è necessario.
Se stai già utilizzando una o più librerie JavaScript - Dojo, MooTools, YUI, ecc. - potresti scoprire che non hai bisogno della funzionalità di jQuery oltre a ciò che offrono. Ma il mio obiettivo in questo articolo non è quello di cercare di venderti su una libreria particolare sopra a qualsiasi altra.
Spero che questo articolo abbia contribuito a spiegare quale sia il problema principale di jQuery, in particolare se vieni dal mondo di AS3 e Flash. Se vuoi impararlo, controlla il tag jQuery su Nettuts + - jQuery per Absolute Beginners è un buon punto di partenza.
Fammi sapere se hai qualche domanda!
