Prototype: l’uso del doppio dollaro ($$)
Venerdì 16 Marzo, 2007Con l'ultimo rilascio di Prototype, Andrew e Christophe hanno velocizzato e migliorato la funzione 'doppio dollaro' ($$ utility), la quale permette di selezionare un elemento specificando il selettore (praticamente tutti i selettori supportati dalle specifiche CSS3).
L'utilità di questa funzione va ben oltre la popolare $, che può essere utile ma, in fin dei conti, non svolge nessuna operazione degna di nota. L'utility 'doppio dollaro' ($$) invece permette davvero di selezionare qualsiasi tipo di elemento, fornendo ottimi strumenti per filtrare gli elementi nel DOM.
Vediamo alcuni esempi ripresi dal sito ufficiale:
-
$$('div'); // -> Tutti i DIV del documento. Stessa cosa di document.getElementsByTagName('div')!
-
$$('#contents'); // -> Uguale a $('contents'), ma ritorna sempre un array.
-
$$('li.faux'); // -> Tutti fli elementi LI con class 'faux'
-
$$('#contents a[rel]'); // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel
-
$$('a[href="#"]'); // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!)
Il punto di forza, tuttavia, risiede nella possibilità di escludere alcuni elementi in favore di altri, ad esempio:
-
$$('a:not([rel~=nofollow])'); // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow"
Ancora più interessante è:
-
$$('a[href^=#]:not([href=#])')
Questo, in pratica, trova tutti i TAG A con l'attributo href che inizia con '#' ma non prende in considerazione quelli che sono uguali a '#' solamente. In altre parole vengono ignorati i links che non puntato ad un valido ID!
Questa eccezionale caratteristica del ($$) ha ispirato Tobie Langel per creazione di un semplicissimo script (disarmante) in grado di aggiungere un simpatico effetto di scroll quando all'interno di una stessa pagina HTML ci si sposta per Anchors, con la tecnica - appunto - href="#".
Per un Demo clicca qui.
volevo solo essere sicuro che non ci fosse qualche altro...
undolog » Blog Archive » Esempi di unobtrusive Javascript ha detto:
[...] Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un’interessante esempio che possiamo commentare (vedi anche Prototype: l’uso del doppio dollaro ($$)) ci viene da Tobie Langel. Con poche righe di codice e scricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice: PLAIN TEXT HTML: [...]
Dove Javascript vince | Undolog.com ha detto:
[...] Prototype: l’uso del doppio dollaro ($$) Adobe Apollo Alpha [...]