मैं jQuery प्लगइन सिंटैक्स को समझना चाहूंगा

Question

JQuery की साइट jQuery के लिए मूल प्लगइन सिंटैक्स को इस प्रकार सूचीबद्ध करती है:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

मैं यह समझना चाहता हूं कि जावास्क्रिप्ट के दृष्टिकोण से वहां क्या हो रहा है, क्योंकि यह नहीं लगता है कि यह किसी भी वाक्यविन्यास का अनुसरण करता है जिसे मैंने जेएस से पहले देखा है। तो यहाँ मेरे सवालों की सूची है:

1. यदि आप फ़ंक्शन ($) को बदलते हैं ... एक चर के साथ, "the_function" कहें, तो सिंटैक्स इस तरह दिखता है:

    (the_function)( jQuery );

   "(JQuery) क्या है?" करते हुए? क्या The_function के आसपास कोष्ठक वास्तव में आवश्यक हैं? वो लोग वहाँ क्यों हैं? क्या कोई दूसरा कोड है जो आप दे सकते हैं जो समान है?

2. यह फ़ंक्शन ($) से शुरू होता है। तो यह एक फ़ंक्शन बना रहा है, जहां तक ​​मैं बता सकता हूं कि कभी भी नहीं चलाया जाएगा, $ के पैरामीटर के साथ, जो पहले से ही परिभाषित है? क्या चल रहा हैं उधर?

सहायता के लिए धन्यवाद!

Answer 1

function(x){ 
    x...
}

एक नाम के बिना सिर्फ एक फ़ंक्शन है, जो एक तर्क लेता है, "x", और x के साथ चीजें करता है।

'X' के बजाय, जो एक सामान्य परिवर्तनशील नाम है, आप $ का उपयोग कर सकते हैं, जो एक कम सामान्य चर नाम है, लेकिन फिर भी कानूनी है।

function($){ 
    $...
}

मैं इसे एक अभिव्यक्ति के रूप में सुनिश्चित करने के लिए कोष्ठक में रखूँगा:

(function($){
    $....
})

किसी फ़ंक्शन को कॉल करने के लिए, आप उसके बाद () तर्कों की एक सूची के साथ डालते हैं। उदाहरण के लिए, यदि हम इस फ़ंक्शन को 3 में पास करना चाहते हैं, तो हम $ऐसा करेंगे:

(function($){
    $...
})(3);

बस किक के लिए, इस फ़ंक्शन को कॉल करें और jQuery में एक चर के रूप में पास करें:

(function($){
     $....
})(jQuery);

यह एक नया फ़ंक्शन बनाता है जो एक तर्क लेता है और फिर उस फ़ंक्शन को कॉल करता है, मान के रूप में jQuery में गुजर रहा है।

क्यों?

• क्योंकि jQuery लिखना हर बार जब आप jQuery के साथ कुछ करना चाहते हैं तो थकाऊ है।

क्यों सिर्फ राइट नहीं $ = jQuery?

• क्योंकि हो सकता है किसी और ने $ $ का मतलब कुछ और किया हो। यह गारंटी देता है कि $ का कोई अन्य अर्थ इस पर छाया हुआ है।

Comments

यह स्पष्ट है, लेकिन यह एक परिभाषा को एक अभिव्यक्ति के रूप में फ़ंक्शन परिभाषा को पार्स करने में मार्गदर्शन करने की आवश्यकता पर एक विस्तार याद कर रहा है और एक बयान नहीं । यही कारण है कि अतिरिक्त कोष्ठक हैं।

— नुकीले

(function(){})()IIFE के रूप में जाना जाता है (तुरंत इनवॉइस फंक्शन एक्सप्रेशन) । यह ज्ञात हो कि आप पार्सर को इस तरह की +,!,-,~(और अन्य) अभिव्यक्ति के रूप में कार्य करने के लिए मजबूर करने के लिए अन्य प्रतीकों का उपयोग कर सकते हैं !function($){}(jQuery):। और भी अधिक मज़ा के लिए आप कर सकते हैं ~~+-!function($){}(jQuery):!

— डेविड मर्डोक

(फ़ंक्शन ($, विन, डॉक) {$ ....}) (jQuery, विंडो, दस्तावेज़); मैं इसे भी जोड़ूंगा ... इससे मुझे बेहतर समझने में मदद मिली। कोड की शांति में, jQuery ---> $; और खिड़की ---> जीत; फिर दस्तावेज़ ---> डॉक्टर ... :) धन्यवाद ...

— हरनध

