2009-02-03 2 views
6

Wir überlegen, unsere Website von Prototype auf jQuery umzustellen. Da ich mit Prototype nur allzu vertraut bin, sind mir die Dinge über Prototype, die ich einschränkend oder ärgerlich finde, durchaus bewusst.Welche jQuery-Belästigungen sollte ich als Prototyp-Benutzer beachten?

Meine Frage für jQuery-Benutzer lautet: Nachdem Sie eine Weile mit jQuery gearbeitet haben, was finden Sie frustrierend? Gibt es Dinge über jQuery, die dazu führen, dass Sie über den Wechsel zu Prototype nachdenken?

Antwort

3

Wahrscheinlich ist das einzige wirkliche Problem, das ich je erlebt habe $ (dieses) Umfang Probleme. Wenn Sie beispielsweise eine verschachtelte for-Schleife über Elemente und Unterelemente mithilfe der eingebauten JQuery .each() -Funktion ausführen, worauf bezieht sich $ (this)? In diesem Fall bezieht es sich auf den innersten Bereich, wie es sein sollte, aber es wird nicht immer erwartet.

die einfache Lösung ist es, nur cache $ (this) zu einer Variablen, bevor weiter in eine Kette Aushub:

$("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

(Das einzige, was ich denken kann, ist, dass dies das Element anstelle ein jQuery-Objekt in $("...").each(function) -calls, wie $(element) häufig dann nur das Element verwendet wird. Und die extrem kleine Sache ist es nur etwa.

Beispiel für die oben (vereinfacht und ich weiß, dass es andere viel bessere Möglichkeiten, dies zu tun, ich konnte einfach nicht jetzt ein besseres Beispiel):

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

each ist eine Funktion, die eine nimmt Funktion als Parameter, diese Funktion wird für jedes passende Element einmal aufgerufen nction übergeben, this bezieht sich auf das eigentliche Browser-DOM-Element, aber ich finde, dass Sie oft einige jQuery-Funktion für jedes Element verwenden möchten, also $(this) verwenden müssen. Wenn dies auf $(this) festgelegt wurde, erhalten Sie einen kürzeren Code, und Sie können weiterhin auf das DOM-Elementobjekt zugreifen, indem Sie this.get(0) verwenden. Jetzt sehe ich den Grund dafür, dass die Dinge so sind, wie sie sind, nämlich dass das Schreiben $(this) statt dessen, ist kaum das umständlich, und für den Fall, dass Sie tun können, was Sie mit dem DOM-Element tun wollen, ist es schneller als es ist hätte sein können, und der andere Weg wäre nicht schneller in dem Fall Sie wollen $(this).)

+0

Sie haben mich dort verloren. Ich denke ich weiß was du meinst, aber, könntest du es ein bisschen besser erklären? – Juan

+0

Juan: Ich habe ein riesiges Beispiel und eine Erklärung im Detail hinzugefügt, hoffentlich kristallklar. – svinto

6

Ich denke, das einzige, das mich bekommt, ist, dass, wenn ich eine Auswahl Abfrage für ein einzelnes Element muss ich daran denken, dass es gibt ein Array von Elementen zurück, obwohl ich weiß, dass es nur eines gibt. Normalerweise spielt dies keine Rolle, es sei denn, Sie möchten direkt mit dem Element statt mit jQuery-Methoden interagieren.

+0

Das ist es auch für mich. Es ist jedoch geringfügig. – EndangeredMassa

2

Meine beiden Schmerzpunkte haben die Klammer Hölle, kann sehr verwirrend

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

Mein anderes häufiges Problem bei der Verwendung von JSON in jQuery zu tun hat, ich das letzte Komma immer vermissen,

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

Schließlich benutze ich jQuery seit ungefähr 6 Monaten und ich glaube nicht, dass ich jemals wieder zu Prototypen zurückkehren werde. Ich liebe jQuery, und viele der Tricks, die sie verwenden, haben mir geholfen, viel zu lernen. Ein cooler Trick, den ich mag, verwendet String-Literale für Methodenaufrufe, das habe ich mit Prototypen nie wirklich gemacht.

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

Sie sollten den Feed wirklich mit Zeilenumbrüchen versehen und den Code einrücken. JQuery-Syntax wird ziemlich unordentlich, wenn Sie versuchen, alles einzeilig zu gestalten. – Soviut

+0

Dies ist nicht jQuery spezifisch. Sie können dies mit jeder Javascript-Methode in jedem Objekt tun, da Objekte nur Schlüssel-Wert-Paare sind, unabhängig von ihrem Typ. –

+0

@steve_c Ich stelle fest, dass dies Standard Javascript Syntax Zeug ist. Es ist nur ein Schwachpunkt, den ich bei der Verwendung von jQuery gefunden habe, das mehr als nur Prototyping benötigt. Außerdem stelle ich fest, dass mein "cooler Trick" nicht jQuery-spezifisch ist, aber ich habe das bemerkt. – bendewey

-1

.jeder:

jQuery (Sie müssen Index, auch wenn Sie sie nicht verwenden):

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

Prototype (Sie sind in der Regel das Produkt verwenden, so dass Sie den Index weglassen):

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

Ich glaube nicht, dass das stimmt. "this" soll auf das fragliche Element zeigen. Sie sollten $ .each (collection, function() {$ (this) .hide();}); Sie könnten auch collection.each (function() {$ (this) .hide();}); – EndangeredMassa

+0

+1. – svinto

+0

+1 @ EndangeredMassa – Gareth

-1

Dies ist wirklich nur ein Ärgernis, wenn Sie eine Menge DOM-Manipulation machen. PrototypeJS fügt automatisch seine API DOM-Elemente, so funktioniert dies in PrototypeJS (jQuery natürlich tut dies nicht):

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

Auch ohne das native Element durch die $() Funktion ausgeführt wird.

PS: Bitte beachten Sie, dass dies in IE nicht funktioniert.

2

Ich glaube nicht, dass es irgendwelche echten Probleme oder sogar irgendwelche anhaltenden Ärgernisse gibt. Die anderen Antworten hier scheinen dies zu bestätigen - Probleme werden einfach durch die etwas andere API und den unterschiedlichen JavaScript-Codierungsstil, den jQuery fördert, verursacht.

Ich habe Prototype vor ein paar Jahren verwendet und fand es eine Offenbarung. So mächtig, so elegant. Nach ein paar Monaten habe ich jQuery ausprobiert und entdeckt, was Power und Eleganz wirklich sind. Ich erinnere mich nicht an irgendwelche Belästigungen. Jetzt arbeite ich wieder an einem Projekt mit Prototype und es fühlt sich wie ein Schritt zurück an (um fair zu sein, wir verwenden Prototyp 1.5.1).

Wenn Sie die Frage umgekehrt - "Welche Prototyp-Ärgernisse sollte ich als jQuery Benutzer bewusst sein?" - Sie würden viel mehr Antworten bekommen.

Verwandte Themen