क्या करता है! फ़ंक्शन ($) {$ (फ़ंक्शन() {})} (window.jQuery) क्या करते हैं?

Question

मैं साइट बनाने के लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं और टूलटिप्स शुरू करने की कोशिश कर रहा था। कुछ जोड़ने के अलावा:

 $("[rel=tooltip]").tooltip()

application.js में, जब तक कि मैं बनाए रखूं, बूटस्ट्रैप दस्तावेज़ों में उपयोग किए गए कोड का निम्न भाग, मेरे टूलटिप्स प्रारंभ नहीं होते हैं।

 
!function ($) { 

    $(function(){ 

    }) 

}(window.jQuery) 

उपर्युक्त कोड क्या करता है?

Answer 1

कोड

function() { 
}() 

या अक्सर के रूप में

(function() { 
})() 

लिखा एक self-invoking anonymous समारोह के रूप में भी तुरंत-लागू समारोह भाव (IIFEs) में जाना जाता है ऊपर तोड़कर द्वारा समझाने की सुविधा देता है। जो अज्ञात फ़ंक्शन इनलाइन को तुरंत निष्पादित करता है।

Explain the encapsulated anonymous function syntax पर इसके बारे में और पढ़ें।

बेनामी फ़ंक्शंस एक शक्तिशाली विशेषता है और इसमें स्कोपिंग ("वेरिएबल नेम स्पेसिंग") जैसे लाभ हैं, What is the purpose of a self executing function in javascript? देखें।

---

अब वे

function ($) { 

}(window.jQuery) 

उपयोग कर रहे हैं के अब के लिए ! को छोड़ दें।

तो वे window.jQuery को उस कार्य में $ के रूप में स्वीकार करते हुए पास कर रहे हैं।

यह क्या करता है window.jQuery (मूल jQuery वस्तु) को $ एक उपनाम बना रही है और इसलिए यह सुनिश्चित करना कि $ हमेशा कि closure अंदर jQuery object का उल्लेख होगा, कोई फर्क नहीं पड़ता अगर अन्य पुस्तकालय है कि ($) के बाहर ले लिया है।

तो $ का उपयोग करके उस बंदरगाह के अंदर लिखने वाला कोड हमेशा काम करेगा।

एक और लाभ यह है कि $ गुमनाम समारोह में एक तर्क है, जो यह scope chain में करीब लाता है और इसलिए यह बंद अंदर $ वस्तु को खोजने के लिए की तुलना में यह अन्यथा अगर हम ले लिया जाएगा जे एस दुभाषिया के लिए कम समय लगता है के रूप में आता है वैश्विक $ का उपयोग किया।

---

$(function(){ 

}) 

यह jQuery के दस्तावेज़ तैयार ब्लॉक आप पहले से ही पता हो सकता है के रूप में है, जो इस समारोह के अंदर है कि कोड जब dom is ready, और इसलिए सभी event binding's ठीक से काम करेंगे चलेंगे सुनिश्चित करता है।

पर अधिक http://api.jquery.com/ready/

पढ़ें और क्या है कि ! किया गया है करता है अच्छी तरह से here या समझाया What does the exclamation mark do before the function?

पर कम में:

! के लाभों को प्रदर्शित करने के लिए, एक मामले पर विचार करने देता है,

(function() { 
    alert('first'); 
}()) 


(function() { 
    alert('second'); 
}()) 

आप console में ऊपर कोड पेस्ट, तो आप दो अलर्ट मिल जाएगा, लेकिन तब आपको यह त्रुटि

TypeError: undefined is not a function 

ऐसा क्यों होता है मिलेगा? आइए अनुकरण करें कि जेएस इंजन उपर्युक्त कोड ब्लॉक कैसे निष्पादित करते हैं। यह इस अज्ञात फ़ंक्शन को निष्पादित करता है function() {alert('first');}() अलर्ट दिखाता है और क्योंकि यह undefined() के अंदर वापस नहीं आता है। दूसरे समारोह के लिए भी होता है। तो इस ब्लॉक के निष्पादन के बाद, यह

(undefined)(undefined) 

की तरह कुछ होने समाप्त होता है और के रूप में यह वाक्य रचना है एक self-invoking anonymous समारोह की तरह है, यह है कि फ़ंक्शन को कॉल करने की कोशिश करता है, लेकिन पहले, (undefined) एक समारोह नहीं है। तो आपको undefined is not a function त्रुटि मिलती है। ! इस तरह या त्रुटियों को हल करता है। ! के साथ क्या होता है। मैं उपरोक्त उत्तर लिंक से लाइनों को उद्धृत कर रहा हूं।

जब आप उपयोग करते हैं!, फ़ंक्शन यूनरी (लॉजिकल) ऑपरेटर का एकल ऑपरेंड बन जाता है।

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

और इस से ऊपर समस्या का हल है, हम जैसे

!(function() { 
    alert('first'); 
}()) 


!(function() { 
    alert('second'); 
}()) 

---

अपने मामले के लिए ! का उपयोग करके उपरोक्त ब्लॉक पुनर्लेखन कर सकते हैं तो आप बस इस

की तरह एक दस्तावेज़ तैयार ब्लॉक के अंदर अपना टूलटिप कोड डाल सकते हैं

$(function(){ 
    $("[rel=tooltip]").tooltip(); 
}); 

और यह ठीक काम करेगा।

और अगर आप बस किसी भी doc ready block बिना $("[rel=tooltip]").tooltip() उपयोग करते हैं, तो इस बात की संभावना है जब इस कोड चलेंगे है, वहाँ अभी तक डोम में rel=tooltip साथ किसी भी तत्व नहीं है। तो $("[rel=tooltip]") एक खाली सेट लौटाएगा और tooltip काम नहीं करेगा।

एक उदाहरण मार्कअप जब यह doc ready block बिना काम नहीं करेगा,

. 
. 
. 
<script type="text/javascript"> 
    $("[rel=tooltip]").tooltip(); 
</script> 
. 
. 
. 
. 
<a href="#" rel="tooltip">Something</a> 
<a href="#" rel="tooltip">Something</a> 
<a href="#" rel="tooltip">Something</a> 

ब्राउज़रों के रूप में, मार्कअप क्रमिक रूप से व्याख्या करता है, यह रूप में जल्द ही यह के रूप में यह सामना करना पड़ता है के रूप में जे एस कोड निष्पादित करेंगे। और जब यह जेएस ब्लॉक को निष्पादित करता है, तो उसने अभी तक a rel="tooltip" टैग्स को अभी तक पार्स नहीं किया है, जैसा कि यह जेएस ब्लॉक के बाद दिखाई देता है, इसलिए वे उस समय डोम में नहीं हैं।

तो उपर्युक्त मामले $("[rel=tooltip]") खाली है और इसलिए टूलटिप काम नहीं करेगा। तो यह हमेशा यह सब अब आप के लिए समझ में आता है

$(function){ 
    // put all your JS code here 
}); 

आशा की तरह document ready ब्लॉक के अंदर अपने सभी जे एस कोड डाल करने के लिए सुरक्षित है।