jQuery.fn หมายถึงอะไร

อะไรfnที่นี่หมายถึงอะไร?

jQuery.fn.jquery

ใน jQuery fnคุณสมบัติเป็นเพียงนามแฝงของprototypeคุณสมบัติ

jQueryระบุ (หรือ$) เป็นเพียงฟังก์ชั่นคอนสตรัคและอินสแตนซ์ทั้งหมดที่สร้างขึ้นกับมันสืบทอดมาจากต้นแบบคอนสตรัคของ

ฟังก์ชันตัวสร้างแบบง่าย:

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

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

โครงสร้างอย่างง่ายที่คล้ายกับสถาปัตยกรรมของ 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"

jQuery.fnjQuery.prototypeถูกกำหนดชวเลข จากซอร์สโค้ด :

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

นั่นหมายถึงjQuery.fn.jqueryนามแฝงสำหรับjQuery.prototype.jqueryซึ่งส่งคืนเวอร์ชัน jQuery ปัจจุบัน อีกครั้งจากซอร์สโค้ด :

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

fnหมายถึง jquery prototypeอย่างแท้จริง

บรรทัดของโค้ดนี้อยู่ในซอร์สโค้ด:

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

แต่เครื่องมือจริงที่อยู่เบื้องหลังfnคือความพร้อมในการเชื่อมโยงการทำงานของคุณเข้ากับ jQuery โปรดจำไว้ว่า jquery จะเป็นขอบเขตหลักของฟังก์ชันของคุณดังนั้นthisจะอ้างถึงวัตถุ jquery

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

นี่คือตัวอย่างง่ายๆของสิ่งนั้น ให้บอกว่าฉันต้องการที่จะทำให้สองส่วนขยายหนึ่งซึ่งทำให้เส้นขอบสีฟ้าและที่สีข้อความสีฟ้าและฉันต้องการให้พวกเขาถูกล่ามโซ่

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

ตอนนี้คุณสามารถใช้คลาสเหล่านี้กับคลาสนี้ได้:

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

(ฉันรู้ว่าสิ่งนี้ทำได้ดีที่สุดกับ css เช่นการใช้ชื่อคลาสที่ต่างกัน แต่โปรดจำไว้ว่านี่เป็นเพียงตัวอย่างเพื่อแสดงแนวคิด)

คำตอบนี้มีตัวอย่างที่ดีของส่วนขยายแบบเต็ม

ในซอร์สโค้ด jQuery เรามีjQuery.fn = jQuery.prototype = {...}ตั้งแต่jQuery.prototypeเป็นวัตถุค่าของjQuery.fnจะเป็นการอ้างอิงไปยังวัตถุเดียวกันที่jQuery.prototypeอ้างอิงแล้ว

เพื่อยืนยันสิ่งนี้คุณสามารถตรวจสอบjQuery.fn === jQuery.prototypeว่าประเมินtrue(ซึ่งมัน) แล้วพวกเขาอ้างอิงวัตถุเดียวกัน