आपके द्वारा दिखाए गए कोड के दो ब्लॉक नाटकीय रूप से भिन्न होते हैं कि वे कब और क्यों निष्पादित करते हैं। वे एक दूसरे के अनन्य नहीं हैं। वे एक ही उद्देश्य की सेवा नहीं करते हैं।
जावास्क्रिप्ट मॉड्यूल
(function($) {
// Backbone code in here
})(jQuery);
यह एक "जावास्क्रिप्ट मॉड्यूल" पैटर्न है, जिसे तुरंत लागू होने वाले फ़ंक्शन के साथ लागू किया गया है।
इस कोड का उद्देश्य आपके कोड के लिए "मॉड्यूलरिटी", गोपनीयता और इनकैप्सुलेशन प्रदान करना है।
इसे लागू करना एक फ़ंक्शन है जिसे कॉलिंग (jQuery)कोष्ठक द्वारा तुरंत लागू किया जाता है । कोष्ठक में jQuery पारित करने का उद्देश्य वैश्विक चर के लिए स्थानीय स्कोपिंग प्रदान करना है। यह $चर को देखने के ओवरहेड की मात्रा को कम करने में मदद करता है , और कुछ मामलों में minifiers के लिए बेहतर संपीड़न / अनुकूलन की अनुमति देता है।
तुरंत आह्वान कार्यों को तुरंत निष्पादित किया जाता है, ठीक है, तुरंत। जैसे ही फंक्शन की परिभाषा पूरी होती है, फंक्शन को निष्पादित किया जाता है।
jQuery का "DOMReady" फ़ंक्शन
यह jQuery के "DOMReady" फ़ंक्शन के लिए एक अन्य नाम है: http://api.jquery.com/ready/
$(function(){
// Backbone code in here
});
jQuery का "DOMReady" फ़ंक्शन तब निष्पादित होता है जब DOM आपके जावास्क्रिप्ट कोड द्वारा हेरफेर करने के लिए तैयार होता है।
मॉड्यूल बनाम DOMReady बैकबोन कोड में
यह jQuery के DOMReady फ़ंक्शन के अंदर अपने बैकबोन कोड को परिभाषित करने के लिए खराब रूप है, और संभवतः आपके एप्लिकेशन प्रदर्शन के लिए हानिकारक है। इस फ़ंक्शन को तब तक नहीं बुलाया जाता है जब तक कि डोम ने लोड नहीं किया है और हेरफेर करने के लिए तैयार है। इसका मतलब है कि जब तक आप अपनी वस्तुओं को परिभाषित नहीं कर रहे हैं, तब तक ब्राउज़र कम से कम एक बार DOM को पार्स कर चुका होता है।
DOMReady फ़ंक्शन के बाहर अपने बैकबोन ऑब्जेक्ट को परिभाषित करना बेहतर विचार है। मैं, कई अन्य लोगों के बीच, जावास्क्रिप्ट मॉड्यूल पैटर्न के अंदर ऐसा करना पसंद करता हूं ताकि मैं अपने कोड के लिए इनकैप्सुलेशन और गोपनीयता प्रदान कर सकूं। मैं अपने मॉड्यूल से बाहर की जरूरत वाले बिट तक पहुंच प्रदान करने के लिए "रिवीलिंग मॉड्यूल" पैटर्न का उपयोग करता हूं (ऊपर पहला लिंक देखें)।
DOMReady फ़ंक्शन के बाहर अपनी वस्तुओं को परिभाषित करके, और उन्हें संदर्भित करने के लिए कोई रास्ता प्रदान करके, आप ब्राउज़र को अपने जावास्क्रिप्ट को संसाधित करने के लिए सिर शुरू करने की अनुमति दे रहे हैं, संभवतः उपयोगकर्ता अनुभव को तेज कर सकते हैं। यह कोड को और अधिक लचीला बनाता है क्योंकि जब आप चीजों को स्थानांतरित करते हैं तो अधिक DOMREady फ़ंक्शन बनाने के बारे में चिंता किए बिना आप चीजों को स्थानांतरित कर सकते हैं।
संभावना है कि आप DOMReady फ़ंक्शन का उपयोग करने जा रहे हैं, फिर भी, भले ही आप अपनी बैकबोन वस्तुओं को कहीं और परिभाषित करें। कारण यह है कि कई बैकबोन ऐप्स को डोम को किसी तरह से हेरफेर करने की आवश्यकता होती है। ऐसा करने के लिए, आपको डोम तैयार होने तक इंतजार करने की आवश्यकता है, इसलिए आपको परिभाषित किए जाने के बाद अपना एप्लिकेशन शुरू करने के लिए DOMReady फ़ंक्शन का उपयोग करने की आवश्यकता है।
आप वेब के चारों ओर इसके बहुत सारे उदाहरण पा सकते हैं, लेकिन यहां एक बहुत ही बुनियादी कार्यान्वयन है, एक मॉड्यूल और DOMRIMY फ़ंक्शन दोनों का उपयोग करके:
// Define "MyApp" as a revealing module
MyApp = (function(Backbone, $){
var View = Backbone.View.extend({
// do stuff here
});
return {
init: function(){
var view = new View();
$("#some-div").html(view.render().el);
}
};
})(Backbone, jQuery);
// Run "MyApp" in DOMReady
$(function(){
MyApp.init();
});