Share
Andiamo con un approccio pratico oggi. Scriveremo un piccolo snippet di codice in jQuery e quindi lo porteremo su diverse librerie diverse. Al di fuori di questo blocco, vedremo come implementare alcune funzionalità di base necessarie in ciascuna di queste librerie. Sembra divertente? Tuffiamoci dentro!
I framework JavaScript sono un vantaggio quando hai molte idee da trasformare in un codice funzionale e pulito. E con l'aumento vertiginoso delle applicazioni Web che utilizzano la tecnologia AJAX, framework come jQuery sono necessari per ridurre il tempo impiegato per implementare la funzionalità richiesta. E guardandoti intorno vedi jQuery this e jQuery che con poca o nessuna menzione di altri framework. Il fatto è che ci sono un sacco di altri framework che sono altrettanto eleganti di jQuery. Oggi daremo un'occhiata a due quadri che promettono di semplificare la scrittura del codice. Prendi nota che uso le parole libreria, framework e toolkit in modo intercambiabile. Non entrerò nella semantica e nemmeno tu dovresti. Ognuna di queste librerie cerca di realizzare cose diverse. Daremo solo un'occhiata alle parti in cui le funzionalità previste si sovrappongono.
Al di fuori delle app esoteriche e / o dedicate, il codice JavaScript della maggior parte delle persone può essere suddiviso in blocchi che si prendono cura delle seguenti funzionalità:
Uno sviluppatore JavaScript si imbatte in questo problema prima o poi: il suo codice puro non verrà eseguito. Ha eseguito il debug del codice ancora e ancora ma inutilmente. Il problema è che il codice è appena posizionato nella parte superiore della pagina. Quando lo script viene eseguito, gli elementi a cui si riferisce nel suo codice non esistono nemmeno nel DOM che porta a questi errori.
Ricorda, le chiamate allo script sono sincrone. Ciò significa che quando un browser vede un tag script, cessa di caricare tutto il resto fino a quando gli script non vengono caricati. Ciò è in netto contrasto con il suo meccanismo di caricamento generale in cui altri oggetti vengono spesso caricati in modo asincrono.
Puoi sempre aggirare questo problema semplicemente inserendo il codice in fondo alla pagina ma non lo sai mai. Con questo in mente, la maggior parte delle librerie fornisce una funzione DOM ready per assicurarsi che il codice venga eseguito solo dopo che il DOM è pronto per bloccare il caricamento ma prima che le immagini siano completamente caricate.
Con JavaScript non elaborato, starai a guardare qualcosa di simile.
window.onload = someFunction;
Ovviamente vuoi accedere a elementi specifici e manipolarli in qualche modo. Sfortunatamente, IE è piuttosto schizzinoso e può infrangere il tuo codice. Per consentire agli sviluppatori di scrivere codice migliore, ciascuna libreria fornisce un metodo cross browser che consente di accedere a un elemento specifico. La maggior parte delle librerie usa selettori di stile CSS per azzerare i propri elementi di destinazione per rendere la curva di apprendimento più corta e molto più importante, un codice più pulito.
Senza un framework, dovresti fare questo:
Accentsconagua
var elem = document.getElementById ('header'); var io = document.getElementsByTagName ('input'); Ovviamente, una volta ottenuto l'elemento, vorrai eseguire qualche operazione. Ciò include l'aggiunta o la rimozione di una classe, l'attivazione della sua visibilità, la modifica delle sue dimensioni, la modifica dei suoi contenuti e così via. Come sempre scrivere tutto questo in JavaScript grezzo può essere doloroso. Ognuna di queste librerie fornisce funzioni wrapper per fare tutto il lavoro sopra annotato e molto altro ancora.
Con JavaScript non formattato, il tuo codice sarà simile al seguente:
. Document.getElementById ( "titolo") innerHTML = "Title";
Spesso, vorresti cambiare direttamente i nodi nel DOM. Potresti voler creare un nuovo oggetto wrapper a cui vuoi mettere il tuo stato recente di Twitter oppure rimuovere un elemento div per un'app email che stai scrivendo. In ognuno di questi casi, si vorrebbe manipolare il DOM in modo efficiente e tutte queste librerie forniscono metodi per farlo in modo pulito.
L'aggiunta di un elemento richiede molto codice con JS non elaborato.
var myElement = document.createElement ("someText"); document.all.myBody.appendChild (myElement); Gli eventi sono gli elementi costitutivi di qualsiasi applicazione e una delle parti più complesse dello scripting cross-browser. Il fatto è che W3C definisce un modo e IE fa le sue cose. Per finire, tutte queste librerie forniscono modi per attaccare o sganciare anche i gestori di eventi specifici dell'elemento.
Collegamento di eventi in JavaScript non elaborato.
element.addEventListener ( 'click', doSomething, false)
Il JavaScript nativo che usa l'oggetto XHR è noioso da scrivere e fare il debug. Per consentire agli sviluppatori di scrivere codice più facilmente ciascuno di questi framework astrae i noiosi dettagli dell'implementazione di una richiesta AJAX dietro una semplice chiamata di funzione con metodi da chiamare quando la richiesta ha esito positivo o negativo.
Non ho intenzione di provare a postare del codice per effettuare richieste AJAX con JS non elaborato. Invece dovresti guardare l'eccellente screencast di Jeffrey. A breve, vedremo come un framework riduce drasticamente il tuo codice.
Niente di speciale in realtà; costruiremo una semplice demo. Il markup sembra così:
Net Tuts Questo è un esempio casuale testo. Fai clic sulla parola casuale per modificare il DOM creando un nuovo elemento e aggiungendolo al contenuto corrente.
Abbiamo del testo all'interno di un elemento p. Abbiamo la parola casuale avvolto in un elemento span con un ID di maintrigger. Ogni volta che si fa clic su un elemento con l'elemento con un ID del maintrigger, un nuovo elemento div deve essere aggiunto all'elemento del paragrafo contenente il testo "cliccato". Questa semplice demo tocca tutti i requisiti di funzionalità di base tra cui l'accesso agli elementi, l'aggancio di eventi e gli elementi di accodamento tranne quello dell'astrazione AJAX e ci permetterà di avere un'idea di ogni libreria.
Prima di esaminare le altre librerie, è meglio esaminare come jQuery ci consente di eseguire ognuna di esse.
Ah, tutto pervadendo jQuery. E 'stato il discorso della città tra gli sviluppatori web per un po' di tempo e giustamente. jQuery non tenta di fare troppe cose. Non troverai più una dozzina di widget in bundle con la build di base o modi per supportare classi o oggetti basati su classi. jQuery si concentra principalmente sul DOM e penso che abbiano fatto un lavoro eccellente.
Se il tuo lavoro è principalmente correlato al DOM, jQuery è la strada da percorrere. La sintassi è tra le più semplici e molte volte sembra di leggere lo pseudocodice di un codice effettivo e funzionante. La community è grande e amichevole e ci sono un sacco di plugin che puoi inserire per funzionalità aggiuntive. Inoltre c'è la libreria dell'interfaccia utente se desideri aggiungere alcuni widget comuni al tuo sito.
La base utenti di jQuery include:
Estremamente impressionante se me lo chiedi.
Ora, vedremo come jQuery ci consente di ridurre il tempo impiegato per la codifica prima di esaminare gli altri framework.
$ (document) .ready (function () // I tuoi contenuti qui);
Quando scrivi il tuo codice jQuery è imperativo che tu inserisca il tuo codice all'interno di questa sezione. Qui chiediamo che il codice venga eseguito quando il DOM è pronto per essere manipolato. Puoi passare un nome di funzione o semplicemente scrivere tutto il tuo codice all'interno di una funzione anonima come nell'esempio sopra.
var container = $ ("# main"); var posts = $ (". post"); var headings = $ ("h1"); Semplice come si arriva. Per prima cosa creiamo una variabile per contenere un riferimento al nodo DOM poiché non vogliamo cercarlo ancora e ancora. $ è un alias per il jQuery namespace. Passiamo semplicemente l'id, la classe o il tag dell'elemento proprio come faresti se stessimo scrivendo una dichiarazione CSS. Passare in selettori CSS funziona esattamente come ti aspetteresti. Esempi come quelli qui sotto funzionano anche.
$ ( "Arco: ha (a)") doSomething ();. $ ("ul li: nth-child (3)"). doSomething (); . $ ( "P: nascosto") doSomething (); $ ("div"). attr ("classe", "cliccato"); $ ( "Div"). Html ("Ciao"); $ (" span "). addClass (" corrente "); Cambiare gli attributi di un elemento, i suoi contenuti o le classi che ha sono abbastanza banali. Accediamo semplicemente all'elemento richiesto e chiamiamo la funzione necessaria. Il attr metodo ci permette di cambiare un attributo specifico di un elemento, il html metodo ci permette di specificare il contenuto HTML e il addClass il metodo non ha bisogno di spiegazioni.
$ ( "# Post"). Dopo ("Commenti"); $ (" p "). wrap (""); $ (". comment "). append ("Pubblicato da"); Aggiungere elementi dopo l'elemento specificato, aggiungere contenuto all'interno di un elemento o avvolgere l'elemento passato con un altro è altrettanto semplice. Otteniamo l'elemento e poi chiamiamo la funzione più adatta alle nostre necessità.
// Utilizzo di funzioni anonime $ ("# submit"). Bind ("click", function (e) // Il tuo codice qui); // Passando al nome di una funzione $ ("# submit"). Bind ("click", evHandler); Collegarsi agli eventi è altrettanto facile. Otteniamo l'elemento e quindi chiamiamo la funzione bind. Il primo argomento è il tipo di evento e il secondo è il codice da eseguire quando viene attivato l'evento. Puoi passare il nome della funzione o semplicemente creare una funzione anonima e inserire tutto il tuo codice all'interno di essa.
$ .ajax (tipo: "GET", url: "test.html", successo: function (xhr) // Qualche codice qui, errore: function (xhr) // Qualche codice qui $ .ajax ( type: "POST", url: "test.php", success: function (xhr) // Qualche codice qui, errore: function (xhr) // Some code here);
Hai solo bisogno di 3 linee per effettuare una chiamata AJAX barebones. Specifica il tipo di richiesta, l'URL e sei a posto. Le funzioni di successo e di errore possono essere definite per specificare cosa succede se si verificano i loro omonimi.
Per ottenere la funzionalità desiderata sopra menzionata, il tuo codice jQuery sarebbe approssimativamente simile a questo:
$ ("# maintrigger"). click (function () $ ("p"). after ("cliccato");); 3 linee sono tutto ciò che serve. Selezioniamo gli elementi necessari, chiamiamo la funzione click, creiamo una funzione anonima e aggiungiamo un elemento div. Sembra molto più complicato di quanto sia in realtà.
Ora che abbiamo esaminato il codice jQuery, possiamo esplorare le altre librerie.
Prototype è il nonno dei framework JavaScript. Fornisce tutte le sottigliezze che ti aspetteresti da un framework maturo e quindi aggiunge un po 'di più. Fornisce inoltre una serie di funzioni di libreria per aiutare a scrivere codice ben orientato agli oggetti.
La base utenti di Prototype include:
Un sacco di nomi noti e di alto livello lì. Come ho detto, Prototype è stato il quadro di riferimento per molto tempo prima che giungesse jQuery.
Ora che le introduzioni sono terminate, vediamo come Prototype può aiutarti a scrivere JavaScript migliore.
document.observe ("dom: loaded", function () // Il tuo codice qui); Quanto sopra è la versione di Prototype di DOM ready. All'inizio sembra strano se provieni da jQuery ma è altrettanto semplice. Il osservare la funzione ascolta l'evento passato per la durata del documento. Passiamo l'evento necessario e avvolgiamo tutto il nostro codice all'interno di una funzione anonima come con jQuery.
// Accedi ad un elemento con un id di post $ ('post'); // Usa il motore di selezione CSS $$ ('. Commento'); $ fornisce un alias per il document.getElementById metodo. Ti consente di trovare elementi con il valore ID passato.
$$ ti consente invece di utilizzare selettori CSS. Prende come argomenti un numero qualsiasi di selettori CSS e restituisce l'elemento specifico o un array di essi. Proprio come con il motore di selezione jQuery, puoi utilizzare tutti i tipi di nefandi selettori CSS3 tra cui selettori figlio, selettori di attributi e persino pseudo classi.
$ ( 'Post') addClassName ( 'autore.'); $ ( 'Contenitore') getWidth ().; $ ( 'Post') nascondere ().;
Prototype fornisce un certo numero di potenti metodi per lavorare con l'elemento restituito. Ricorda, devi accedere a questo tramite l'oggetto $. Il che significa che devi prima salvare il riferimento prima di poter manipolare l'elemento in qualsiasi modo tu ritenga opportuno.
Manipolare un elemento è semplice come ottenere un riferimento all'elemento e chiamare la funzione necessaria. Puoi fare un sacco di cose dall'impostazione degli sttributes, al nascondere l'elemento.
$ ('post'). wrap ('div', 'id': 'contenitore'); $ ( 'Post'). Update ('Qualche testo casuale
'); $ ('post'). insert ('div', 'Qualche testo casuale
'); Il primo metodo avvolge l'elemento passato con le impostazioni di un elemento descritto e le sue varie proprietà nel processo. Le funzioni di aggiornamento sostituiscono il contenuto dell'elemento passato con quello che vogliamo. Inserisci inserisce testo semplice o snippet HTML in alto, in basso, prima o dopo l'elemento. Invece di usare metodi separati come aggiungere e dopo come in jQuery, abbiamo solo bisogno di specificare la posizione e abbiamo finito.
// Utilizzo di funzioni anonime $ (btn) .observe ('clic', funzione (evento) // Il tuo codice qui); // Passando al nome di una funzione $ (btn) .observe ('click', doSomething); Come ho detto prima, il osservare funzione ti permette di collegare eventi ai loro gestori di eventi. Prima otteniamo un riferimento all'elemento e poi chiamiamo il osservare metodo che passa nel nome dell'evento e funge da parametro. Se non vuoi creare una funzione separata solo per questo, sei sempre libero di creare una funzione anonima e metti tutto il tuo codice lì dentro.
nuovo Ajax.Request ("test.html", method: 'get', onSuccess: function (transport) // Qualche codice qui, onFailure: function (transport) // Some code here); nuovo Ajax.Request ("test.php", method: 'post', onSuccess: function (transport) // Qualche codice qui, onFailure: function (transport) // Qualche codice qui); Prototype fornisce estese funzioni wrapper per fare una richiesta AJAX. Ho mostrato qui le richieste AJAX POST e GET di livello più basso. Esistono molti altri metodi specializzati per le richieste AJAX incluso un aggiornamento automatico.
Per ottenere la funzionalità desiderata sopra menzionata, il tuo codice sarà approssimativamente simile a questo:
$ ("maintrigger"). observ ('click', function (event) $ ("text"). insert ('cliccato'); ); Ancora un 3-liner. Quello che stiamo facendo è simile al codice jQuery, la sintassi è solo diversa. Noi usiamo il osservare funzione per collegare l'evento click al codice che abbiamo creato in una funzione anonima. Inseriamo semplicemente del testo per indicare che il processo è stato un successo.
Vedrai che generalmente stiamo facendo la stessa cosa con jQuery, solo con una sintassi diversa e alcune differenze. Quando il tuo lavoro non è centrato su DOM e hai bisogno di oggetti adeguati per sfruttare adeguatamente le tue idee, Prototype è la struttura da scegliere.
Mootools non pretende di essere una struttura facile da imparare. Ammettiamolo, la sua pagina web dice che è un framework di applicazioni web per sviluppatori web intermedi e avanzati. Non lasciarti ingannare. È una struttura estremamente elegante che consente di creare JavaScript estremamente di classe. Si concentra su JavaScript nel suo complesso invece del solo DOM. Con questo in mente, fornisce una serie di funzioni per accelerare il flusso di lavoro e estende il DOM ovunque sia possibile. E proprio come Prototype, contiene un sistema di creazione e ereditarietà delle classi che dovrebbe rendere più comodi i JavaScript provenienti da C # o Java.
Le aziende che utilizzano MooTools includono:
Un altro framework con una base di utenti molto impressionante.
Diamo ora un'occhiata a come MooTools rende più facile la tua vita come sviluppatore JavaScript.
window.addEvent ('domready', function () // Il tuo codice qui); Potrebbe sembrare complicato ma non preoccuparti. Sembra solo diverso. Alleghiamo l'evento domready delle finestre alla funzione anonima. Il Aggiungi evento ci consente di allegare eventi ai loro gestori. MooTools definisce l'evento domready che utilizziamo qui. Come al solito avvolgiamo tutto il nostro codice in una funzione anonima e lo mettiamo dentro. Là! Non è stato così difficile, vero??
// Usa $ function $ ('someElement'); // Usa selettori CSS $$ ("# main"); $$ ( "post".); $$ ( "H1"); Proprio come con Prototype, puoi usare la funzione $ come alias per il recupero diretto o usare la funzione $$ per usare selettori CSS molto più intuitivi.
Ognuno di questi metodi restituisce un elemento DOM o un array in base al quale si utilizza.
$ ( 'SomeElement) .hasClass (' cliccato '); // Restituisce true se l'elemento ha effettivamente quella classe $ ("someElement"). SetProperty ('class', 'clickked'); $ ( "SomeElement") vuota ().; // Svuota l'elemento di tutti i suoi figli MooTools fornisce una serie di metodi per manipolare un elemento specifico inclusa l'impostazione dei suoi attributi, la modifica dei suoi contenuti e così via. Se sei interessato, consulta la documentazione di MooTools qui
var someElement = new Element ('div', id: 'mySecondElement'); someElement.inject (someOtherElement); // Inietta il contenuto di someElement all'interno diOtherElement $ ("someElement"). Destroy (); // Rimuove l'elemento e tutti i suoi figli dal DOM $ ('someElement'). Clone (). // Fa una copia dell'elemento Proprio come la maggior parte delle librerie, MooTools offre una pletora di funzioni che ci permettono di modificare il DOM. Tutto, dall'aggiunta del contenuto alla rimozione completa di un nodo dal DOM, è incluso.
// Utilizzo di funzioni anonime $ ('myElement'). AddEvent ('click', function () // Some code); // Passando al nome di funzioni $ ('myElement'). AddEvent ('click', doSomething); Come ho notato sopra, usiamo il Aggiungi evento metodo per allegare l'evento al proprio gestore. Passiamo il nome dell'evento alla funzione e come al solito siamo liberi di scegliere tra creare una funzione separata o anonima per inserire il nostro codice.
// Una richiesta GET var myRequest = new Request (method: 'get', url: 'test.html'); myRequest.send (); // Una richiesta POST var myRequest = new Request (url: 'test.html'); myRequest.send (someData);
Configurare una richiesta AJAX è altrettanto semplice. MooTools fornisce un robusto Richiesta classe che consente di effettuare richieste POST o GET AJAX. Il metodo predefinito è POST quindi non è necessario specificare se si sta facendo una richiesta.
Proprio come gli altri framework, la classe di richiesta supporta i callback per il successo, l'errore e il completamento.
Per ottenere la funzionalità desiderata sopra menzionata, il tuo codice sarà approssimativamente simile a questo:
$$ ("# maintrigger"). addEvent ('clic', function () var elem = $ ("testo"); var someElement = new Element ('div'); someElement.appendText ("Clicked!"). iniettare (elem, "after");); Leggermente più verboso delle altre 2 implementazioni, ma qui in realtà creiamo un nodo div da zero e poi lo aggiungiamo. Inoltre memorizziamo un riferimento all'elemento paragrafo stesso. Dopodiché, aggiungiamo semplicemente il testo necessario all'elemento appena creato e quindi lo aggiungiamo al DOM.
Più verboso? Sì. Più difficile? Assolutamente no. È solo uno stile diverso di codifica.
$ ("# maintrigger"). click (function () $ ("p"). after ("cliccato");); $ ("maintrigger"). observ ('click', function (event) $ ("text"). insert ('cliccato'); ); $$ ("# maintrigger"). addEvent ('clic', function () var elem = $ ("testo"); var someElement = new Element ('div'); someElement.appendText ("Clicked!"). iniettare (elem, "after");); Tutti questi snippet di codice essenzialmente fanno la stessa cosa. Solo in stili diversi e con diverse quantità di controllo.
Questo articolo non intendeva assolutamente confrontare questi quadri. Invece ho voluto richiamare l'attenzione del lettore sulle altre soluzioni praticabili disponibili al di fuori di jQuery. Non è che jQuery sia cattivo. Amo jQuery, è un framework meraviglioso ma si concentra principalmente sul DOM e sul DOM da solo. Se stai cercando di scrivere un'applicazione web o un renderer o qualche altra cosa interessante, creare codice manutenibile, estensibile e pulito è una priorità. È per questo tipo di scenari quando ha più senso ricorrere a un altro quadro.
Potrei scegliere solo due framework in questo articolo a causa di limiti di spazio. Ci sono un certo numero di altri framework altrettanto potenti, tra cui Dojo, YUI, Rico e GWT che meritano anche la vostra attenzione.
Spero di aver stimolato il vostro interesse per i quadri JavaScript alternativi oggi e spero davvero che vogliate sperimentare con altri framework. Facci sapere come va la sperimentazione nei commenti. Buona programmazione!
