JQuery.fn का क्या अर्थ है?

Question

fnयहाँ क्या मतलब है?

jQuery.fn.jquery

Answer 1

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"

Comments

क्या यह सच होने की गारंटी है? क्या मैं jQuery.prototype के लिए एक कॉल मान सकता हूँ जो jQuery.fn के समान है? मेरी चिंता यह है कि जब आप कॉल करते हैं तो jQuery कुछ जादू करता है। यदि वे विनिमेय नहीं हैं

— ब्रैंडन

ओह, मुझे कुछ याद आ रहा है .. 'window.foo = foo' वैश्विक स्तर पर 'फू' देता है? नया कभी नहीं, मैं इसे सीखने की तकनीक की अपनी सूची में जोड़ दूंगा।

— ईई 33

@ EE33 अगर मुझसे गलती नहीं हुई है, तो जावास्क्रिप्ट में वैश्विक गुंजाइश का सीधा सा मतलब है कि आपका वैरिएबल विंडो ऑब्जेक्ट का एक पैरामीटर है।

— शॉन

@Imray - return thisअनुमति देने के लिए चेनिंग तो तुम कर सकते हो,foo("bar").myPlugin().otherPlugin()

— दौड़ टैडपोल

@ मुझे लगता है कि इसे संपत्ति कहा जाएगा, पैरामीटर नहीं, है ना? एक पैरामीटर यहाँ 'a' वेरिएबल function func1 (a) { ... }होगा, और एक प्रॉपर्टी यहाँ 'a' वेरिएबल होगी var foo = {}; foo.a = 'a'।

— ज़ैक

Answer 2

jQuery.fnके लिए आशुलिपि परिभाषित किया गया है jQuery.prototype। से स्रोत कोड :

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

इसका मतलब jQuery.fn.jqueryहै कि एक उपनाम है jQuery.prototype.jquery, जो वर्तमान jQuery संस्करण लौटाता है। स्रोत कोड से फिर :

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

Comments

मुझे यह उत्तर पसंद है। मैं वास्तव में दिखाता हूं कि स्रोत कोड के अंदर परिभाषा को कैसे खोजना है, और फिर एक उपयोगी तरीके से परिभाषा की व्याख्या कैसे करें। अच्छा राजभाषा "" एक आदमी को मछली सिखाना "उत्तर देने की विधि। +1।

— EE33

लेकिन ऐसा करने का उद्देश्य क्या है? सिर्फ कीस्ट्रोके की बचत युगल?

— slier

@ अधिक: हाँ, बहुत ज्यादा।

— एंडी ई

मुझे यकीन है कि वहाँ अन्य उद्देश्य है .. $ फंक्शन के लिए कोचिंग, स्थैतिक समारोह कर देगा

— '23

Answer 3

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();

(मुझे पता है कि यह सीएसएस के साथ सबसे अच्छा किया जाता है जैसे कि विभिन्न वर्ग नाम लागू करना, लेकिन कृपया ध्यान रखें कि यह अवधारणा दिखाने के लिए सिर्फ एक डेमो है)

इस उत्तर में पूर्ण विस्तार का एक अच्छा उदाहरण है।

Comments

क्या आप eachअपने उदाहरण कोड में सिर्फ छोड़ नहीं सकते ? $.fn.blueBorder = function(){ this.css("border","solid blue 2px"); return this; };ठीक काम करेगा, जैसा कि .css()एलरडी तत्वों पर निर्भर करता है।

— जल्द ही

@SoonDead - आप निश्चित रूप से कर सकते हैं क्योंकि अगर jQuery ऑब्जेक्ट एक संग्रह रखता है, तो cssफ़ंक्शन स्वचालित रूप से प्रत्येक के साथ आंतरिक रूप से उन पर पुनरावृति करेगा। यह उन मतभेदों को दर्शाने का एक उदाहरण था thisजहां बाहरी एक jquery वस्तु है और आंतरिक एक तत्व को संदर्भित करता है।

— ट्रैविस जे

@SoonDead अच्छी टिप्पणी है, लेकिन मुझे वास्तव में पसंद है कि ट्रैविस जे ने विचार / सिद्धांत को कैसे समझाया। :)

— सेंडर

यह सबसे अच्छी टिप्पणी है - यह जानना कि fn सिर्फ एक उपनाम है लगभग उतना उपयोगी नहीं है जितना यह जानना कि किसी को भी क्यों परवाह करनी चाहिए, और इस जवाब ने इसे खूबसूरती से प्रदर्शित किया।

— गेरार्ड ओनील

अन्य उत्तरों के माध्यम से जाने के बाद, मैंने इसे मुख्य अवधारणा को समझने में आसान पाया। धन्यवाद। :)

— विवेक

Answer 4

JQuery स्रोत कोड हम में jQuery.fn = jQuery.prototype = {...}के बाद से jQuery.prototypeएक वस्तु है का मूल्य jQuery.fnकेवल एक ही उद्देश्य यह है कि के लिए एक संदर्भ हो जाएगाjQuery.prototype पहले से ही संदर्भ।

इसकी पुष्टि करने के लिए आप जांच कर सकते हैं jQuery.fn === jQuery.prototypeकि क्या मूल्यांकन true(जो यह करता है) तो वे उसी वस्तु का संदर्भ देते हैं