Różnica między jQuery.extend i jQuery.fn.extend?


83

Próbuję zrozumieć składnię wtyczki jquery, ponieważ chcę połączyć dwie wtyczki w jedną. Migacz, który również musi być w stanie zatrzymać interwał lub uruchomić kilka razy.

W każdym razie, czy ta składnia jest taka sama jak

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);
        });
    },

to

$.fn.blink = function(options)
    {

ponieważ wygląda na to, że pierwsza (bez =) jest sposobem na ustawienie wielu metod naraz. Czy to jest poprawne? Również kiedy tu jestem. Jaki byłby powód dodania elementów i logiki do obiektu jquery?

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

(pochodzi z wtyczki timera)


Jeśli uczysz się tworzenia niestandardowych wtyczek jQuery, polecam przeczytanie tego wątku stackoverflow.com/questions/1117086/ ...
CrandellWS

Odpowiedzi:


89

jQuery.extend jest używany do rozszerzenia dowolnego obiektu o dodatkowe funkcje, ale jQuery.fn.extend służy do rozszerzenia obiektu jQuery.fn, który w rzeczywistości dodaje kilka funkcji wtyczki za jednym razem (zamiast przypisywać każdą funkcję osobno).

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)

1
dzięki, to jasne co do przypisywania wielu obiektów, ale nadal nie jestem pewien, kiedy należy użyć jquery.extend. Dlaczego miałbyś przekazywać coś, co robisz w fn.extend, do jquery.extend? Mogę też zadać nowe pytanie do tego, bo zadałem dwa pytania.
Richard,

13
jQuery.extend () jest w rzeczywistości wygodną funkcją, której można używać we własnym kodzie javascript do rozszerzania obiektów w ogólny sposób. Jest częścią funkcji "narzędziowych" w jQuery (nie jest używana do manipulacji DOM)
Philippe Leybaert

74
jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

Zastosowanie: $.abc(). (Nie jest wymagany selektor $.ajax()).

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

Zastosowanie: $('.selector').xyz(). (Wymagany selektor $('#button').click()).

Głównie służy do realizacji $.fn.each().

Mam nadzieję, że to pomoże.


21

Różnica między jQuery.extend i jQuery.fn.extend?

Właściwie nie ma żadnego oprócz odniesienia podstawowego. W źródle jQuery możesz przeczytać:

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

Jak to działa? Dokumentacja brzmi:

Łączy ze sobą zawartość dwóch lub więcej obiektów w pierwszy obiekt.

To po prostu pętla for-in, która kopiuje właściwości, doprawiona flagą, aby powtarzać zagnieżdżone obiekty. I kolejna funkcja:

Jeśli $.extend()podano tylko jeden argument , oznacza to, że argument docelowy został pominięty

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

Więc jeśli funkcja jest wywoływana dla jQuerysiebie (bez wyraźnego celu), rozszerzy przestrzeń nazw jQuery. A jeśli funkcja zostanie wywołana jQuery.fn(bez wyraźnego celu), rozszerzy prototypowy obiekt jQuery, w którym znajdują się wszystkie metody (wtyczki).


Moje upvote !!!! do tego .
Patrzyłem

15

Ten post na blogu ma ładny opis:

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

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

Cytaty:

Generalnie należy rozszerzyć obiekt jQuery o funkcje i obiekt jQuery.fn o metody. Funkcja, w przeciwieństwie do metody, nie jest dostępna bezpośrednio z DOM.


1
Co to znaczy uzyskać dostęp do metody „bezpośrednio z DOM” ?
Dan Nissenbaum

1
directly from the DOModnosi się do bardzo podstawowej koncepcji JavaScript: wywołanie funkcji a wywołanie właściwości / prototypu obiektu (w opakowaniu jQuery wokół natywnych obiektów DOM). Zobacz przykład i spróbuj znaleźć różnicę i zastanów się, dlaczego kod w przykładach nie jest wymienny.
gavenkoa

10
$.fn.something= function{};

wskazuje na jQuery.prototype i umożliwia dostęp do elementów dom poprzez „this”. Teraz możesz użyć $(selector).something();Więc to działa jak funkcja wtyczki$(selector).css();

$.something = function{};

dodaje właściwość lub funkcję do samego obiektu jQuery i nie możesz użyć "this" do dostępu do domeny Teraz możesz używać tego jako $.something() ; działa to jako funkcja narzędziowa, jak$.trim()

ale

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

pozwala na dodanie więcej niż jednej funkcji w tym samym czasie, a także może posłużyć do scalenia dwóch literałów obiektowych w przypadku, gdy udostępniamy więcej niż jeden obiekt.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.