मैंने एक कोड नमूने का सामना किया है जो IMHO उपरोक्त सूची में शामिल नहीं है: $ (फ़ंक्शन () {.....} (jQuery)); (यहाँ से लिया गया: docs.microsoft.com/en-us/aspnet/core/mvc/models/… )। यहाँ, मैं $ का उपयोग नहीं समझता। ऐसा प्रतीत नहीं होता है कि या तो jQuery चयनकर्ता $ (...) या 'दस्तावेज़ तैयार' घटना के लिए एक छोटा वाक्यविन्यास है, क्योंकि फ़ंक्शन कुछ भी नहीं देता है। मैं फ़ंक्शन को अभिव्यक्ति के रूप में मानने के लिए एक उपसर्ग भी नहीं लगता, क्योंकि इसके ब्रेसिज़ के बाहर। अधिक, फ़ंक्शन कॉल को ब्रेसिज़ बनाया जाता है, इसलिए हम घोषणा को बुला रहे हैं।

— सिच

Answer 2

---

(function( $ ){

})( jQuery );

यह स्व-निष्पादित अनाम फ़ंक्शन है जो $तर्क में उपयोग करता है ताकि आप उस फ़ंक्शन $के jQueryअंदर के बजाय ( ) का उपयोग कर सकें और अन्य पुस्तकालयों के साथ संघर्ष के डर के बिना कर सकें क्योंकि अन्य पुस्तकालयों में भी $विशेष अर्थ है। JQuery प्लगिन लिखते समय वह पैटर्न विशेष रूप से उपयोगी है।

आप इसके बजाय किसी भी चरित्र को लिख सकते $हैं:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

यहाँ jस्वचालित रूप से अंत में निर्दिष्ट jQuery को पकड़ लेंगे (jQuery)। या आप तर्क को पूरी तरह से छोड़ सकते हैं लेकिन तब आपको टक्कर का कोई डर नहीं होने के jQueryबजाय चारों ओर कीवर्ड का उपयोग करना होगा $। तो $शॉर्ट-हैंड के लिए तर्क में लिपटे हुए हैं ताकि आप उस फ़ंक्शन के चारों ओर के $बजाय लिख सकें jQuery।

यदि आप jQuery के स्रोत कोड को भी देखते हैं, तो आप देखेंगे कि सब कुछ बीच में लिपटा हुआ है:

(function( window, undefined ) {
  // jQuery code
})(window);

जैसा कि देखा जा सकता है तर्कों के साथ एक स्व-निष्पादित अनाम फ़ंक्शन भी देखा जा सकता है। A windowऔर undefined) तर्क बनाया जाता है और windowसबसे नीचे वैश्विक ऑब्जेक्ट के साथ मैप किया जाता है (window)। यह इन दिनों लोकप्रिय पैटर्न है और इसमें बहुत कम गति है क्योंकि यहां windowवैश्विक windowऑब्जेक्ट के बजाय तर्क से ध्यान दिया जाएगा जो नीचे मैप किया गया है।

---

$.fnJQuery के वस्तु जहाँ आप अपने नए समारोह (जो भी है एक वस्तु) या ताकि jQuery अपने में अपने प्लगइन लपेटता ही प्लगइन बनाने है $.fnवस्तु और यह उपलब्ध है।

---

दिलचस्प बात यह है कि मैंने यहां भी इसी तरह के सवाल का जवाब दिया था:

जावास्क्रिप्ट / jQuery बंद समारोह वाक्यविन्यास

स्व-निष्पादित कार्यों के बारे में अधिक जानने के लिए आप इस लेख को देख सकते हैं जो मैंने लिखा था:

जावास्क्रिप्ट स्व-निष्पादित कार्य

Comments

इसलिए यदि मेरे पास my_object नाम की कोई वस्तु है, और उसने यह किया है: (function (mo) {mo.doSomething ()}) (my_object), तो यह my_object.doSomething () चलाएगा?

— ईथन

Answer 3

मूल प्लगइन सिंटैक्स आपको अपने प्लगइन के शरीर में $संदर्भित करने के लिए उपयोग करने की अनुमति देता है jQuery, भले $ही प्लगइन लोड होने के समय की पहचान की परवाह किए बिना । यह अन्य पुस्तकालयों के साथ नामकरण संघर्ष को रोकता है, सबसे विशेष रूप से प्रोटोटाइप।

वाक्यविन्यास एक फ़ंक्शन को परिभाषित करता है जो एक पैरामीटर को स्वीकार करता है $ताकि आप इसे $फ़ंक्शन बॉडी के रूप में संदर्भित कर सकें , और फिर उस फ़ंक्शन को तुरंत jQueryतर्क के रूप में डालते हैं ।

