Co robi jQuery.FN mean?

Question

Co robi jQuery.FN mean?

Co oznacza fn tutaj?

jQuery.fn.jquery

583

javascript jquery

Author: Yehuda Schwartz, 2010-11-03

Source

4 answers

fn dosłownie odnosi się do jquery prototype.

Ten wiersz kodu znajduje się w kodzie źródłowym:

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

Ale prawdziwym narzędziem stojącym za fn jest jego dostępność do podłączenia własnej funkcjonalności do jQuery. Pamiętaj, że jQuery będzie obszarem nadrzędnym twojej funkcji, więc this będzie odnosił się do obiektu jquery.

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

Oto prosty przykład. Powiedzmy, że chcę zrobić dwa rozszerzenia, jedno, które umieszcza niebieską ramkę i które koloruje tekst na niebiesko, i chcę je przykuta.

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

Teraz możesz użyć ich przeciwko klasie takiej jak ta:

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

(wiem, że najlepiej jest to zrobić przy użyciu css, takich jak stosowanie różnych nazw klas, ale proszę pamiętać, że jest to tylko demo, aby pokazać koncepcję)

Ta odpowiedź ma dobry przykład pełnego rozszerzenia.

151

Author: Travis J,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-26 08:10:21

jQuery.fn jest zdefiniowany skrótem jQuery.prototype. Z kodu źródłowego :

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

Oznacza to, że jQuery.fn.jquery jest aliasem dla jQuery.prototype.jquery, który zwraca bieżącą wersję jQuery. Ponownie z kodu źródłowego :

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

146

Author: Andy E,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-06 10:03:23

W kodzie źródłowym jQuery mamy jQuery.fn = jQuery.prototype = {...} ponieważ jQuery.prototype jest obiektem, wartość jQuery.fn będzie po prostu odniesieniem do tego samego obiektu, do którego już się odwołuje jQuery.prototype.

Aby to potwierdzić, możesz sprawdzić jQuery.fn === jQuery.prototype jeśli to ewaluuje true (co robi), to odwołują się do tego samego obiektu

1

Author: Yehuda Schwartz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-01 15:30:08

score 862 · Accepted Answer

W jQuery właściwość fn jest tylko aliasem do Właściwości prototype.

Identyfikator jQuery (lub $) jest po prostu funkcją konstruktora , a wszystkie instancje utworzone za jego pomocą dziedziczą po prototypie konstruktora.

Prosta funkcja konstruktora:

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

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

Prosta struktura przypominająca architekturę 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"