2011-01-12 7 views
2

Ich wurde nur gebeten, ein kleines Newsticker-Skript für eine unserer Websites zu schreiben, also schrieb ich ein bestehendes jQuery-Skript neu, um unsere Bedürfnisse zu erfüllen. Erst danach wurde mir gesagt, dass sie anstelle von jQuery Prototype verwenden, also muss ich jetzt das Skript konvertieren.jQuery zu Prototype, nicht sicher über einige jQuery-Teile

Die meisten einfachen Teile kann ich mithilfe der Prototype-Dokumentation herausfinden, aber es gibt einige Teile in der jQuery, mit denen ich nicht vertraut bin. Ich spreche in erster Linie über die Teile wie:

(function($) { 

$.fn.newsTicker = $.fn.newsticker = function(delay) 
{ 
    delay = delay || 4000; 
    initTicker = function(el) 
    { 
     //bla bla some stuff 
    }; 

    //here be more functions 

    this.each(
     function() 
     { 
      if(this.nodeName.toLowerCase()!= "ul") return; 
      initTicker(this); 
     } 
    ); 
}; 

und

$.newsticker = $.newsTicker = 
{ 
    pause: function(el) 
    { 
     (el.jquery ? el[0] : el).pause = true; 
    }, 
    //more functions 
} 

})(jQuery); 

Sind diese irgendeine Art von Klassen? Ich verstehe nicht, wie $(#element).newsTicker() die richtige Funktion auslöst. Wie funktioniert das und vor allem, was übersetzt es in Prototype?

Voll Skript: http://jsfiddle.net/PXn4r/9/

Antwort

2

Ich kann Ihnen nicht mit dem Prototyp-Port helfen, aber hier ist, wie der ursprüngliche Code funktioniert.

Sind das irgendwelche Klassen? I nicht bekommen, wie $ (# Element) .newsTicker() die richtige Funktion auslöst.

In jQuery haben Sie ein einzelnes globales Objekt, in der Regel als $ aliased, die alle Funktionen enthält, die Sie (die „Features“) verwenden können. Diese Features sind erweiterbar: Sie können dem globalen Objekt eine eigene Funktion hinzufügen, und wenn Sie es ordnungsgemäß ausführen, ist es von keiner anderen integrierten jQuery-Funktion zu unterscheiden. Wenn Sie es in einem wiederverwendbaren Stil tun, haben Sie ein Plug-in geschrieben. Das ist, was der Code tut:

$.fn.newsTicker = $.fn.newsticker = function(delay){ 
} 

Es eine jQuery-Methode erstellt, die einen delay Parameter akzeptiert. (Eigentlich ist es doppelt definiert, so dass Sie den Namen falsch schreiben kann.) Sie können jetzt Dinge tun, wie folgt:

$("#main div.ticker").newsticker(2000); 

Nun ist diese:

(function($) { 
    // ... 
})(jQuery); 

Der $ alias ist nur eine Konvention und kann vorhanden sein oder nicht. Dieser Codeabschnitt definiert eine unbenannte Funktion, die das globale Objekt jQuery empfängt und in einer lokalen Variablen mit der Bezeichnung $ speichert.Auf diese Weise können Sie sicher sein, dass $ existiert und es nicht mit anderen Variablen kollidiert, die möglicherweise vorhanden sind.

aktualisiert

Und was ist der Unterschied zwischen der Funktion mit .FN und einem ohne?

jQuery.fn ist ein spezielles Objekt für Plugins. Ich weiß nicht, was passiert, wenn Sie Ihre Funktion irgendwo anders hinzufügen (es funktioniert vielleicht wie erwartet oder nicht, ich habe es nicht getestet), aber das ist die beste Vorgehensweise. Sie können es als Namespace betrachten: Dinge, die dort platziert werden, stören nichts anderes.

Referenz: http://docs.jquery.com/Plugins/Authoring

BTW, ein richtig geschrieben Plugin ermöglicht es Ihnen es in der Mitte einer jQuery Kette einzufügen, zB:

$("#main div.ticker").css("color: red").newsticker(2000).fadeIn("slow"); 
+0

Awesome. Und was ist der Unterschied zwischen der Funktion mit .fn und der ohne? –

+0

@Stephan Muller - Siehe die aktualisierte Antwort –

1

Sie kann nicht verlängern Prototype so, wie Sie jQuery erweitern können. jQuery hat ein Hauptobjekt, wo alles zusammenkommt, Prototype hat mehrere globale Objekte ... Doesent machen viel Sinn Erweiterung von Prototypen Objects, also wenn Sie eine reine js-Version haben (und ich denke, Sie haben, nach Ihrem Beitrag), verwenden dass man ...

So stellen Sie sicher, dass Prototype Selektoren (der einfachste Weg ist wahrscheinlich unter Verwendung von Prototypen $ Funktion)

bearbeiten unterstützen: Es tut mir leid, ich dachte, Sie schrieb, dass einen jQuery-Plugin aus einem reines js Skript. In diesem Fall sollten Sie jQuery.noConflict verwenden, um jQuery und Prototype zu verwenden. Es gibt keine einfache Möglichkeit, ein jQuery-Plugin nach Prototype zu konvertieren ...

+0

Danke für die Antwort, aber ich bin nicht erlaubt, benutze jQuery überhaupt .. es muss komplett Prototype werden .. das Umschreiben von Hand sollte kein Problem sein, wenn ich die tatsächliche jQuery, die ich benutzt habe, völlig verstanden habe, was ich nicht mache :) –

Verwandte Themen