JQuery.fn anlamı ne?

fnBurada ne anlama geliyor?

jQuery.fn.jquery

JQuery'de, fnözellik yalnızca mülkün diğer adıdır prototype.

jQueryTanımlayıcı (veya $) sadece bir yapıcı işlevi ve şantiye prototip devralan onunla oluşturulan tüm örneklerdir.

Basit bir yapıcı işlevi:

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

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

JQuery mimarisine benzeyen basit bir yapı:

(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"

jQuery.fniçin kısayol tanımlanmıştır jQuery.prototype. Gönderen kaynak kodu :

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

Bu , geçerli jQuery sürümünü döndüren jQuery.fn.jquerybir diğer jQuery.prototype.jqueryaddır. Yine kaynak koddan :

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

fnkelimenin tam anlamıyla jquery anlamına gelir prototype.

Bu kod satırı kaynak kodundadır:

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

Ancak arkasındaki gerçek araç fn, kendi işlevselliğinizi jQuery'ye bağlamak için kullanılabilirliğidir. Jquery'nin işlevinizin üst kapsamı olacağını unutmayın, bu nedenle thisjquery nesnesine atıfta bulunun.

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

İşte bunun basit bir örneği. Biri mavi bir kenarlık yerleştiren ve metni mavi renklendiren iki uzantı yapmak istediğimi ve bunların zincirlenmesini istiyorum.

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

Şimdi bunları böyle bir sınıfa karşı kullanabilirsiniz:

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

(Bunun en iyi farklı sınıf isimleri uygulamak gibi css ile yapıldığını biliyorum, ancak lütfen bunun sadece konsepti göstermek için bir demo olduğunu unutmayın)

Bu cevabın tam teşekküllü bir uzantıya iyi bir örneği var.

Elimizdeki jQuery kaynak kodunda jQuery.fn = jQuery.prototype = {...}beri jQuery.prototypebir nesne değeri jQuery.fnbasitçe aynı nesneye bir referans olacaktır jQuery.prototypezaten referanslar.

Bunu onaylamak için jQuery.fn === jQuery.prototypebunun değerlendirip değerlendirmediğini true(hangisinin yaptığı) kontrol edebilirsiniz.