в jQuery, каково различие между $ .myFunction и $ .fn.myFunction?
Я копаюсь в записи плагинов для jQuery, и я пытаюсь понять различие между $.f и $ .fn.f
Я видел, что включающиеся авторы используют обоих или иногда присваивают $.f = $ .fn.f
Кто-то может объяснить это мне, обоснованию, преимуществам, и т.д.?
3 ответа
Взгляд на исходный код jQuery прояснит ситуацию. Кстати, jQuery и $ относятся к одному и тому же объекту, и вот как определяется объект jQuery:
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
jQuery - это функция, а в Javascript - function также является объектом типа 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).
$.f - это служебная функция, тогда как $.fn.f - это плагин/метод jQuery.
Утилитарная функция - это функция в пространстве имен jQuery, полезная для выполнения некоторой операции, например, $.isArray(obj) проверяет, является ли объект obj массивом. Полезно помещать функции в пространство имен jQuery, если вы будете часто их использовать, а также чтобы избежать загрязнения глобального пространства имен. С другой стороны,
методы jQuery работают с объектами jQuery/обернутыми множествами. Например, Hello$(document.body).append(' добавит абзац, содержащий Hello, к элементу body документа. $.fn - это сокращение для $.prototype в более поздних версиях jQuery (в ранних версиях библиотеки оно было не всегда). Вы можете использовать его при написании собственных плагинов.
Функция $.fn.f является просто ярлыком для jQuery. prototype
Используя fn, вы можете добавлять методы плагина без использования метода extend:
jQuery.fn.myPlugin = function(opts) { ... }