Что значит jQuery.fn?

478

Что означает "fn"?

window.jQuery.fn.jquery
Теги:

3 ответа

798
Лучший ответ

В jQuery свойство fn является просто псевдонимом свойства prototype.

Идентификатор jQuery (или $) - это просто функция-конструктор, и все созданные им экземпляры наследуются от прототипа конструктора.

Простая конструкторская функция:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

Простая структура, похожая на архитектуру jQuery:

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"
Поделиться
  • 4
    Это гарантировано, чтобы быть правдой? Могу ли я предположить, что вызов jQuery.prototype точно такой же, как и jQuery.fn? Меня беспокоит то, что если jQuery делает что-то волшебное, когда вы вызываете .fn, то они не являются взаимозаменяемыми.
  • 0
    как вы можете расширить 'foo' в вашем примере, если 'foo' был объявлен только внутри анонимной функции? Я что-то пропустил?
Показать ещё 7 комментариев
132

jQuery.fn определена стенограмма для jQuery.prototype. Из исходного кода:

jQuery.fn = jQuery.prototype = {
    // ...
}

Это означает, что jQuery.fn.jquery является псевдонимом для jQuery.prototype.jquery, который возвращает текущую версию jQuery. Снова из исходного кода:

// The current version of jQuery being used
jquery: "@VERSION",
Поделиться
  • 14
    Мне нравится этот ответ. Я покажу, как именно найти определение в исходном коде, а затем, как правильно интерпретировать определение. Хороший старый способ научить человека ловить рыбу. +1.
  • 0
    но какова цель сделать это? просто сохранить пару нажатий клавиш?
Показать ещё 2 комментария
106

fn буквально относится к jquery prototype.

Эта строка кода находится в исходном коде:

jQuery.fn = jQuery.prototype = {
 //list of functions available to the jQuery api
}

Но реальным инструментом, стоящим за fn, является его доступность для подключения ваших собственных функций в jQuery. Помните, что jquery будет родительской областью для вашей функции, поэтому this будет ссылаться на объект jquery.

$.fn.myExtension = function(){
 var currentjQueryObject = this;
 //work with currentObject
 return this;//you can include this if you would like to support chaining
};

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

jsFiddle Demo

$.fn.blueBorder = function(){
 this.each(function(){
  $(this).css("border","solid blue 2px");
 });
 return this;
};
$.fn.blueText = function(){
 this.each(function(){
  $(this).css("color","blue");
 });
 return this;
};

Теперь вы можете использовать их для класса следующим образом:

$('.blue').blueBorder().blueText();

(Я знаю, что это лучше всего делать с css, например, с применением разных имен классов, но, пожалуйста, имейте в виду, что это просто демоверсия, чтобы показать концепцию)

Этот ответ имеет хороший пример полноценного расширения.

Поделиться
  • 11
    Разве вы не можете просто пропустить each из each в своем примере кода? $.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; }; будет работать нормально, так как .css() alerady перебирает элементы.
  • 5
    @SoonDead - Вы, конечно, могли бы, потому что, если объект jQuery содержит коллекцию, функция css автоматически перебирает их внутри каждого из них. Это был просто пример, показывающий различия в this где внешний является объектом jquery, а внутренний ссылается на сам элемент.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню