JavaScript  »  Articoli  »  MooTools 

Dopo avere accuratamente analizzato tutti i più importanti plugin ufficiali offerti dal framework MooTools nei precedenti articoli, è arrivato il momento di vedere come è possibile realizzare la propria estensione personalizzata. In questo tutorial, infatti, non impareremo ad usare alcun componente ufficiale, ma vedremo come sfruttare le API offerte da MooTools per creare un plugin personale partendo da zero e analizzando tutte le fasi che compongono il percorso necessario alla realizzazione.

Ovviamente, il procedimento che porta alla creazione di un plugin è una fase più avanzata e complessa rispetto all'utilizzo dei componenti offerti nativamente, poiché con essa subentrano parecchi prerequisiti, tra i quali vi sono la buona conoscenza del costruttore Class, delle Class Extras e delle teorie della OOP (programmazione a oggetti).

Per un'accurata analisi dei costruttori Class e delle Class Extras (Chain, Events ed Options) vi rimando alle rispettive lezioni della guida dedicata alla versione 1.2 di MooTools:

• Come usare il costruttore Class
• Integrazione con le Class Extras

Per quanto riguarda le teorie della OOP, riporto di seguito un semplice e veloce ripasso dei concetti utili ai fini del tutorial.

Teorie

Modularità e gerarchie

Uno dei vantaggi fondamentali offerti da una struttura Object-Oriented è la modularità dell'applicazione. I nostri plugin dovranno essere sempre il più possibile modulari:

plugin A estende MooTools	script1.js
plugin B estende plugin A	script2.js

Ad esempio, supponiamo che il plugin A estenda una classe di effetti offerta nativamente da MooTools e che uno degli scopi del plugin B sia quello di creare animazioni aggiuntive e complementari. Sarà opportuno fare in modo che B e A condividano le stesse funzionalità e facciano parte della stessa gerarchia (invece che creare un plugin B completamente nuovo): in questo modo si ridurranno notevolmente i KB e avremo un codice molto più mantenibile in caso di modifiche o aggiunte future.

Estendere, superclassi e sottoclassi

Quando una classe estende un'altra classe, essa eredita tutte le sue funzionalità. L'estensione permette dunque di creare plugin basati su qualsiasi classe offerta nativamente da MooTools (come ad esempio Fx.Tween, Slider e cosi via...), che a loro volta possono essere ulteriormente estesi.

Si dice superclasse la classe che viene "estesa" e che dunque "offre" le proprie funzionalità ad altre classi. Una sottoclasse è invece la classe che "eredita" dalla superclasse.

Costruttori e istanze

Un costruttore, come indica la parola, è la classe che permette di creare le istanze del nostro plugin che poi potranno essere utilizzate dall'utente finale. Di solito si usa il nome della classe unito all'operatore new: il metodo costruttore initialize verrà richiamato all'inizializzazione dell'istanza come vedremo successivamente. Ecco un esempio:

var fx = new Fx.Tween('myElement', myOpts);

Fx.Tween è il costruttore (o classe) mentre la variabile fx rappresenta un'istanza della classe Fx.Tween. Se non si implementano particolari Design Pattern, questa sarà l'unica modalità disponibile per creare istanze.

Implementare

Nella OOP, quando una classe implementa un'interfaccia, essa si impegna a ridefinire tutti i metodi di questa interfaccia per ottenere una API comune a tutte le classi della gerarchia. In realtà MooTools definisce un concetto leggermente diverso di "implementazione", come vedremo tra qualche paragrafo.

Pratiche

Ora che abbiamo rispolverato i concetti utili alla creazione del nostro plugin è ora di passare all'analisi della fase successiva, in cui possiamo metterli in pratica avvalendoci delle API di MooTools.

Estendere, superclassi e sottoclassi

Come abbiamo imparato dalla guida, per estendere una classe di tipo Class dobbiamo utilizzare la proprietà Extends ed indicare il costruttore che si intende estendere:

var A = new Class({

	/* collezione di metodi e proprietà di A */

});

var B = new Class({

	Extends: A,
	
	/* collezione di metodi e proprietà di B */

});

Questo snippet asserisce che la classe B guadagna tutti i metodi e tutte le proprietà della classe A. Se quest'ultima possiede ad esempio un metodo chiamato sayIt, anche la classe B disporrà di tale metodo.

Altri articoli

Altre guide

Altre newsletter