jquery - różnica pomiędzy $ .functionName i $ .fn.FunctionName

Question

w jQuery, widziałem oba poniższe sposoby definiowania funkcji jQuery:

$.fn.CustomAlert = function() { 
    alert('boo!'); 
}; 

$.CustomAlert = function() { 
    alert('boo!'); 
}; 

Rozumiem, że są one przypisane do obiektu jQuery (lub $), ale jaka jest różnica między tymi dwoma? Kiedy powinienem użyć jednego lub drugiego?

Dzięki.

Answer 1

Jestem pewien, że to pytanie zostało zadane kilka razy wcześniej, ale nie mogę znaleźć linku.

$.fn punktów do jQuery.prototype. Wszystkie metody lub właściwości, które dodasz, stają się dostępne dla wszystkich instancji obiektów zawijanych jQuery.

dodaje właściwość lub funkcję do samego obiektu jQuery.

Użyj pierwszego formularza $.fn.something, gdy masz do czynienia z elementami DOM na stronie, a wtyczka robi coś z elementami. Gdy wtyczka nie ma nic wspólnego z elementami DOM, użyj innego formularza $.something.

Na przykład, jeśli miał funkcję rejestratora, to nie ma sensu go używać z elementów DOM jako w:

$("p > span").log(); 

W tym przypadku, można po prostu dodać metodę dziennika Obiekt jQuery:

jQuery.log = function(message) { 
    // log somewhere 
}; 

$.log("much better"); 

Jednak w przypadku elementów należy użyć innego formularza. Na przykład, jeśli masz wtyczkę graficzną (plotGraph), która pobiera dane z <table> i generuje wykres - możesz użyć formularza $.fn.*.

$.fn.plotGraph = function() { 
    // read the table data and generate a graph 
}; 

$("#someTable").plotGraph(); 

Na powiązana uwaga, załóżmy, że miała wtyczki, które mogą być używane zarówno z elementów lub jednostkowego, a chcesz uzyskać do niego dostęp, jak $.myPlugin lub $("<selector>").myPlugin(), można ponownie wykorzystać tę samą funkcję dla obu stron.

Załóżmy, że potrzebujemy niestandardowego alertu, w którym data jest dołączana do każdej wiadomości z ostrzeżeniem. Kiedy stosowany jako samodzielna funkcja, mijamy to komunikat jako argument, a użyte elementy, używa text elementu jako komunikat:

(function($) { 
    function myAlert(message) { 
     alert(new Date().toUTCString() + " - " + message); 
    } 

    $.myAlert = myAlert; 

    $.fn.myAlert = function() { 
     return this.each(function() { 
      myAlert($(this).text()); 
     }); 
    }; 
})(jQuery); 

To owiniętego samodzielnego wykonywania funkcji tak myAlert nie rozlewa się na zasięg globalny. Jest to przykład lub powtórna funkcja między obydwoma formularzami wtyczek.

Jak wspomniano we wspomnianej części, dobrze jest zwrócić element owinięty jQuery, ponieważ nie chcesz przerwać łańcucha.

Wreszcie znalazłem podobne pytania :-)

• Difference between jQuery.extend and jQuery.fn.extend?
• jQuery plugin .fn question
• jQuery Plugin Authoring: Why do some do jQuery.pluginName and others jQuery.fn.pluginName?
• in jQuery what is the difference between $.myFunction and $.fn.myFunction?

Answer 2

$.a = function() { 
    return "hello world"; 
}; 

alert($.a()); 

B

$.fn.b = function() { 
    return "hello " + $(this).length + " elements"; 
} 

alert($("p").b()); 

Answer 3

Aby dowiedzieć rozwój plugin jQuery, musimy wiedzieć o funkcji globalnej. jQuery ma wbudowane możliwości poprzez obiekt, który nazywamy funkcją globalną. Są to metody jQuery, ale są to funkcje w przestrzeni nazw jQuery.

Aby dodać funkcję do nazw jQuery, wystarczy dodać nową funkcję jako właściwości obiektu jQuery:

jQuery.globalFunction = function() { 
    alert('Hi.. just test'); 
}; 

go używać, możemy napisać:

jQuery.globalFunction(); 

Albo

$.globalFunction(); 

Dodawanie metod instancji jest podobne, ale zamiast tego rozszerzamy obiekt jQuery.fn.

jQuery.fn.myMethod = function() { 
    alert('Hello...!'); 
} 

Możemy nazwać tę nową metodę za pomocą dowolnego wyrażenia wyboru

$('div').myMethod(); 

Dla pełnego wyjaśnienia patrz This Link