Pregunta ¿Qué significa jQuery.fn?


¿Qué significa 'fn' aquí?

window.jQuery.fn.jquery

513
2017-11-03 00:46


origen


Respuestas:


En jQuery, el fn la propiedad es solo un alias de la prototype propiedad.

los jQuery identificador (o $) es solo una función constructoray todas las instancias creadas con él heredan del prototipo del constructor.

Una simple función de constructor:

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

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

Una estructura simple que se asemeja a la arquitectura 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 se define taquigrafía para jQuery.prototype. Desde el código fuente:

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

Eso significa jQuery.fn.jquery es un alias para jQuery.prototype.jquery, que devuelve la versión jQuery actual. Nuevamente desde el código fuente:

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

137
2017-11-03 00:48



fn literalmente se refiere al jquery prototype.

Esta línea de código está en el código fuente:

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

Pero la verdadera herramienta detrás fn es su disponibilidad para conectar su propia funcionalidad en jQuery. Recuerde que jquery será el alcance principal de su función, por lo que this se referirá al objeto jquery.

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

Así que aquí hay un simple ejemplo de eso. Digamos que quiero hacer dos extensiones, una que coloque un borde azul, y que coloree el texto en azul, y quiero que estén encadenadas.

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

Ahora puedes usar esos contra una clase como esta:

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

(Sé que esto se hace mejor con CSS, como aplicar diferentes nombres de clase, pero tenga en cuenta que esto es solo una demostración para mostrar el concepto)

Esta respuesta tiene un buen ejemplo de una extensión de pleno derecho.


127
2018-04-15 23:47