La Closure Library contiene molti strumenti diversi, dai widget dell'interfaccia utente alle utilità di comunicazione. Le diverse parti della libreria condividono una serie di convenzioni che aiutano a organizzare il codice e a semplificarne l'utilizzo.
Questo articolo descrive brevemente le principali convenzioni del codebase della libreria di chiusura. Dopo aver letto questo articolo, dovresti conoscere abbastanza queste convenzioni per lavorare nell'esercizio Iniziare ed esplorare ulteriormente la libreria.
Spazio dei nomi della libreria di chiusura
I nomi di tutte le funzioni e proprietà delle Closure Library iniziano con un percorso delimitato da punti che impedisce la loro sovrapposizione accidentale con i nomi definiti nel codice della libreria di chiusura. Questo percorso è chiamato spazio dei nomi.
Ad esempio, il seguente codice della libreria di chiusura definisce la funzione clamp() nello spazio dei nomi goog.math:
goog.math.clamp = function(value, min, max) {
return Math.min(Math.max(value, min), max);
};
Puoi chiamare questa funzione in questo modo:
var clampedValue = goog.math.clamp(2, 3, 4);
Il nome goog è la radice dello spazio dei nomi della libreria di chiusura. Tutti i nomi della Libreria Closure iniziano con goog.
Gestione delle dipendenze: goog.require()
e goog.provide()
Tutti i file JavaScript della libreria di chiusura iniziano con una sezione di codice simile alla seguente:
goog.provide('goog.math');
goog.require('goog.array');
goog.require('goog.math.Box');
goog.require('goog.math.Coordinate');
goog.require('goog.math.Range');
goog.require('goog.math.Rect');
goog.require('goog.math.Size');
Le istruzioni goog.provide() all'inizio di un file
della libreria di chiusura dichiarano gli spazi dei nomi e le classi pubblici
forniti da tale file. Le istruzioni goog.require() indicano le altre parti della libreria di chiusura di cui questo file ha bisogno.
goog.provide() e goog.require() sono funzioni definite nel file della libreria di chiusura closure/goog/base.js.
Insieme, goog.provide() e goog.require() forniscono il sistema di gestione delle dipendenze della libreria di chiusura. Questo sistema consente di assemblare facilmente le parti della
Libreria di chiusura che vuoi utilizzare.
Usa la funzione goog.require() nel tuo codice per caricare le parti della Closure Library di cui hai bisogno. Consulta la Guida introduttiva alla Closure Library per scoprire come caricare i pacchetti della Closure Library con goog.require().
Eredità
La libreria di chiusura aggiunge un meccanismo di ereditarietà a JavaScript con la funzione goog.inherits(). La libreria Closure utilizza questa funzione per organizzare il proprio codebase in classi e sottoclassi.
Ad esempio, il seguente codice definisce il costruttore per la classe MenuButton Closure Library, che eredita dalla classe Button:
goog.ui.MenuButton = function(content, opt_menu, opt_renderer, opt_domHelper) {
goog.ui.Button.call(this, content, opt_renderer ||
goog.ui.MenuButtonRenderer.getInstance(), opt_domHelper);
// Menu buttons support the OPENED state.
this.setSupportedState(goog.ui.Component.State.OPENED, true);
if (opt_menu) {
this.setMenu(opt_menu);
}
this.timer_ = new goog.Timer(500); // 0.5 sec
};
goog.inherits(goog.ui.MenuButton, goog.ui.Button);
L'ultima istruzione nel codice sopra
goog.inherits(goog.ui.MenuButton,
goog.ui.Button), definisce MenuButton come
sottoclasse di Button (puoi vedere l'implementazione
di goog.inherits()
in closure/goog/base.js). Per questa chiamata
a goog.inherits(), puoi chiamare il metodo
getValue() su un'istanza MenuButton
anche se non esiste
alcun metodo goog.ui.MenuButton.prototype.getValue(), come
seguente:
var btn = new goog.ui.MenuButton('hi');
var value = btn.getValue();
MenuButton eredita il metodo getValue() da Button.
Tieni presente che la prima riga del costruttore MenuButton chiama il costruttore Button, come mostrato di seguito:
goog.ui.MenuButton = function(content, opt_menu, opt_renderer, opt_domHelper) {
goog.ui.Button.call(this, content, opt_renderer ||
goog.ui.MenuButtonRenderer.getInstance(), opt_domHelper);
...
};
goog.inherits(goog.ui.MenuButton, goog.ui.Button);
Per stabilire correttamente l'ereditarietà è necessaria una chiamata al costruttore della superclasse come questa. Puoi utilizzare goog.inherits() per creare l'ereditarietà nel tuo codice, ma assicurati di chiamare sempre il costruttore della superclasse con call().
La documentazione dell'API per ogni classe mostra la gerarchia di ereditarietà di tale classe e anche tutti i metodi ereditati dalla classe dalle superclassi.
Eventi della libreria di chiusura
I browser moderni utilizzano gli eventi per attivare le funzioni JavaScript in risposta alle azioni degli utenti. Purtroppo, ogni browser ha sistemi diversi per gli eventi.
La libreria di chiusura definisce il proprio framework di eventi, che funziona allo stesso modo in tutti i browser. Inoltre, questo framework consente ai programmatori di definire e inviare i propri tipi di eventi. La libreria Closure utilizza il framework di eventi in tutto il codebase, permettendoti di ascoltare gli oggetti della libreria Closure per gli eventi proprio mentre ascolti gli elementi DOM.
Ad esempio, la seguente riga del codice per il widget di elementi comprimibili della libreria (goog.ui.Zippy) utilizza il framework di eventi per collegare un listener ai clic degli utenti:
goog.events.listen(this.elHeader_, goog.events.EventType.CLICK,
this.onHeaderClick_, false, this);
Questo codice collega un listener di eventi all'elemento DOM elHeader_. A causa di questa chiamata a goog.events.listen(), l'utente fa clic su elHeader_ attiva la funzione del gestore onHeaderClick_. Consulta il tutorial sugli eventi per scoprire di più sugli altri argomenti in questa chiamata.
Se utilizzi goog.events.listen() per gestire gli eventi del browser nel tuo codice, puoi evitare di scrivere casi speciali per i sistemi di eventi di browser diversi.
Puoi anche usare goog.events.listen() per ascoltare
le istanze delle classi della libreria di chiusura. Ad esempio, la classe
goog.ui.Zippy della libreria di chiusura invia l'evento personalizzato
mostrato di seguito quando viene aperta una pagina Crawler:
this.dispatchEvent(new goog.ui.ZippyEvent(goog.ui.Zippy.Events.TOGGLE,
this, this.expanded_));
Ascoltando questo evento, il codice può reagire, ad esempio inviando un avviso all'utente, come mostrato di seguito:
var zippyHeader = document.getElementById('header');
var zippyContent = document.getElementById('content');
var zippy = new goog.ui.Zippy(zippyHeader, zippyContent);
function react(e) {
alert('The Zippy opened!');
}
goog.events.listen(zippy, goog.ui.Zippy.Events.TOGGLE, react);
Per saperne di più sugli eventi della libreria di chiusura, consulta il tutorial sugli eventi.