jquery - разница между $ .functionName и $ .fn.FunctionName

Question

В jQuery я видел оба следующих способа определения функции jQuery:

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

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

Я понимаю, что они прикреплены к объекту jQuery (или $), но в чем разница между ними? Когда я должен использовать один или другой?

Спасибо.

Answer 1

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

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

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

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

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

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

Для этого случая вы просто добавите метод log к объекту jQuery iself:

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

$.log("much better");

Однако при работе с элементами вы бы хотели использовать другую форму. Например, если у вас есть графический плагин (plotGraph), который берет данные из <table> и генерирует график - вы должны использовать форму $.fn.*.

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

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

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

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

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

    $.myAlert = myAlert;

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

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

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

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

• Разница между jQuery.extend и jQuery.fn.extend?
• jQuery плагин .fn вопрос
• Разработка плагинов jQuery: почему некоторые делают jQuery.pluginName, а другие jQuery.fn.pluginName?
• в jQuery В чем разница между $ .myFunction и $ .fn.myFunction?

Answer 2

A

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

alert($.a());

B

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

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

Answer 3

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

Чтобы добавить функцию в пространство имен jQuery, просто добавьте новую функцию как свойство объекта jQuery:

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

Чтобы использовать его, мы можем написать:

jQuery.globalFunction();

Или

$.globalFunction();

Добавление методов instand аналогично, но вместо этого мы расширяем объект jQuery.fn.

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

Мы можем вызвать этот новый метод, используя любое выражение селектора

$('div').myMethod();

Для полного объяснения, пожалуйста, обратитесь к Эта ссылка