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

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

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

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

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

Спасибо.

Ответ 1

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

$.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), который принимает данные из <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 элемента, так как вы не хотите разрушать цепочку.

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

Ответ 2

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

alert($.a());

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

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

Ответ 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();

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