jQuery - различие между $ .functionName и $ .fn. FunctionName

Я уверен, что этот вопрос задавали несколько раз раньше, но я не могу найти ссылку.

$ .fn указывает на jQuery.prototype . Любые методы или свойства, которые вы добавляете к нему, становятся доступными для всех экземпляров обернутых объектов jQuery.

$. Something добавляет свойство или функцию к самому объекту jQuery.

Используйте первую форму $. Fn.something , когда вы имеете дело с элементами DOM на странице, и ваш плагин что-то делает с элементами. Если плагин не имеет ничего общего с элементами DOM, используйте другую форму $. Something .

Например, если у вас есть функция журнала, не имеет особого смысла использовать ее с элементами DOM, как в:

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

В этом случае вы просто добавите метод журнала к объекту jQuery iself:

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

$.log("much better");

Однако при работе с элементами вы можете использовать другую форму. Например, если у вас есть плагин для построения графиков (plotGraph), который берет данные из

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

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

В связи с этим предположим, что у вас есть плагин, который можно использовать либо с элементами, либо отдельно, и вы хотите получить к нему доступ как $. MyPlugin или $ ("" ) .myPlugin () , вы можете повторно использовать одну и ту же функцию для обоих.

Допустим, нам нужно настраиваемое предупреждение, в котором дата добавляется к каждому сообщению с предупреждением.При использовании в качестве автономной функции мы передаем ей сообщение в качестве аргумента, а при использовании с элементами она использует текст элемента в качестве сообщения:

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

    $.myAlert = myAlert;

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

Он заключен в самоисполняющуюся функцию поэтому myAlert не распространяется на глобальную область. Это пример повторного использования функций между обеими формами плагина.

Как упоминалось в IV, рекомендуется возвращать сам обернутый элемент jQuery, так как вы не хотите разрывать цепочку.

Наконец, я нашел похожие вопросы: -)

• Разница между jQuery.extend и jQuery.fn.extend?
• jQuery plugin .fn question
• jQuery Plugin Authoring: Почему некоторые делают jQuery.pluginName и другие jQuery.fn.pluginName?
• в jQuery в чем разница между $ .myFunction и $ .fn.myFunction?

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

alert($.a());

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

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