यह ग्लोबल नेमस्पेस को प्रदूषित नहीं करने में भी मदद करता है (इसलिए var myvar = 123;आपके प्लगइन बॉडी में घोषणा करना अचानक परिभाषित नहीं होगा window.myvar), लेकिन मुख्य अस्थिर उद्देश्य आपको उपयोग करने की अनुमति देना है $जहां $से इसे फिर से परिभाषित किया जा सकता है।

Answer 4

आप वहां स्व-चालान करने वाले अनाम फ़ंक्शन के साथ काम कर रहे हैं। यह सुनिश्चित करने के लिए इस तरह के एक समारोह के भीतर एक jQuery प्लगइन लपेट करने के लिए "सबसे अच्छा अभ्यास" की तरह है, यह है कि $संकेत jQueryवस्तु के लिए बाध्य है ।

उदाहरण:

(function(foo) {
    alert(foo);
}('BAR'));

यह BARएक <script>ब्लॉक में डालने पर सतर्क हो जाएगा । पैरामीटर BARउस फ़ंक्शन को पास किया जाता है जो खुद को कॉल करता है।

आपके कोड में एक ही सिद्धांत हो रहा है, jQueryऑब्जेक्ट फ़ंक्शन को पास किया गया है, इसलिए $यह सुनिश्चित करने के लिए jQuery ऑब्जेक्ट को संदर्भित करेगा।

Comments

मुझे वह सब समझ में आ रहा है। मैं यह जानना चाहता हूं कि स्वयं निष्पादन कार्य करने के लिए ब्रैकेट सिंटैक्स क्यों / कैसे काम करता है? क्या यह केवल भाषा की एक विशेषता है? यह कैसे काम करता है?

— मांस

Answer 5

अंत में jQuery फ़ंक्शन के ऊपर स्वयं (jQuery) पास करता है, ताकि आप अपने प्लगइन के भीतर $ प्रतीक का उपयोग कर सकें। आप ccould भी करते हैं

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Answer 6

इस और अन्य आधुनिक जावास्क्रिप्ट ट्रिक्स और सामान्य प्रथाओं का स्पष्ट विवरण खोजने के लिए, मैं जावास्क्रिप्ट गार्डन पढ़ने की सलाह देता हूं।

http://bonsaiden.github.com/JavaScript-Garden/

यह विशेष रूप से उपयोगी है, क्योंकि इनमें से कई पैटर्न व्यापक रूप से कई पुस्तकालयों में उपयोग किए जाते हैं, लेकिन वास्तव में समझाया नहीं गया है।

Answer 7

यहाँ अन्य उत्तर महान हैं, लेकिन एक महत्वपूर्ण बिंदु है जिसे संबोधित नहीं किया गया है। तुम कहो:

तो यह एक फ़ंक्शन बना रहा है, जहां तक ​​मैं बता सकता हूं कि कभी भी नहीं चलाया जाएगा, $ के पैरामीटर के साथ, जो पहले से ही परिभाषित है?

वैश्विक चर $उपलब्ध होने की कोई गारंटी नहीं है । डिफ़ॉल्ट रूप से, jQuery वैश्विक दायरे में दो चर बनाता है: $और jQuery(जहां दोनों एक ही वस्तु के लिए उपनाम हैं)। हालाँकि, jQuery को noConflict मोड में भी चलाया जा सकता है :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

जब आप कॉल करते हैं jQuery.noConflict(), $तो jQuery लाइब्रेरी को शामिल करने से पहले वैश्विक चर को वापस सेट कर दिया जाता है। यह jQuery को अन्य जावास्क्रिप्ट पुस्तकालयों के साथ उपयोग करने की अनुमति देता है जो $एक वैश्विक चर के रूप में भी उपयोग करते हैं ।

यदि आपने एक प्लगइन लिखा है जो $jQuery के लिए एक उपनाम होने पर निर्भर है , तो आपका प्लगइन noConflower मोड में चलने वाले उपयोगकर्ताओं के लिए काम नहीं करेगा।

जैसा कि दूसरों ने पहले ही समझाया है, आपके द्वारा पोस्ट किया गया कोड एक अनाम फ़ंक्शन बनाता है जिसे तुरंत कहा जाता है। वैश्विक चर jQueryको फिर इस अनाम फ़ंक्शन में पास किया जाता है, जिसे फ़ंक्शन के भीतर स्थानीय चर के रूप में सुरक्षित रूप से अलियास किया जाता है $।