Come usare MooTools?

Ispirato da un articolo di "chromasynthetic" Voglio introdurre alcune migliori pratiche per affrontare con MooTools e spiegare brevemente.

• Elementi di indirizzo
^? Visualizza codice JavaScript

1 2 3 4

/ / Javascript metodo "someID" ) ; documento. getElementById ("someID"); / / Con mootools ) ; $ ('SomeID');

Con Mootools molto più breve e, soprattutto al fine di CamalCases facilmente.

• "Valore Modifica
^? Visualizza codice JavaScript

1 2 3 4

val = document. getElementById ( 'input' ) . value ; //mit Mootools var val = $ ( 'input' ) . getValue ( ) ; / / Var Javascript val metodo = documento. GetElementById ('ingresso'). Value / / var = val Mootools con $ ('input'). GetValue ();

Mootools fornisce diversi metodi per modificare le proprietà dell'oggetto, o leggere.

• Metodi di concatenamento
^? Visualizza codice JavaScript

1 2 3 4 5 6 7 8

/ / Javascript metodo ) . style . height = '100px' ; $ ('Div'). Style. Altezza = '100px '; ) . style . background = '#ffc' ; $ ('Div'. Style). Sfondo = 'FFC' #; / / Con mootools ) . setStyles ( { $ ('Piè'). SetStyles (( , altezza: '100px ', background: '# FFC' ));

Semplice esempio di una concatenazione di funzioni.

• L'interruzione di un Richieste AJAX
^? Visualizza codice JavaScript

1 2 3 4 5 6 7 8 9 10

Ajax ( 'eine.php?var1=test&var2=request' ) ; //besser mit new Ajax ( 'eine.php' , { data : { var1 : 'test' , var2 : 'request' } } ) ; / / Nuovo metodo sbagliato Ajax ('eine.php? Var1 = test & var2 = richiesta'); / / meglio con i nuovi Ajax ('eine.php', (dati: (var1: 'test', var2: 'richiesta')) );

Entrambe le possibilità portano allo stesso risultato. Tuttavia, la chiarezza di questi ultimi è significativamente più grande. Per le variabili non statici come il 'test' String può essere a questo punto, naturalmente, anche usare selettori.

• Gestione di eventi
^? Visualizza codice JavaScript

1 2 3 4 5

/ / Modo errato ) . onclick = doSomething ; $ ('Contenitore'). Onclick = DoSomething; / / Meglio ) . addEvent ( 'click' , doSomething ) ; $ ('Contenitore'). AddEvent ('click', DoSomething);

La seconda opzione è molto più sicura, dal momento che si prende cura del Core Mootools per l'attuazione alla rispettivi browser.

• semplice iterazione su gruppi di elementi
^? Visualizza codice JavaScript

1 2 3 4 5 6 7

/ / Modo errato ) . each ( function ( el ) { $ $ ('Div.collapsed'). Ciascuno (function (el) ( 'click' , expand ) ; addEvent el ('click', espandere); )); / / Meglio ) . addEvent ( 'click' , expand ) ; $ $ ('Div.collapsed'). AddEvent ('click', espandere);

Entrambe le versioni di selezionare in questo caso, ogni div con la classe di "collasso", e messo fuori un evento Click. Il "$ $" restituisce gli elementi sotto forma di una matrice, in modo che una iterazione di ogni funzione non è più necessario.
Lo stesso vale per:

^? Visualizza codice JavaScript

1 2 3 4 5 6 7

/ / Modo errato ) . each ( function ( el ) { $ $ ('Div.hidden'). Ciascuno (function (el) ( 'hidden' ) ; removeClass el ('nascosti'); )) / / Meglio ) . removeClass ( 'hidden' ) ; $ $ ('Div.hidden'). RemoveClass ('nascosti');

Mi auguro che l'uno o l'altro starter è così chiaro in quale misura diversa dal javascript standard utilizzando MooTools e come utilizzare questo Zusatzfunkionalitäten.

Tre semplici suggerimenti per adattare al 1,3 jQuery

Pochi mesi fa è arrivata la jQuery realease 1.3. Molti script erano basati sulle versioni precedenti sono ancora decenti. Ma qui e là, ma i problemi si verificano quando si aggiorna. Questi problemi possono essere classificati secondo Karl Swedberg in tre livelli:

Prima Aggiornamento del "selettore" attributo

Probabilmente, gli errori più comuni causati dalla ridefinizione del selettore di attributi. Nelle versioni precedenti degli attributi di un elemento con l'espressione XPath "@ attributi stati affrontati e modificati. 1.3 e la risposta si basa sulla sintassi CSS. A questo scopo un piccolo esempio:
Ex sintassi:

  1
 2

  ) ; $ ('A [@ ^ href = http]');
    ) ; $ ('[@ Titolo = pippo]'); 

Notizie in jQuery 1.3:

  1
 2

  ) ; $ ('A ^ href [= http]');
       ) ; $ ('Titolo [= foo]'); 

Secondo Rivedere le loro proprie selettori

Creerà delle selettori proprio usato, è di tanto in tanto per gli errori quando il secondo argomento del nuovo oggetto è una stringa.

  1
 2
 3

       jQuery. expr [ ':' ] , { hasSiblings : "jQuery(a).siblings(m[3]).length>0" } ) ; jQuery. estendere (jQuery. expr [':'], (hasSiblings: "jQuery (a). fratelli (m [3]). lunghezza> 0")); 

Questo può essere risolto semplicemente con una funzione anonima Javascript che ha un valore di ritorno della stringa.

  1
 2
 3

  jQuery. expr [ ':' ] , { hasSiblings : function ( a , i , m ) { return jQuery ( a ) . siblings ( m [ 3 ] ) . length > 0 ; } } ) ; jQuery. estendere (jQuery. expr [':'], (hasSiblings: funzione (a, i, m) (jQuery e ritorno (a). fratelli (m [3]). lunghezza> 0 ;))); 

Terzo Notazione a "nascosti" o "set" Visibile elementi

Quando una prima versione 1.3.2, un elemento con la proprietà "display: block" è che all'interno di un altro elemento con "display: none" è stato, quindi gli elementi interni sono stati ancora rilasciati con una query nel codice visibile.

  1
 2
 3
 4
 5

  <div id="outer1" style="display:none">
         <div id="inner1">
             Non visibile div
         </ Div>
       </ Div> 

Prima della versione 1.3.2 del bando $ ('# inner'1). Avrebbe è (': ritorno visibile a ') e valeva $ (' # inner1: nascosto ') avrebbe restituito 0 articoli.

A partire dal 1.3.2 non $ ('# inner'1). Is (': visibile false ') per il valore e $ (' # interiore: nascosto ') è un elemento adatto.