क्या करता है (फ़ंक्शन ($) {}) (jQuery); क्या मतलब है?

Question

मैं सिर्फ jQuery प्लगइन्स लिखने के साथ शुरू कर रहा हूँ। मैंने तीन छोटे प्लगइन्स लिखे हैं, लेकिन मैं बस अपने सभी प्लगइन्स में लाइन को कॉपी कर रहा हूं, वास्तव में इसका मतलब जाने बिना। क्या कोई मुझे इनके बारे में कुछ और बता सकता है? किसी ढांचे को लिखते समय शायद किसी दिन कोई स्पष्टीकरण आ जाएगा :)

यह क्या करता है? (मुझे पता है कि यह किसी तरह jQuery का विस्तार करता है लेकिन क्या इसके बारे में जानने के लिए कुछ और दिलचस्प है)

(function($) {

})(jQuery);

प्लगइन लिखने के निम्नलिखित दो तरीकों में क्या अंतर है:

श्रेणी 1:

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

टाइप 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

टाइप 3:

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

मैं यहां से जा सकता हूं और शायद सभी का मतलब एक ही है। मैं उलझन में हूं। कुछ मामलों में, यह एक प्लगइन में काम नहीं कर रहा है जिसे मैं टाइप 1 का उपयोग करके लिख रहा था। अब तक, टाइप 3 मुझे सबसे अधिक सुंदर लगता है, लेकिन मैं दूसरों के बारे में भी जानना चाहता हूं।

Comments

यह समय यहाँ बिस्तर है, लेकिन सिर्फ शुरुआत के लिए, (function($) { })(jQuery);कोड लपेटता ताकि $है jQueryभले ही उस बंद अंदर, $साधन कुछ इसके बारे में किसी और के बाहर आमतौर पर के परिणाम के रूप, $.noConflict()उदाहरण के लिए। यह आपके प्लगइन काम करता है सुनिश्चित करता है, चाहे या नहीं $ === jQuery :)

— निक Craver

आपके बारे में (function($) { })(jQuery)कहा: "मुझे पता है कि यह किसी तरह jQuery का विस्तार करता है [...]"। स्पष्ट रूप से आप नहीं जानते कि आपका कथन 100% गलत है। वैसे यह भविष्य के पाठकों के लिए भ्रामक हो सकता है। : इस एक नजर डालें stackoverflow.com/a/32550649/1636522 ।

— पत्ती

@ NickCraver की टिप्पणियों पर विस्तार करते हुए, jquery-ui-1.7.2.custom.min.js इसका उपयोग उदाहरण के लिए करता है: jQuery.ui || (फ़ंक्शन (c) {var i = c.fn.remove, d = cbrowser मोज़िला ........}) (jQuery) ;. मुझे पता है कि एक पुराना संस्करण jQuery UI के साथ पदावनत कोड है, लेकिन बिंदु यह दिखाना है कि उस मामले में, वे "$" के बजाय "c" का उपयोग कैसे कर रहे हैं।

— Jaime Montoya

Answer 1

सबसे पहले, एक कोड ब्लॉक जो दिखता है (function(){})()वह केवल एक फ़ंक्शन है जिसे जगह में निष्पादित किया जाता है। चलो इसे थोड़ा नीचे तोड़ो।

1. (
2.    function(){}
3. )
4. ()

पंक्ति 2 एक सादा समारोह है, जो पैरेंटिसिस में फंक्शन को पैरेंट स्कोप में वापस करने के लिए रनटाइम बताने के लिए लिपटे हुए है, एक बार जब यह फंक्शन वापस आ जाता है तो लाइन 4 का उपयोग करके निष्पादित किया जाता है, हो सकता है कि इन चरणों के माध्यम से पढ़ने में मदद मिले।

1. function(){ .. }
2. (1)
3. 2()

आप देख सकते हैं कि 1 घोषणा है, 2 फ़ंक्शन वापस कर रहा है और 3 फ़ंक्शन को निष्पादित कर रहा है।

इसका उपयोग कैसे किया जाएगा, इसका एक उदाहरण।

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

प्लगइन्स के बारे में अन्य प्रश्नों के लिए:

टाइप 1: यह वास्तव में एक प्लगइन नहीं है, यह एक फ़ंक्शन के रूप में पारित ऑब्जेक्ट है, क्योंकि प्लगइन्स फ़ंक्शन होते हैं।

टाइप 2: यह फिर से एक प्लगइन नहीं है क्योंकि यह $.fnऑब्जेक्ट का विस्तार नहीं करता है । यह सिर्फ jQuery कोर का एक विलोपन है, हालांकि परिणाम समान है। ऐसा तब है जब आप ट्रैवर्सिंग फ़ंक्शंस को जोड़ना चाहते हैं जैसे कि ऐरे और इतने पर।

टाइप 3: यह एक प्लगइन जोड़ने का सबसे अच्छा तरीका है, jQuery का विस्तारित प्रोटोटाइप आपके प्लगइन नाम और फ़ंक्शन को पकड़कर एक ऑब्जेक्ट लेता है और इसे आपके लिए प्लगइन लाइब्रेरी में जोड़ता है।

Comments

यदि आप मूल प्रश्न को पढ़ते हैं, तो ओपी लेखन बंद करने के 3 तरीके निर्दिष्ट करता है, उसने उन विधियों का नाम {1,2,3} रखा है, मैं उत्तर के साथ प्रश्न के भीतर क्षेत्रों का उल्लेख कर रहा हूं ..

— रॉबर्टपिट

(function () {}) का मतलब है कि अंदर का फंक्शन लौटाता है? वास्तव में "()" का क्या अर्थ है?

— जसकी

मुझे पहली मिसाल पसंद है कि लाइन नंबर रेफरेंस (जो कि js फीचर नहीं है) का उपयोग करते हुए दूसरा नंबर अस्पष्ट है।

— सामी बेनचेरी

इसे तुरंत इनवॉइस फंक्शन एक्सप्रेशन (IIFE) कहा जाता है: benalman.com/news/2010/11/…

— एंड्रेस रोजास

मुझे बाहरी कोष्ठक को समझने में सबसे अधिक समस्या है ( function(){} ): यह वास्तव में क्या है? क्या मैं सिर्फ लिख नहीं सकता function(){}()?

— टीएमओटीटीएम

Answer 2

सबसे बुनियादी स्तर पर, फॉर्म (function(){...})()का कुछ एक फ़ंक्शन शाब्दिक है जिसे तुरंत निष्पादित किया जाता है। इसका मतलब यह है कि आपने एक फ़ंक्शन को परिभाषित किया है और आप इसे तुरंत कॉल कर रहे हैं।

यह फ़ॉर्म सूचना छिपाने और इनकैप्सुलेशन के लिए उपयोगी है क्योंकि आप उस फ़ंक्शन के अंदर जो कुछ भी परिभाषित करते हैं, वह उस फ़ंक्शन के लिए स्थानीय रहता है और बाहरी दुनिया से दुर्गम होता है (जब तक कि आप विशेष रूप से इसे उजागर नहीं करते हैं - आमतौर पर लौटे ऑब्जेक्ट शाब्दिक के माध्यम से)।

इस मूल रूप का एक रूपांतर है जिसे आप jQuery प्लगइन्स में देखते हैं (या सामान्य तौर पर इस मॉड्यूल पैटर्न में)। इसलिये:

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

जिसका अर्थ है कि आप वास्तविक jQueryवस्तु के संदर्भ में गुजर रहे हैं , लेकिन इसे $फ़ंक्शन शाब्दिक के दायरे में जाना जाता है ।

टाइप 1 वास्तव में एक प्लगइन नहीं है। आप बस एक वस्तु शाब्दिक प्रदान कर रहे हैं jQuery.fn। आमतौर पर आप एक फ़ंक्शन असाइन करते हैं jQuery.fnक्योंकि प्लगइन्स आमतौर पर केवल फ़ंक्शन होते हैं।

टाइप 2 टाइप 1 के समान है; आप वास्तव में यहाँ एक प्लगइन नहीं बना रहे हैं। आप बस एक वस्तु शाब्दिक जोड़ रहे हैं jQuery.fn।

टाइप 3 एक प्लगइन है, लेकिन यह एक बनाने का सबसे अच्छा या आसान तरीका नहीं है।

इसके बारे में अधिक समझने के लिए, इसी तरह के प्रश्न और उत्तर पर एक नज़र डालें । इसके अलावा, यह पृष्ठ संलेखन प्लगइन्स के बारे में कुछ विस्तार से बताता है।

Comments

मैं अनिश्चित हूं कि टाइप 3 कोर कैसे बढ़ा रहा है। जब से आप प्रोटोटाइप का विस्तार कर रहे हैं, इसका एक पूरी तरह से वैध तरीका एक प्लगइन बनाना है। अलबत्ता थोड़ा अनावश्यक।

— tbranyen

मेरा बुरा - मुझे अधिक स्पष्ट होना चाहिए था। मैं जल्दी में था और तुम सही हो।

— विविन पालीथ

Answer 3

एक छोटा सा सहयोग:

// an anonymous function
  
(function () { console.log('allo') });

// a self invoked anonymous function

(function () { console.log('allo') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = 'I\'m not jQuery.';

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

Answer 4

स्पष्टीकरण के लिए बस छोटा सा जोड़

इस संरचना (function() {})();को IIFE (तत्काल इनवॉइस फंक्शन एक्सप्रेशन) कहा जाता है , इसे तुरंत निष्पादित किया जाएगा, जब दुभाषिया इस रेखा तक पहुंच जाएगा। इसलिए जब आप इन पंक्तियों को लिख रहे हैं:

(function($) {
  // do something
})(jQuery);

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

Answer 5

वास्तव में, इस उदाहरण ने मुझे समझने में मदद की कि (function($) {})(jQuery);इसका क्या मतलब है।

इस पर विचार करो:

// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4

और अब इस पर विचार करें:

• jQuery एक वैरिएबल होल्डिंग jQuery ऑब्जेक्ट है।
• $किसी भी अन्य (जैसे एक चर नाम है a, $b, a$bआदि) और यह PHP में जैसे किसी भी विशेष अर्थ नहीं है।

यह जानते हुए कि हम अपने उदाहरण पर एक और नज़र डाल सकते हैं:

var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

Comments

मेरे लिए, यह सबसे अच्छा जवाब है। स्पष्ट और इतना सरल

— सालेह

Answer 6

टाइप 3, काम करने के लिए इस तरह दिखना होगा:

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin's name
        'pluginname': function(_options) {
            // Put defaults inline, no need for another variable...
            var options =  $.extend({
                'defaults': "go here..."
            }, _options);

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

मैं अनिश्चित हूं कि कोई व्यक्ति सिर्फ jQuery के प्रोटोटाइप में संपत्ति को सीधे सेट करने का उपयोग क्यों करेगा, यह केवल अधिक संचालन और अधिक अव्यवस्था में ही सटीक काम कर रहा है।