jQuery $ (समारोह() {}) बनाम (समारोह() {}) ($)

Question

मैं समझता हूँ कि निम्नलिखित $(document).ready() के लिए आशुलिपि है:

$(function() { 
    console.log("ready!"); 
}); 

मैं यह भी समझता एक गुमनाम जे एस समारोह है क्या, लेकिन jQuery को कुछ भी विशेष करता है जब इसे एक का उपयोग कहा जाता है। यानी .:

(function() { 
    console.log("ready!"); 
})($); 

बाद सिर्फ एक सामान्य गुमनाम जे एस समारोह jQuery का उपयोग करता है है (यानी। यह नहीं $(document).ready() के लिए आशुलिपि पर विचार किया जाएगा और इसलिए तुरंत निष्पादित करेंगे)?

मुझे लगता है कि इससे पहले पूछा जाना चाहिए, लेकिन अगर यह है तो मुझे यह नहीं मिल रहा है।

Answer 1

जैसा कि आपने बताया है, पूर्व वास्तव में $(document).ready() के लिए एक शॉर्टेंड है। उत्तरार्द्ध के लिए, यह सिर्फ तुरंत आमंत्रित फ़ंक्शन अभिव्यक्ति है।

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

इस समारोह बस एक गुमनाम समारोह जो $ नाम के एक पैरामीटर प्राप्त करता है। फ़ंक्शन पैरामीटर के रूप में कुछ मान (इस मामले में jQuery) के साथ तत्काल को बुलाया गया है।

IIFEs भी अलग किया जा सकता है स्कोप और लिए वेब अनुप्रयोगों जो कई जावास्क्रिप्ट फ़ाइलें हो में वैश्विक चर से बचें। इस मामले में एक parameterless Iife इस्तेमाल किया जा सकता:

(function() { 
    // x is only accessible within this IIFE 
    var x; 
    // do something... 
})(); 

तुरंत लागू समारोह अभिव्यक्ति के बारे में अधिक जानकारी के लिए इस सवाल का देखें: What is the purpose of a self executing function in javascript?

Answer 2

उत्तरार्द्ध सिर्फ एक सामान्य अनाम जेएस फ़ंक्शन है जो jQuery का उपयोग करता है (यानी $ (दस्तावेज़) के लिए shorthand .ready() और इसलिए तुरंत निष्पादित होगा)?

हाँ, वास्तव में, यह सिर्फ एक सामान्य Iife जो एक तर्क

(function(dollarSignArgument) { 
    console.log("not really ready!"); 
})($) 

यह क्रियान्वित किया जाएगा तुरंत

Answer 3

पहले एक है, वास्तव में, एक आशुलिपि के रूप में $ वैश्विक चर ले जाता है $(document).ready() के लिए, here पर ध्यान दें।

लेकिन दूसरा एक तत्काल-आमंत्रण समारोह अभिव्यक्ति (आईआईएफई), घोषित एक अज्ञात फ़ंक्शन जिसे तुरंत घोषित किया जाता है और तुरंत बुलाया जाता है।

वास्तव में, सही सिंटैक्स (तर्क अपने उदाहरण में याद आ रही है) है:

(function($) { 
    //my $ object is local now 
})(jQuery); 

इस मामले में, आप एक तर्क के साथ अनाम समारोह कॉल कर रहे हैं।

इस पैटर्न (Iife) का मुख्य लाभ यह है: अपने कोड को अलग (के रूप में आप जितने चाहें उतने वैरिएबल बना सकते हैं और यह, गुंजाइश आपकी अनाम कार्य करने के लिए सीमित हो जाएगी जब तक आप कुछ वापसी)। इस पैटर्न का उपयोग "निजी" और "सार्वजनिक" विधियों को परिभाषित करने के लिए बहुत कुछ किया जाता है। इस तरह:

var myModule = (function() { 

    function privateFunction() { console.log("I can't be accessed from outside :("; } 

    var privateVar = "me too :("; 

    function publicFunction() { console.log("Hey! I'm here!"; } 

    /* expose what you want */ 
    return { 
     publicFunction: publicFunction 
    } 

})(); 

myModule.publicFunction(); //Hey! I'm here! 
myModule.privateFunction(); //undefined; 

आप भी इसे मॉड्यूल पैटर्न कॉल कर सकते हैं।

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

इस तरह, आप अपने ग्लोबल वैरिएबल को फ़ंक्शन के अंदर स्थानीय रूप में कुशल बनाते हैं। ध्यान दें कि पहले उदाहरण में, हम jQuery ऑब्जेक्ट पास कर रहे हैं और इसे अपने फ़ंक्शन के अंदर $ के रूप में जोड़ रहे हैं। किसी के लिए jQuery ऑब्जेक्ट को ओवरराइड करना अधिक कठिन होता है, लेकिन, कुछ स्क्रिप्ट वैश्विक डॉलर प्रतीक को फिर से असाइन कर सकती है, खासकर यदि आपके पास अपने ऐप का पूर्ण नियंत्रण नहीं है।इस तरह, आप हमेशा jQuery ऑब्जेक्ट को पास कर रहे हैं और इसे $ के रूप में जोड़ रहे हैं।

अंत में, मुझे एक Iife लिए पैरामीटर प्रदान करने के कुछ अन्य लाभ को सूचीबद्ध करते here से पकड़ा:

• यह तेजी से है: जावास्क्रिप्ट पहले स्थानीय गुंजाइश में देखने ( से पहले चढ़ाई)। यह थोड़ा सा प्रदर्शन में सुधार कर सकता है।

• minification मदद करता है: minifier अब, एक एक अक्षर शब्द करने के लिए अपने दायरे के अंदर चर नाम बदल सकते हैं कोड आकार को कम करने।