2009-02-03 4 views
6

Stiamo pensando di cambiare il nostro sito da Prototype a jQuery. Essendo fin troppo familiare con Prototype, sono ben consapevole delle cose su Prototype che trovo limitante o fastidioso.Quali fastidi jQuery dovrei essere a conoscenza come utente Prototype?

La mia domanda per gli utenti di jQuery è: Dopo aver lavorato con jQuery per un po ', cosa trovi frustrante? Ci sono cose su jQuery che ti fanno pensare a passare (indietro) a Prototipo?

risposta

3

Probabilmente l'unico vero problema in cui mi sono imbattuto sono i problemi di $ (this) scope. Ad esempio, se stai eseguendo un annidamento per loop su elementi e sotto elementi utilizzando la funzione JQuery .each() integrata, a cosa si riferisce $ (this)? In tal caso si riferisce all'ambito più interno, come dovrebbe essere, ma non sempre è previsto.

La soluzione più semplice è quella di appena cache di $ (this) a una variabile prima di forare ulteriormente in una catena:

$("li").each(function() { 
    // cache this 
    var list_item = $(this); 
    // get all child a tags 
    list_item.find("a").each(function() { 
     // scope of this now relates to a tags 
     $(this).hide("slow"); 
    }); 
}); 
2

(L'unica cosa che posso pensare è che questo è l'elemento invece di un oggetto jQuery in $("...").each(function) -calls, come $(element) è più spesso utilizzato quindi solo l'elemento. E quella cosa estremamente minore è solo su di esso.

esempio di quanto sopra (semplificato e so che ci sono altri modi molto migliori per fare questo, io proprio non riuscivo a pensare ad un esempio migliore ora):

// Make all divs that has foo=bar pink. 
$("div").each(function(){ 
    if($(this).attr("foo") == "bar"){ 
    $(this).css("background", "pink"); 
    } 
}); 

each è una funzione che prende un funzione come parametro, quella funzione viene chiamata una volta per ogni elemento corrispondente nction passed, this si riferisce all'elemento DOM del browser effettivo, ma trovo che spesso vorrete usare qualche funzione jQuery su ciascun elemento, quindi dovreste usare $(this). Se questo è stato impostato su ciò che è $(this), otterresti un codice più breve e potresti comunque accedere all'oggetto elemento DOM utilizzando this.get(0). Ora vedo il motivo per cui le cose sono come sono, e cioè che scrivere $(this) invece non è così complicato, e nel caso in cui si possa fare ciò che si vuole fare con l'elemento DOM così com'è è più veloce del modo in cui lo fa potrebbe essere stato, e l'altro modo non sarebbe più veloce nel caso in cui si desidera $(this).)

+0

Mi hai perso lì. Penso di sapere cosa intendi, ma potresti spiegarlo un po 'meglio? – Juan

+0

Juan: Ho aggiunto un esempio enorme e una spiegazione nel blocco dei dettagli, si spera chiarissimo. – svinto

6

Penso che l'unica cosa che mi ottiene è che quando faccio una query di selezione per un singolo elemento devo ricordare che esso restituisce una serie di elementi anche se so che ce n'è solo uno. Normalmente, questo non fa alcuna differenza a meno che tu non voglia interagire direttamente con l'elemento invece che attraverso i metodi jQuery.

+0

Questo è tutto per me, anche. È minore, però. – EndangeredMassa

2

I miei due punti di dolore sono stati l'inferno staffa, può diventare molto confuso

$('.myDiv').append($('<ul />').append($('<li />').text('content'))); 

altro mio problema comune ha a che fare con l'uso di JSON in jQuery, mi manca sempre l'ultimo comma,

$('.myDiv').tabs({ option1:true, options2:false(, woops)}); 

Infine, ho utilizzato jQuery per circa 6 mesi e non penso che tornerò mai ai prototipi. Adoro jQuery e molti dei trucchi che usano mi hanno aiutato a imparare molto. un bel trucco che mi piace è usare le stringhe letterali per le chiamate ai metodi, non l'ho mai fatto troppo con i prototipi.

$('.myDiv')[(add ? 'add' : 'remove') + 'Class']('redText'); 
+0

Dovresti davvero fare il line feed e indentare il tuo codice. La sintassi di JQuery diventa piuttosto caotica se si sta tentando di eseguire tutto in un'unica riga. – Soviut

+0

Questo non è jquery specifico. Puoi farlo con qualsiasi metodo javascript in qualsiasi oggetto, perché gli oggetti sono solo coppie chiave/valore, indipendentemente dal loro tipo. –

+0

@steve_c Mi rendo conto che si tratta di una sintassi javascript standard. È solo un punto dolente che ho trovato usando jQuery che si basa su questo più che sulla prototipazione. Inoltre, mi rendo anche conto che il mio "bel trucco" non è specifico di jQuery, ma l'ho notato. – bendewey

-1

.ciascuna:

jQuery (è necessario Index, anche se non lo si utilizza):

$.each(collection, function(index, item) { 
    item.hide(); 
}); 

Prototype (si sta di solito utilizzando la voce, in modo da poter omettere l'indice):

collection.each(function(item) { 
    item.hide(); 
}); 
+1

Non credo sia vero. "questo" dovrebbe indicare l'elemento in questione. Dovresti essere in grado di fare $ .each (collection, function() {$ (this) .hide();}); Puoi anche fare collection.each (function() {$ (this) .hide();}); – EndangeredMassa

+0

+1. – svinto

+0

+1 @ EndangeredMassa – Gareth

-1

Questo è davvero solo un fastidio se stai facendo un sacco di manipolazione DOM. PrototypeJs aggiunge automaticamente la sua API per DOM elementi, così questo funziona in prototypejs (jQuery ovviamente non lo fa):

var el = document.createElement("div"); 
el.addClassName("hello"); // addClassName is a prototypejs method implemented on the native HTMLElement 

Anche senza correre l'elemento naturale attraverso la funzione $().

PS: Si noti che questo non funziona in IE.

2

Non penso che ci siano trucchi veri o addirittura fastidiosi. Le altre risposte sembrano confermarlo: i problemi sono causati semplicemente dall'API leggermente diversa e dal diverso stile di codifica JavaScript che jQuery incoraggia.

Ho iniziato a utilizzare Prototype un paio di anni fa e l'ho trovato una rivelazione. Così potente, così elegante. Dopo alcuni mesi ho provato jQuery e ho scoperto che potenza ed eleganza sono davvero. Non ricordo fastidi. Ora torno a lavorare su un progetto usando Prototype e sembra un passo indietro (per essere onesti, stiamo usando Prototype 1.5.1).

Se si è invertita la domanda: "Quali disturbi del prototipo dovrei essere a conoscenza di un utente jQuery?" - avresti molte più risposte.