В jQuery какая разница между $.myFunction и $.fn.myFunction?

Ответ 1

Глядя на исходный код jQuery, все будет ясно. Кстати, jQuery и $ относятся к одному и тому же объекту, и именно так определяется объект jQuery:

var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
}

jQuery - это функция, а в Javascript функция также является объектом типа Function. Поэтому jQuery.f или $.f прикрепляет f к объекту jQuery Function или называет его классом jQuery, если вы это сделаете.

если вы посмотрите на источник jQuery, вы увидите, что jQuery.prototype назначен jQuery.fn

jQuery.fn = jQuery.prototype

Итак, всякий раз, когда вы присоединяете метод (или свойство) к jQuery.fn, как в jQuery.fn.f = .., или $.fn.f = .., или jQuery.prototype.f = .., или $.prototype.f = .., этот метод будет доступен для всех экземпляров этого jQuery (опять же, в Javascript нет классов, но это может помочь в понимании).

Всякий раз, когда вы вызываете функцию jQuery(), как в jQuery("#someID"), в этой строке создается новый экземпляр jQuery:

return new jQuery.fn.init( selector, context );

и этот экземпляр имеет все методы, которые мы привязали к прототипу, но не методы, которые были привязаны непосредственно к объекту Function.

Вы получите исключение, если попытаетесь вызвать функцию, которая не была определена в нужном месте.

$.doNothing = function() {
    // oh noez, i do nuttin
}

// does exactly as advertised, nothing    
$.doNothing();

var jQueryEnhancedObjectOnSteroids = $("body");
// Uncaught TypeError: Object #<an Object> has no method 'doNothing'
jQueryEnhancedObjectOnSteroids.doNothing();

О, и, наконец, сократить короткий поток и ответить на ваш вопрос - выполнение $.f = $.fn.f позволяет использовать эту функцию в виде плагина или утилиты (в jQuery lingo).

Ответ 2

$.f - это функция утилиты, тогда как $.fn.f является плагином/методом jQuery.

Функция полезности в основном является функцией в пространстве имен jQuery, которая полезна для выполнения некоторой операции, например, $.isArray(obj) проверяет, является ли объект obj массивом. Полезно размещать функции в пространстве имен jQuery, если вы будете часто их использовать, а также для предотвращения глобального загрязнения пространства имен.

Методы jQuery, с другой стороны, работают с объектами jQuery/завернутыми наборами. Например, $(document.body).append('<p>Hello</p>'); добавит абзац, содержащий Hello, в элемент body документа. $.fn является сокращением для $.prototype в более поздних версиях jQuery (это не всегда было в более ранних версиях библиотеки). Вы использовали бы это при написании собственных плагинов.

Ответ 3

$.fn.f - это просто ярлык для jQuery.prototype

Используя fn, вы можете добавлять методы плагинов без использования метода extend:

jQuery.fn.myPlugin = function(opts) { ... }