Share
Questo tutorial riguarda la comprensione e la padronanza della libreria MooTools. Lo fa offrendo un'introduzione di alto livello alla storia e alle basi della libreria Core: da dove cominciare, dove esplorare, cosa padroneggiare e molto altro.
La base del framework MooTools è davvero nel modello di ereditarietà prototipale di JavaScript. Nei linguaggi classici, come C ++ o Java, una classe rappresenta qualcosa come un tipo di dati o ciò che Jeff Mott ha definito un "progetto". Questi progetti vengono quindi utilizzati nella creazione di oggetti. Di fatto, in queste lingue non viene creato nulla fino a quando il "nuovo" operatore non le invoca esplicitamente.
Con JavaScript tuttavia, tutto viene creato immediatamente, anche prima di istanziare gli oggetti con l'operatore "nuovo". Come linguaggio prototipale, ciò significa in effetti nessun progetto, niente classi". Invece, usiamo alcuni oggetti come basi pienamente operative per altri oggetti. Come ha detto Douglas Crawford, proprio in questo modo JavaScript diventa "più capace e offre più potere espressivo". Diamo un'occhiata:
Accentsconagua
funzione Nerd (iq) this.iq = iq; this.glasses = true; this.pants = 'high'; function SuperPowers () this.strongerThanLocomotive = true; this.fasterThanBullet = true; this.canLeapBuildings = true; Nerd.prototype = new SuperPowers (); Nerd.prototype.willWinGirl = function (hotness) if (this.iq> (hotness * 20) || this.strongerThanLocomotive) console.log ('maybe'); else console.log ('nope'); new Nerd (140) .willWinGirl (10); // registra "forse" L'esempio sopra è in realtà un mezzo piuttosto popolare per introdurre il concetto di prototipazione. Tuttavia, se lo trovi un po 'troppo astratto, forse un modo migliore per avvicinarti a questo sarebbe guardare alla prototipazione di un costruttore JavaScript nativo come String, Array, ecc. Ad esempio:
Array.prototype.eachhhh = function (fn) for (var i = 0, l = this.length; i < l; i++) fn(this[i]); [0,1,2,3].eachhhh(function(item) console.log(item); // logs: 0,1,2,3 );
La prototipazione di modelli di codice semplici come il ciclo precedente può risparmiare un sacco di tempo quando si lavora su progetti più grandi. Quando si utilizza il framework MooTools, è importante iniziare a pensare a ogni costruttore come estendibile; questo ti farà risparmiare tempo e renderà il tuo codice molto più flessibile. Inoltre, è proprio questo metodo di ereditarietà che è al centro di MooTools e sfruttare questa struttura significa fare uso della prototipazione. Certo, cosa MooTools fa è rendere questo processo molto più facile da accedere e sfruttare, ma entreremo esattamente come lo farà più avanti nell'articolo.
Wayyyy nel 2006, Chris Heilman era già diventando fanatico della sintassi letterale dell'oggetto ... parlando di fette di pane e altre follia. In ogni caso, proprio per questo motivo, non mi dilungherò troppo su questo argomento, ma assumerò che a questo punto si sia imbattuto in questa sintassi o che almeno lo si possa afferrare con il semplice esempio qui sotto.
// questa non è notazione letterale dell'oggetto var variable1 = null; var variable2 = false; function1 () // some code function2 () // some code // quanto sopra diventa notazione letterale dell'oggetto sotto ... var SomeVariableName = variable1: null, variable2: false, init: function () , function1: function () // some code, function2: function () // some code
Come la maggior parte dei linguaggi di programmazione, in JavaScript esiste un gran numero di preferenze stilistiche e "migliori pratiche". Quando lavori con MooTools troverai che non mancano questi, tra cui: non concatenare eccessivamente, capitalizzare i nomi delle classi, dichiarazioni variabili di separazione di virgola, ecc ... Tuttavia, tra questi, la notazione letterale dell'oggetto è forse fondamentale per comprendere non solo il modo in cui è strutturato il framework MooTools stesso, ma in realtà come trarre vantaggio da questo framework nello sviluppo del proprio codice. Svilupperemo questa idea ulteriormente nel resto di questo articolo e, come vedrai, tutti gli esempi da questo punto in poi trarranno vantaggio da questa sintassi.
Se JavaScript non ha "classi", allora perché c'è tutto questo hype su Motools e classi? Nel maggio dello scorso anno, Aaron Newton ha pubblicato un eccellente articolo comparativo su jQuery e MooTools. Tra le altre cose, ha affrontato con precisione questa domanda di classi in un modo molto succinto: "Nonostante il suo nome, la funzione MooTools Class non è propriamente una classe, né crea le stesse. ricordare di classi in un linguaggio di programmazione più tradizionale, ma in realtà Class è tutto basato sugli oggetti e sull'eredità prototipale. "
Come Aaron continua a dettagliare, il framework MooTools sta spingendo per modi potenti e in definitiva semplici per organizzare e strutturare il tuo codice, modi che sono eleganti ma anche familiare, e non solo semanticamente, ma nella loro capacità di comportarsi secondo schemi di design classici. Infatti, troverai che utilizzare "classi" nella tua base di codice apre il tuo codice a molti potenti schemi di programmazione: il mediatore, il mixin, ecc ...
Una semplice classe MooTools sarà simile a questa (notare la sintassi):
var YourClass = new Class (variable1: false, initialize: function () this.toggleVariable ();, toggleVariable: function () this.variable1 =! variable1;); var yourClassInstance = new YourClass (); yourClassInstance.toggleVariable (); // this.variable1 == false
Non troppo complicato, giusto? Una volta iniziato a strutturare il codice in classi come queste, scoprirai che il tuo repository di codice diventerà non solo molto più organizzato e gestibile, ma in realtà più piccolo!
Quindi, come si riduce esattamente? Ritornando al modello di ereditarietà prototipale di JavaScript e al suo rapporto con il costruttore di Class, MooTools ci fornisce Extends e Implements. Come proprietà, entrambe sono fondamentali per la produzione delle sottoclassi di MooTools e rendono questo intero pasticcio di protyping un po 'più intuitivo. Ad un livello elevato, Extends fornisce l'accesso alla sottoclasse a tutti i metodi della sua classe base, in cui metodi e proprietà dello stesso nome vengono sovrascritte (non preoccupatevi, sono ancora accessibili tramite il metodo parent ()). Simile all'estensione, Implementa le proprietà da una o più altre classi, ma senza il modello di ereditarietà.
Considera brevemente il plugin di caricamento di fantasia di Digitarald per Mootools. In questo programma Harald definisce diverse classi, una delle quali è chiamata la classe 'File'. Il file contiene le funzionalità di base che un oggetto file deve interfacciare con il suo programma di caricamento e proprio per questo è perfetto per essere esteso; si potrebbe creare una sottoclasse di "File immagine", una sottoclasse "File di testo", ecc. Modellando il codice in questo modo, si è in grado di creare il codice, anziché uscirne. Considera l'esempio seguente per sapere come usare Extends:
var YourSubClass = new Class (Estendi: YourClass, // qui stiamo estendendo "YourClass" dal nostro esempio precedente variabile2: false, initialize: function () this.parent (); // chiamerà la funzione di inizializzazione dal basso Class "YourClass", // qui stiamo sovrascrivendo la funzione Variable di "YourClass" con una nuova funzione toggleVariable: function () this.variable1 =! variable1; // notice variabile1 da "YourClass" è ancora accessibile in YourSubClass this.variable2 =! This.variable1;);
Il caso di utilizzo più comune che trovo in Implements è il costruttore di eventi o il costruttore di opzioni nelle mie classi. Come suggerisce il nome, l'implementazione degli eventi consente sia l'attacco che l'attivazione di eventi personalizzati sull'oggetto, come onComplete, onFailure, onSuccess, onAnything. Questo livello di astrazione diventa particolarmente utile quando inizi a condividere il codice su più progetti, dove gli eventi si comportano da mediatori tra il tuo progetto corrente e i tuoi plugin. In questo modo puoi finalmente uscire da quelle brutte relazioni one-to-one, legate nei tuoi plugin. Per esempio:
var YourSubClass = new Class (Implementa: Eventi, // qui diciamo a MooTools di implementare gli eventi nella nostra sottoclasse (questo non influenzerà il basso "YourClass") Extends: YourClass, variable2: false, initialize: function () this. parent ();, toggleVariable: function () this.variable1 =! variable1; this.variable2 =! this.variable1; // afterToggle () - chiamare "afterToggle" avrebbe reso questa funzione un necessario inclusione di YourSubClass .fireEvent ('toggled'); // invece viene attivato un evento personalizzato chiamato "commutato"); var yourSubClassInstance = new YourSubClass (); var afterToggle = function () alert ('sono appena stato attivato!'); ; // qui aggiungiamo un listener per l'evento personalizzato, proprio come faremo con qualsiasi altro evento yourSubClassInstance.addEvent ('toggled', afterToggle); Oltre agli eventi, spesso vorrete implementare le opzioni di MooTools. Questa classe di utilità consente di automatizzare l'impostazione di un elenco di proprietà facoltative da impostare su un'istanza della classe. Di nuovo, questo può essere molto utile quando si scrivono plugin per vari progetti, consentendo la personalizzazione circostanziale di alcune proprietà dell'oggetto. Considera l'esempio qui sotto:
var YourSubClass = new Class (// Una delle molte cose interessanti della proprietà implements è che esclude un array. Implementa: [Events, Options], // Qui includiamo Options Extends: YourClass, // options sono impostate se l'invocatore non specifica esplicitamente un valore Opzioni: variabile2: falso, inizializza: funzione (opzioni) this.setOptions (opzioni); // imposta le opzioni this.parent ();, toggleVariable: function () this.variable1 =! variable1; this.options.variable2 =! this.variable1; this.fireEvent ('toggled');); // questo avvierà la classe con variable2 = true. var yourSubClassInstance = new YourSubClass (variable2: true); 
Man mano che i programmi diventano più complessi, una corretta comprensione dell'ambito diventa inestimabile. L'ambito è il modo in cui le variabili in JavaScript si riferiscono a qualsiasi singolo punto di esecuzione: ci sono variabili globali, che sono variabili che possono essere referenziate da qualsiasi punto del documento e occupano il livello di esecuzione più basso, variabili locali, che sono variabili limitate al loro immediato contenenti funzioni o chiusure e, infine, riferimenti personali, la parola chiave "this", che è il modo in cui JavaScript fa riferimento al contesto dell'attuale punto di esecuzione.
var global = true; // variabile globale; var aFunction = function () var local = true; // variabile locale $ ('button'). addEvent ('click', function () this.addClass ('clicked'); // riferimento personale); Quando si fa riferimento a una variabile nel codice, JavaScript bolle dalla sua posizione di esecuzione corrente attraverso tutti i livelli accessibili di variabili finché non individua la prima e la più vicina occorrenza di una corrispondenza positiva. Questo comportamento è spesso meno desiderabile, in particolare quando si ha a che fare con eventi all'interno di oggetti letterali mentre ospitano i propri riferimenti personali. Spesso gli sviluppatori si affidano a quelle che vengono chiamate "chiusure lessicali" per aggirare problemi come questi, memorizzando il riferimento personale in una variabile di un nome diverso. Tuttavia, MooTools fornisce un mezzo alternativo per raggiungere questo obiettivo attraverso il loro metodo bind (), che non è solo più pulito, ma molto più elegante. Considera l'esempio qui sotto:
... addEvents: function () $ ('button'). AddEvent ('click', function () // binding sostituisce il riferimento automatico corrente per quello dell'oggetto passato in this.toggleVariable (); .bind (this )); // qui lo associamo al gestore di eventi click, toggleVariable: function () // code, ... 
Nell'esempio sopra abbiamo scelto come target un elemento già esistente nel DOM e aggiunto un listener di eventi ad esso. Tuttavia, non è raro oggi che vedrai intere applicazioni web caricare i loro contenuti dinamicamente usando JavaScript. Con l'evoluzione di JSON, essere in grado di generare markup al volo è diventato sempre più necessario. Entra nel costruttore di MooTools Element. La novità di questo costruttore è che mantiene la sua leggibilità nonostante la sua grande capacità di proprietà opzionali (anche in questo caso, grazie alla notazione letterale dell'oggetto!). L'elemento accetta un oggetto eventi, un oggetto stili, oltre a qualsiasi proprietà individuale come classe, id, src, href, titolo, ecc. Detto questo, è anche caricato con un sacco di metodi, l'elenco completo dei quali è disponibile dai documenti MooTools Qui. Di seguito è riportato un semplice esempio di come iniziare:
var el = new Element ('div', id: 'button', 'html': 'hellloooo', stili: display: 'block', posizione: 'relativo', float: 'left, events: click : function () // your code); 
Ora che hai il tuo elemento dinamico, non sarebbe fantastico inserirlo nel DOM? MooTools fornisce un elenco davvero pratico di metodi proprio per questo, tra cui:
Di questi metodi, ho trovato la capacità di adottare di accettare una serie di elementi assolutamente indispensabili, soprattutto quando si strutturano grandi quantità di markup dinamico. Considera l'esempio qui sotto:
var el = new Element ('div', id: 'button', styles: display: 'block', posizione: 'relativo', float: 'left, events: click: function () // your codice). adopt (this.createSpan (), // restituisce un elemento che può essere successivamente sovrascritto da una nuova sottoclasse Element ('a', href: 'http://somewebsite.com'). (new Element ('strong', 'html': 'world'))) .inject ($ (document.body), 'top'); L'esempio sopra fa un approccio veramente orientato agli oggetti alla manipolazione del DOM. Quando diventi un super MooTools ninja, jedi, junky, nerd, puoi usare il metodo sopra descritto per iniziare ad astrarre le funzioni che restituiscono elementi o matrici di elementi, rendendo possibile che le sottoclassi mirino a metodi specifici nella modifica della visualizzazione. Eccezionale.
JavaScript Object Notation o JSON è il leggero formato di interscambio di dati che tutti amano (specialmente dopo aver lavorato con XML). Il bello di JSON ovviamente è che la sua struttura è riconosciuta nativamente da JavaScript e, con molti grandi siti che aprono i propri dati al pubblico tramite API, non c'è davvero alcun motivo per cui non si dovrebbe investire il tempo necessario per familiarizzarsi con esso. Non è più un incubo cross-browser, che tu stia spingendo i dati a un servizio di back-end o richiedi un altro batch di tweet da Twitter, il costruttore di MooTools Request rende JSON e JSONP incredibilmente semplici. Funziona con diversi listener di eventi e di recente un timeout, che è completamente necessario una volta iniziato a entrare in JSONP. (Che dovresti! È così divertente.) Ecco un semplice esempio:
var JSONRequest = new Request.JSON (url: "http://yoursite.com/tellMeSomething.php", onFailure: function () alert ('oh nooo!');, onSuccess: function (response) alert ('evviva !:' + response.result);); 
Ad un livello elevato, il costruttore Fx consente di modificare qualsiasi proprietà CSS di un elemento HTML, che a sua volta accetta un singolo elemento e una serie di proprietà facoltative (durata, tipo di transizione, ecc.) Per creare effetti di animazione uniformi di colori, diapositive Inoltre, il costruttore Fx è completamente compatibile con le equazioni Easing di Robert Penner, che sono un ottimo modo per aggiungere un tocco di unicità alle transizioni come rimbalzo, elasticità, peccato, ecc..
Se sei "hardcore" puoi effettivamente ottenere tutti gli effetti di animazione usando Fx.Tween (animazione in stile css singolo) o Fx.Morph (più animazioni in stile simultaneo). Ovviamente, oltre a questi c'è Fx.Slide, Fx.Scroll, Fx.Accordian, ecc. Ecco un semplice esempio usando Fx.Tween:
var myFx = new Fx.Tween ($ ('button')); myFx.start ('background-color', '# 000', '# f00'); // questo interpola il colore di sfondo dell'elemento button. Se stai morendo per approfondire questo argomento, consulta il tutorial di Fx di Open per un'introduzione abbastanza completa al costruttore.
Originariamente visualizzato nel caricamento di fantasia di Digitarald, l'oggetto Swiff consente al JavaScript della tua pagina di comunicare con Flash. Ciò semplifica notevolmente l'interazione con le funzionalità esclusive di Flash come video, audio, streaming di file e funzioni di accesso agli Appunti. Inoltre, Swiff consente di trasmettere valori e manipolare il filmato Flash utilizzando le convenzioni conosciute da JavaScript e Mootools. L'integrazione di Flash in questo modo è particolarmente utile quando iniziamo ad adottare misure per offrire HTML5 come miglioramento progressivo, in cui, a prescindere dal fatto che l'utente abbia il plug-in Flash, Swiff può essere usato per controllare audio o video su browser più vecchi. Nel frattempo, controlla il semplice esempio di seguito:
var flashObject = new Swiff ('sounds.swf', id: 'mySoundManager', larghezza: 1, altezza: 1, vars: myVariable: true, // passa le variabili in flash on load, callBacks: // call eventi personalizzati dal tuo oggetto flash someEvent: function () // code); Swiff.remote (flashObject, 'playMySound') // chiama la funzione "playMySound" dal flash interno 
Ora, con oltre quindici membri che contribuiscono al repository ufficiale di plugin e oltre un centinaio di plugin non ufficiali già su Forge, non sorprende che "Community" sia ciò che il team MooTools voleva che noi sviluppatori prendessimo via dal 2009. In effetti, le persone hanno veramente abbracciato questo quadro, e ora con Forge, abbiamo un ottimo posto per incontrarci e iniziare a condividere idee. Troverai David Walsh, Aaron Newton, 3n e molti altri che contribuiscono attivamente a codici incredibili e facilitano un ambiente capace di ispirazione e utilità. Alla fine, il modo più utile per prendere in mano il framework MooTools è quello di coinvolgere gli sviluppatori intorno a te e in definitiva capire a cosa stanno lavorando e come stanno andando avanti.
Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].
Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.
