Apa arti jQuery.fn?

569

Apa artinya di fnsini?

jQuery.fn.jquery
javascript jquery ajsie
sumber

Jawaban:

848

Di jQuery, fnproperti hanyalah alias ke prototypeproperti.

The jQueryidentifier (atau $) hanya fungsi konstruktor , dan semua contoh dibuat dengan itu, mewarisi dari prototipe konstruktor.

Fungsi konstruktor sederhana:

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

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

Struktur sederhana yang menyerupai arsitektur 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"
CMS
sumber
4
Apakah ini dijamin benar? Bisakah saya menganggap panggilan ke jQuery.prototype persis sama dengan jQuery.fn? Kekhawatiran saya adalah jika jQuery melakukan sihir ketika Anda menelepon .fn maka mereka tidak dapat dipertukarkan
Brandon
4
Oh, saya kehilangan sesuatu .. 'window.foo = foo' memberi 'foo' cakupan global? tidak pernah baru itu, saya akan menambahkan itu ke daftar teknik untuk belajar.
EE33
2
@ EE33 Jika saya tidak salah, cakupan global dalam javascript berarti bahwa variabel Anda adalah parameter objek jendela.
Shawn
1
@Imray - return thisuntuk memungkinkan chaining , jadi Anda bisa melakukannyafoo("bar").myPlugin().otherPlugin()
Racing Tadpole
3
@ Shawn Saya pikir itu akan disebut properti, bukan parameter, kan? Parameter akan menjadi variabel 'a' di sini function func1 (a) { ... }, dan properti akan menjadi variabel 'a' di sini var foo = {}; foo.a = 'a'.
Zack
145

jQuery.fndidefinisikan singkatan untuk jQuery.prototype. Dari kode sumber :

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

Itu berarti jQuery.fn.jqueryalias untuk jQuery.prototype.jquery, yang mengembalikan versi jQuery saat ini. Lagi dari kode sumber :

// The current version of jQuery being used
jquery: "@VERSION",
Andy E
sumber
15
Saya suka jawaban ini. Saya menunjukkan dengan tepat bagaimana menemukan definisi di dalam kode sumber, dan kemudian bagaimana menafsirkan definisi dengan cara yang bermanfaat. Metode menjawab "mengajar manusia untuk memancing" yang baik. +1.
EE33
tetapi apa tujuan melakukan itu? hanya menyimpan beberapa keystroke?
lereng
@slier: ya, cukup banyak.
Andy E
saya bertaruh ada tujuan lain..fungsi pengajaran ke $ .fn, akan membuat fungsi statis
slier
145

fnsecara harfiah mengacu pada jquery prototype.

Baris kode ini ada dalam kode sumber:

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

Tetapi alat yang sebenarnya di belakang fnadalah ketersediaannya untuk menghubungkan fungsionalitas Anda sendiri ke jQuery. Ingatlah bahwa jquery akan menjadi lingkup induk untuk fungsi Anda, jadi thisakan merujuk ke objek jquery.

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

Jadi di sini adalah contoh sederhana dari itu. Katakanlah saya ingin membuat dua ekstensi, satu yang menempatkan batas biru, dan yang warna teks biru, dan saya ingin mereka dirantai.

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

Sekarang Anda bisa menggunakan itu terhadap kelas seperti ini:

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

(Saya tahu ini paling baik dilakukan dengan css seperti menerapkan nama kelas yang berbeda, tapi harap diingat ini hanya demo untuk menunjukkan konsepnya)

Jawaban ini memiliki contoh bagus tentang ekstensi penuh.

Travis J
sumber
11
Tidak bisakah Anda hanya melewatkan eachkode contoh Anda? $.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; };akan bekerja dengan baik, seperti yang .css()disebutkan di atas elemen.
SoonDead
6
@SoonDead - Anda pasti bisa karena jika objek jQuery menyimpan koleksi maka cssfungsi akan secara otomatis beralih ke mereka secara internal dengan masing-masing. Itu hanya contoh menunjukkan perbedaan di thismana yang luar adalah objek jquery dan yang dalam referensi elemen itu sendiri.
Travis J
1
@SoonDead Komentar yang bagus, tapi saya sangat suka bagaimana Travis J menjelaskan ide / prinsipnya. :)
Sander
5
Ini adalah komentar terbaik - Mengetahui bahwa fn hanya sebuah alias tidak berguna seperti mengetahui mengapa orang harus peduli, dan jawaban ini menunjukkannya dengan indah.
Gerard ONeill
1
Setelah melalui jawaban yang lain, saya menemukan ini menjadi lebih mudah untuk memahami konsep utama. Terima kasih. :)
VivekP
0

Dalam kode sumber jQuery yang kita miliki jQuery.fn = jQuery.prototype = {...}sejak itu jQuery.prototypeadalah sebuah objek nilai jQuery.fnhanya akan menjadi referensi ke objek yang sama yang jQuery.prototypesudah referensi.

Untuk mengonfirmasi ini, Anda dapat memeriksa jQuery.fn === jQuery.prototypeapakah yang mengevaluasi true(yang ia lakukan) maka mereka merujuk objek yang sama

Yehuda Schwartz
sumber