Unterschied zwischen jQuery.extend und jQuery.fn.extend?

82

Ich versuche, die Syntax des jquery-Plugins zu verstehen, weil ich zwei Plugins zu einem zusammenführen möchte. Der Blinker, der auch in der Lage sein muss, das Intervall anzuhalten oder mehrmals zu laufen.

Wie auch immer, ist diese Syntax die gleiche wie

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },

Dies

$.fn.blink = function(options)
    {

weil es so aussieht, als ob die erste (ohne =) eine Möglichkeit ist, mehrere Methoden gleichzeitig festzulegen. Ist das richtig? Auch während ich hier bin Was wäre der Grund, die Elemente und eine Logik zum jquery-Objekt hinzuzufügen?

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",

(Dies ist aus dem Timer-Plugin)

Richard
quelle
Wenn Sie die Entwicklung eines benutzerdefinierten jQuery-Plugins lernen, empfehle ich, diesen Thread zu lesen. Stackoverflow.com/questions/1117086/…
CrandellWS

Antworten:

89

jQuery.extend wird verwendet, um jedes Objekt mit zusätzlichen Funktionen zu erweitern, aber jQuery.fn.extend wird verwendet, um das jQuery.fn-Objekt zu erweitern, das tatsächlich mehrere Plugin-Funktionen auf einmal hinzufügt (anstatt jede Funktion separat zuzuweisen).

jQuery.extend :

var obj = { x: function() {} }

jQuery.extend(obj, { y: function() {} });

// now obj is an object with functions x and y

jQuery.fn.extend :

jQuery.fn.extend( {
        x: function() {},
        y: function() {}
});

// creates 2 plugin functions (x and y)
Philippe Leybaert
quelle
1
danke, das ist klar über das Zuweisen mehrerer Objekte, aber ich bin mir immer noch nicht sicher, wann man jquery.extend verwenden soll. Warum würden Sie etwas, das Sie in fn.extend tun, an jquery.extend übergeben? Ich kann dazu auch eine neue Frage stellen, da ich zwei Fragen gestellt habe.
Richard
13
jQuery.extend () ist eine praktische Funktion, die in Ihrem eigenen Javascript-Code verwendet werden kann, um Objekte generisch zu erweitern. Es ist Teil der "Utility" -Funktionen in jQuery (nicht für die DOM-Manipulation verwendet)
Philippe Leybaert
74
jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

Verwendung : $.abc(). (Kein Selektor erforderlich wie $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});

Verwendung : $('.selector').xyz(). (Selektor erforderlich wie $('#button').click().)

Hauptsächlich wird es zur Implementierung verwendet $.fn.each().

Ich hoffe, es hilft.

Dinesh
quelle
20

Unterschied zwischen jQuery.extend und jQuery.fn.extend?

Tatsächlich gibt es keine außer ihrer Basisreferenz. In der jQuery-Quelle können Sie lesen:

jQuery.extend = jQuery.fn.extend = function() {  };

Wie funktioniert es? Die Dokumentation lautet:

Fügt den Inhalt von zwei oder mehr Objekten zum ersten Objekt zusammen.

Es ist nur eine For-in-Schleife, die Eigenschaften kopiert und mit einem Flag aufgepimpt wird, um verschachtelte Objekte zu rekursieren. Und noch ein Feature:

Wenn nur ein Argument angegeben wird $.extend(), bedeutet dies, dass das Zielargument weggelassen wurde

 // then the following will happen:
 target = this;

Wenn die Funktion für sich jQueryselbst aufgerufen wird (ohne explizites Ziel), wird der jQuery-Namespace erweitert. Wenn die Funktion aufgerufen wird jQuery.fn(ohne explizites Ziel), wird das jQuery-Prototypobjekt erweitert, in dem sich alle (Plugin-) Methoden befinden.

Bergi
quelle
Meine Gegenstimme !!!! dazu. Ich habe
mir
16

Dieser Blog-Beitrag hat eine schöne Beschreibung:

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

Zitate:

In der Regel sollten Sie das jQuery-Objekt für Funktionen und das jQuery.fn-Objekt für Methoden erweitern. Auf eine Funktion wird im Gegensatz zu einer Methode nicht direkt vom DOM aus zugegriffen.

Gavenkoa
quelle
1
Was bedeutet es , direkt vom DOM aus auf eine Methode zuzugreifen ?
Dan Nissenbaum
1
directly from the DOMbezieht sich auf ein sehr grundlegendes JavaScript-Konzept des Funktionsaufrufs im Vergleich zum Aufruf der Objekteigenschaft / des Prototyps (im jQuery-Wrapper um native DOM-Objekte). Sehen Sie sich das Beispiel an und versuchen Sie, einen Unterschied zu finden, und überlegen Sie, warum Code in Beispielen nicht austauschbar ist.
Gavenkoa
9
$.fn.something= function{};

zeigt auf den jQuery.prototype und ermöglicht den Zugriff auf dom-Elemente über "this". Jetzt darfst du das $(selector).something();also als Plugin-Funktion wie verwenden$(selector).css();

$.something = function{};

Fügt dem jQuery-Objekt selbst eine Eigenschaft oder Funktion hinzu, und Sie können "this" nicht für den Dom-Zugriff verwenden. Jetzt können Sie es als verwenden $.something(). Dies funktioniert als Utility-Funktion als$.trim()

aber

$.fn.extend({function1(), function2()}) and  $.extend({function1(), function2()}) 

Ermöglicht das gleichzeitige Hinzufügen von mehr als einer Funktion. Sie können auch zum Zusammenführen von zwei Objektliteralen verwendet werden, falls mehr als ein Objekt bereitgestellt wird.

Shishir Arora
quelle