nettuts के बारे में चार प्रश्न "jquery सीखने के लिए 30 दिन"

Question

मैं जेफरी वे द्वारा jquery सीखने के लिए 30 दिनों के नामक नेटट्स पर एक नि: शुल्क jQuery कोर्स कर रहा हूं और मेरे पास चार चीजें हैं जो मैं वास्तव में स्टंप हो गई हूं, पहले यहां कोड है :

(function() { 
    $('html').addClass('js'); 

    var contactForm = { 
      container: $('#contact'), 

     init: function() { 
      $('<button></button>', { 
       text: 'Contact Me' 
      }) 
       .insertAfter('article:first-child ') 
       .on('click', this.show); 
      }, 
     show: function() { 
      contactForm.container.slideDown(500); 
     }      
    }; 

    contactForm.init(); 

})(); 

यह मूल रूप से जब आप वेबसाइट पर "मुझसे संपर्क करें" बटन पर क्लिक एक संपर्क फ़ॉर्म नीचे स्लाइड। मेरे प्रश्न हैं:

1. क्या "init" का पूरा बिंदु और आपको इसकी आवश्यकता है?
2. एक चर के अंदर पूरा jquery कोड क्यों है?
3. .on('click', this.show); कहता है कि कोड की स्ट्रिंग पर thisthis.show क्यों है?
4. अंत में, तुम क्यों contactForm.container.slideDown(500); में क्यों नहीं तुम सिर्फ container.slideDown(500); या $('form.contact').slideDown(500); (वैसे फार्म का है कि नीचे स्लाइड की आईडी contact है द्वारा कह सकते हैं के रूप में की आवश्यकता है।

Answer 1

क्या के पूरे मुद्दे "init" और आप इसे ज़रूरत है?

इस कोड का javascript ऑब्जेक्ट पैदा कर रही है, एक समारोह init कहा जाता है, तो उस फ़ंक्शन को कॉल के साथ। तुम बस के रूप में आसानी वस्तु के बाहर इस कोड को स्थानांतरित कर सकता है, लेकिन फिर आप wouldn ' इसे पुन: उपयोग करने में सक्षम नहीं होंगे, और इसके साथ अन्य ऑब्जेक्ट उन्मुख चीजें करें।

एक चर के अंदर पूरा jQuery कोड क्यों है?

जावास्क्रिप्ट में (केवल jQuery नहीं) सब कुछ एक वस्तु है। कार्य एक वस्तु हैं, वस्तु वस्तुएं हैं, आदि। यह कोड 3 चर के साथ एक ऑब्जेक्ट बना रहा है: container, जो एक jquery ऑब्जेक्ट संग्रहीत करता है; init, जो एक समारोह को स्टोर करता है; और show जो एक फ़ंक्शन संग्रहीत करता है। इसके बाद इसे contactform चर के लिए असाइन किया जा रहा है।

जो कोड कहता है उस पर स्ट्रिंग पर .on ('क्लिक करें', this.show); आपको इसमें इसकी ज़रूरत क्यों है। दिखाओ?

this.show का संदर्भ this वस्तु पर .show() विधि। इस संदर्भ में thiscontactForm ऑब्जेक्ट है, और show शो फ़ंक्शन किसी ऑब्जेक्ट के रूप में पारित किया जा रहा है (लेकिन नहीं कहा जाता है)। इसका प्रभाव तब होता है जब बटन क्लिक किया जाता है, शो फ़ंक्शन को कॉल किया जाता है।

आखिरकार, आपको संपर्क की आवश्यकता क्यों है Form.container.slideDown (500); जैसा कि आप सिर्फ कंटेनर स्लाइड नहीं कर सकते हैं। (500); या $ ('form.contact')। स्लाइडडाउन (500); (वैसे फार्म का है कि नीचे स्लाइड की आईडी है संपर्क।

क्योंकि container एक संपत्ति (यानी एक चर) कि contactform वस्तु से संबंधित है। आप $('#contact').slideDown(500); की तरह कुछ कर सकता है, लेकिन आप पहले से ही एक संदर्भ है contactform.container में, और इसका उपयोग न करने से अनावश्यक ओवरहेड होगा।