web-dev-qa-db-fra.com

Que signifie jQuery.fn?

Que signifie fn ici?

jQuery.fn.jquery
javascriptjquery
530
ajsie

Dans jQuery, la propriété fn n'est qu'un alias de la propriété prototype.

L'identificateur jQuery (ou $) est simplement une fonction constructeur, et toutes les instances créées avec ce dernier héritent du prototype du constructeur.

Une fonction constructeur simple:

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

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

Une structure simple qui ressemble à l'architecture de 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"
818
CMS

jQuery.fn est défini en abrégé pour jQuery.prototype. À partir du code source :

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

Cela signifie que jQuery.fn.jquery est un alias pour jQuery.prototype.jquery, qui renvoie la version actuelle de jQuery. Encore une fois à partir du code source :

// The current version of jQuery being used
jquery: "@VERSION",
140
Andy E

fn fait littéralement référence à jquery prototype.

Cette ligne de code est dans le code source:

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

Mais le véritable outil derrière fn est sa disponibilité à intégrer vos propres fonctionnalités à jQuery. N'oubliez pas que jquery sera l'étendue parent de votre fonction, donc this fera référence à l'objet jquery.

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

Voici donc un exemple simple de cela. Disons que je veux faire deux extensions, une qui met une bordure bleue, et qui colore le texte en bleu, et je les veux chaînées.

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;
};

Maintenant, vous pouvez utiliser ceux contre une classe comme celle-ci:

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

(Je sais que cela est mieux fait avec des CSS comme l'application de noms de classes différents, mais s'il vous plaît gardez à l'esprit qu'il ne s'agit que d'une démonstration pour montrer le concept)

Cette réponse a un bon exemple d'extension complète.

134
Travis J

Dans le code source de jQuery, nous avons jQuery.fn = jQuery.prototype = {...} car jQuery.prototype est un objet. La valeur de jQuery.fn sera simplement une référence au même objet que jQuery.prototype fait déjà référence.

Pour le confirmer, vous pouvez vérifier jQuery.fn === jQuery.prototype si cela évalue true (ce qui est le cas), puis ils référencent le même objet. 

0
Yehuda Schwartz