Question Que signifie jQuery.fn?


Que signifie le 'fn' ici?

window.jQuery.fn.jquery

513
2017-11-03 00:46


origine


Réponses:


En jQuery, le fn la propriété est juste un alias à la prototype propriété.

le jQuery identifiant (ou $) est juste un 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"

805
2017-11-03 00:49



jQuery.fn est défini raccourci pour jQuery.prototype. Du code source:

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

Cela signifie jQuery.fn.jquery est un alias pour jQuery.prototype.jquery, qui renvoie la version actuelle de jQuery. Encore de la code source:

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

137
2017-11-03 00:48



fn se réfère littéralement à la 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é pour accrocher votre propre fonctionnalité dans jQuery. Rappelez-vous que jquery sera la portée parentale de votre fonction, donc this se référera à 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
};

Donc, voici 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 veux les enchaîner.

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 c'est mieux fait avec css comme l'application de différents noms de classe, mais s'il vous plaît gardez à l'esprit ce n'est qu'une démonstration pour montrer le concept)

Cette réponse a un bon exemple d'une extension à part entière.


127
2018-04-15 23:47