Share
Con jQuery che domina il panorama del framework JavaScript, molti neofiti non sono esposti ad altri framework JavaScript. La verità è che ci sono una miriade di eccellenti framework JavaScript disponibili, come MooTools, Prototype, Ext JS e ... YUI! Sebbene non sia noto come alcune delle altre librerie, YUI offre una vasta gamma di strumenti per lo sviluppatore web. Oggi faremo un breve tour di alcune delle sue funzionalità.
YUI (abbreviazione di Yahoo User Interface e pronunciato Y-U-I) è una libreria JavaScript e CSS open source sviluppata principalmente da Yahoo.com. YUI include le utilità JavaScript, un framework CSS (reset, griglia e caratteri), widget e strumenti JavaScript per aiutare a includere e gestire i tuoi moduli.
Ci sono attualmente due versioni supportate di YUI. YUI 2, che è stato lanciato nel 2006, contiene la parte del leone dei widget YUI. YUI 3 è stato rilasciato nel 2009 e ha una sintassi completamente nuova, migliorando notevolmente la sua facilità d'uso (specialmente nella gestione degli eventi e del DOM trasversale).
Quindi ti starai chiedendo, perché dovrei prendere in considerazione l'idea di imparare un altro framework JavaScript? Ogni struttura ha i suoi punti di forza, quindi quello che scegli dipenderà dalle tue esigenze. Ecco un paio di cose che YUI ha davvero da offrire:
Ok, ora che hai sentito un po 'di YUI, iniziamo a guardare un po' di codice!
YUI consente una grande flessibilità quando si tratta di caricare la libreria; diamo un'occhiata a un paio di modi in cui puoi farlo.
Il file seme è il modo preferito per ottenere YUI sulla tua pagina. Basta includere il file seme YUI (solo ~ 6 KB), quindi includere i moduli desiderati tramite JavaScript. Diamo un'occhiata a un esempio:
YUI.use () farà una richiesta per ottenere i moduli richiesti e ti passerà un'istanza YUI nel callback che ha tutti i moduli richiesti. I componenti YUI 2 possono anche essere inclusi passando il nome del modulo, preceduto da yui2-. Se si include un componente YUI 2, è possibile accedere all'istanza YUI 2 tramite Y.YUI2.
Questo strumento basato sul web ti consente di scegliere i moduli che ti servono e ti permette di scaricare o collegare a un file minificato con tutte queste dipendenze (questo è simile allo strumento di interfaccia utente jQuery). Fornisce anche statistiche su come i file influenzeranno i carichi di pagina.
SimpleYUI è uno strumento rilasciato di recente che semplifica l'inclusione di YUI per coloro che sono abituati a includere solo una libreria JavaScript e avere accesso a tutto. Basta includere il file SimpleYUI e otterrai un'istanza globale YUI mappata alla variabile Y con i moduli di manipolazione DOM, AJAX e UI disponibili.
Con SimpleYUI puoi ancora utilizzare dinamicamente tutti gli altri moduli YUI caricandoli con il metodo YUI.use.
Accentsconagua
Y.use ('dd-trascina', funzione (Y) // imposta trascinamento); SimpleYUI ha il potenziale per aiutare realmente l'adozione di YUI perché rende molto più accessibile e familiare ai programmatori provenienti da librerie come jQuery.
La manipolazione del DOM è molto semplice in YUI 3 e la sintassi dovrebbe essere abbastanza familiare se hai usato jQuery in passato.
YUI fornisce due metodi per ottenere i nodi DOM, tramite il suo modulo Node.
Ecco un esempio.
// Y.one var node = Y.one ('# test-div'); // prendi il nodo con l'id test-div var node2 = Y.one (document.body); // Y.one accetta anche un elemento DOM Y.one ('# my-list'). Get ('id'); // my-list // Y.all var nodes = Y.all ('# my-list li'); // tutti gli elementi dell'elenco di my-list // chaining var nodes2 = Y.one ('# my-list'). all ('li'); // tutti gli elementi dell'elenco my-list var parent = Y.one ('# my-list'). get ('parentNode'); // restituisce il parent di my-list (come un oggetto del nodo YUI) YUI fornisce anche un 'test'metodo per vedere se un elemento corrisponde a un selettore
var node = Y.one ('# test-div'); // se il nodo ha la classe primaria if (node.test ('. primary')) doSomething (); Fornisce anche YUI ottenere e impostato metodi per manipolare gli attributi del nodo e funzioni di comodità come addClass e removeClass.
// ottiene e imposta Y.one ('# test-div'). get ('id'); Y.one ('# test-div'). Set ('innerHTML', 'Test Content'); // addClass, removeClass Y.one ('# test-div'). addClass ('evidenziato'); // aggiunge la classe a un div Y.all ('p'). removeClass ('evidenziato'); // rimuove la classe da tutti gli elementi p Gli eventi sono allegati usando YUI sopra metodo. È possibile chiamare questo metodo su un nodo o sull'istanza YUI. Per esempio:
// ha richiamato l'istanza YUI // myevent | fa clic su spazi dei nomi questo gestore onclick su myevent (utilizzato per la rimozione successiva) Y.on ("myevent | click", function () // do something, "#test p"); // ha chiamato NodeList Y.all ("# test p"). on ("myevent | click", function () // fa qualcosa); Una caratteristica interessante di YUI è che se si utilizza il metodo dal primo esempio, il selettore non ha bisogno di avere immediatamente una corrispondenza. YUI continuerà a eseguire il polling per una corrispondenza fino a 15 secondi dopo il caricamento della pagina, il che significa che non è necessario attendere il caricamento del documento per utilizzarlo (non è necessario avvolgere i gestori di eventi in una funzione document.load).
Notare anche che abbiamo anteposto il tipo di evento con una stringa opzionale che namespaces l'evento. Puoi usarlo per separare in seguito l'evento se lo desideri.
Y.all ("# test p"). Detach ("myevent | click"); Puoi anche simulare eventi ...
. Y.one ( "# test") simulare ( "click");
... e licenzia eventi personalizzati.
Y.one ( "# test") del fuoco ( "myevents: custom_event_one.");
YUI 3 supporta anche eventi touch che ti consentono di aggiungere supporto alla tua applicazione JavaScript per dispositivi mobili. Un potenziale trucchetto è che è necessario includere il modulo "event-touch" usando YUI.on per far funzionare gli eventi tattili.
Y.one ("# test"). On ('touchstart', function () // un evento touch avviato); Le richieste AJAX vengono gestite tramite il modulo IO di YUI 3. Una chiamata AJAX è fatta usando il io funzione, come dimostrato di seguito.
Y.io ('/ url / to / call', // questo è un metodo post: 'POST', // serializza il modulo: id: "my_form", useDisabled: true, // ajax lifecycle event gestori su complete: function (id, response) var data = response.responseText; // Response data); Il IO metodo accetta un URL e un oggetto di configurazione come parametri. L'oggetto di configurazione è altamente configurabile, ma ho incluso un paio delle opzioni più comuni nell'esempio sopra.
YUI di io modulo consente inoltre di inviare richieste cross domain utilizzando un file basato su Flash fornito da Yahoo. Ci sono alcuni avvertimenti, tuttavia. Innanzitutto, è necessario disporre di una copia del file flash YUI sul server per effettuare effettivamente la richiesta e, in secondo luogo, il dominio a cui si sta accedendo deve disporre di un file di criteri tra domini che garantisce l'accesso.
Y.io ('http: //www.somedomain/web/service/', metodo: 'POST', dati: 'data = 123', // usa flash xdr: uso: 'flash', dataType: ' xml ' // gestori di eventi del ciclo di vita di ajax su: complete: function (id, response) var data = response.responseText; // Response data); JSONP è anche supportato, ma attraverso lo YUI JSONP modulo, non il IO modulo.
Y.jsonp (someurl, function (response) // gestisce jsonp response);
Un altro modulo che è abbastanza utile in combinazione con AJAX è il modulo JSON. Ciò consente di analizzare facilmente la richiesta AJAX che restituisce JSON. JSON può essere analizzato usando il metodo JSON.parse
var obj = Y.JSON.parse (response.responseText);
YUI 3 contiene un modulo di animazione che può essere utilizzato per eseguire praticamente qualsiasi tipo di animazione. La sintassi è leggermente diversa da quella di jQuery, quindi diamo un'occhiata.
Le animazioni si verificano in un paio di passaggi in YUI. Innanzitutto, imposti un nuovo oggetto di animazione che descrive la tua animazione, quindi eseguilo.
// anima un div da nessuna dimensione ad un'altezza e una larghezza di 100 var animation = new Y.Anim (node: '# my-div', // selettore al nodo che desideri animare. // valori da animare da (facoltativo) da: height: 0, width: 0, // valori da animare anche a: height: 100, width: 100, duration: 0.5, // set duration easing: Y.Easing.easeOut // impostare easing); animation.run ();
Tutte le proprietà possono essere modificate utilizzando .ottenere() e .impostato() sull'oggetto dell'animazione, che consente di modificare l'animazione o gli elementi DOM da animare. Le animazioni generano anche eventi che possono essere ascoltati.
// l'animazione è un oggetto Y.Anim animation.on ('end', function () // attivato dopo l'animazione termina); Nel complesso, l'oggetto di animazione YUI può essere utilizzato per creare tutti i tipi di animazioni nell'applicazione.
Una delle più belle funzionalità di YUI sono i suoi widget. YUI 3 ha attualmente un set limitato di widget (schede, un cursore e una sovrapposizione per nominarne alcuni), ma fornisce un potente framework per creare i propri widget YUI 3. YUI 2, d'altra parte, ha un'enorme libreria di widget. Eccone alcuni:
Ci sono molti altri widget che puoi usare e puoi trovarli tutti sul sito web dello sviluppatore di YUI 2
.
L'ultimo componente di cui daremo una rapida occhiata è le librerie CSS di YUI. YUI 3 fornisce quattro risorse CSS.
Questa è stata solo una rapida occhiata ad alcuni dei componenti e dei moduli offerti da YUI. Se questo articolo ha suscitato il tuo interesse, ti consiglio di andare alla documentazione degli sviluppatori di YUI e trovare cos'altro offre YUI. Quali sono le tue impressioni? Se hai usato YUI in passato, cosa ne pensi??
