JQuery: ऑनक्लिक घटना के बजाए अविभाज्य जावास्क्रिप्ट/दस्तावेज़ तैयार फ़ंक्शन क्यों?

Question

मैंने अभी JQuery को देखना शुरू कर दिया है। मेरे पास वर्तमान में मेरे वेब एप्लिकेशन में कोई AJAX नहीं है।

<form ...> 
<p>Find what? <input ...></p> 
<div class="ButtonArray"> 
    <a href="AddRecord.ASP&amp;Action=ADD">ADD</a> 
    <a href="#" onClick="return MyFormSubmit();">FIND</a> 
</div> 
</form> 

यह [जोड़े] और [खोजें] के लिए बटन प्रदर्शित करता है:

मेरी HTML में मेरे मौजूदा JavaScript तरह दिखता है। ढूंढने के लिए फॉर्म सबमिट करना जरूरी है, और मैं MyFormSubmit() का उपयोग करता हूं जो डेटा को मान्य करता है, पृष्ठ पर एक दृश्य प्रभाव जोड़ता है, और उसके बाद डेटा पोस्ट करता है।

मैं खोज बटन के लिए करने के लिए एक वर्ग या आईडी जोड़ सकते हैं और JQuery में मैं की तरह कुछ लिख सकते हैं: JQuery के साथ

$(function() { 
    $(".MySearchButtonClass").click(function() { 
    // validate and process form here 
    }); 
}); 

समझ की मेरी "नौसिखिया" अवस्था में मैं नहीं करते मैं ऐसा क्यों करूंगा

मेरा पुराना तरीका ऑब्जेक्ट के पास विधि की पहचान करता है। उपयोगकर्ता को बटन दबाए जाने से पहले जेएस लोड नहीं हुआ है (क्या वहां है? जेएस के लिए लोड पेज के शीर्ष पर सही है)।

दस्तावेज़ लोड होने तक JQuery दस्तावेज़ तैयार विधि सक्रिय नहीं की जाएगी (जो मुझे लगता है कि जेएस सभी मौजूद है और चलाने के लिए तैयार है?), लेकिन यह कोड को मेरे HTML के एक अलग हिस्से में ले जाता है फ़ाइल - इसलिए जब मैं HTML स्रोत में MyButtonArray DIV देखता हूं तो यह मेरे लिए स्पष्ट नहीं है कि किस ऑब्जेक्ट में विधियां हैं, और जो नहीं।

क्या आप कृपया मेरी समझ में मदद कर सकते हैं कि मेरे विकल्प क्या हैं और मुझे क्या लाभ/मिलन देखना चाहिए?

संपादित: मैं आराम से कर रहा हूँ कि डोम हेरफेर - विनीत जावास्क्रिप्ट का प्रयोग करेंगे - जैसे एक लाइटबॉक्स कि जब वर्ग "LightBoxThumb" के साथ किसी भी थंबनेल क्लिक किया जाता है प्रदर्शित कर सकते हैं के रूप में।

हालांकि मैं खुद को मनाने के लिए संघर्ष कर रहा हूं कि एक बटन जिसमें एक विशिष्ट कार्यवाही हो, उसकी विधि इस तरह लागू होनी चाहिए। (मैं निश्चित रूप से किसी अन्य फ़ंक्शन कॉल के अलावा बटन पर किसी अन्य कोड को "कहीं और" नहीं डालूंगा, लेकिन मेरे दिमाग में यह है कि यह बटन क्या करता है, और मेरे अविश्वसनीय जावास्क्रिप्ट की परतें बहुत कठिन हो सकती हैं निर्धारित करने के लिए)

EDIT2 -। स्वीकृत उत्तर

मैं रस कैम जवाब कर लिया है। यह अविभाज्य जावास्क्रिप्ट का वर्णन इस तरह से करता है कि & के बारे में और अधिक समझने में मुझे मदद मिली है जब इसका उपयोग किया जाना चाहिए।

इस पल के लिए (जब मेरे पास और अनुभव हो तो बदल सकता है!) मैं एक ऑब्जेक्ट पर एक एकल, गैर-परिवर्तनकारी, क्रिया के लिए ऑनक्लिक ईवेंट के साथ रहूंगा क्योंकि मुझे लगता है कि मेरे लिए डीबग करना आसान होगा - और अगर समस्या उत्पन्न होती है तो निदान करें। एक तालिका स्तंभ शीर्ष सॉर्ट करने के लिए पर क्लिक करें की अनुमति देता है पर ZebraStripes (और उस प्रकार की स्थितियों) के लिए मैं विनीत जावास्क्रिप्ट दृष्टिकोण के लाभ देख सकते हैं

रस की अंतिम टिप्पणी की गई थी विशेष रूप से उपयोगी है, यहाँ दोहराया:

"@ क्रिस्टन - आप सही हैं, प्रोग्रामिंग विषयों के बहुत सारे की तरह, एक दृष्टिकोण से अधिक है और लोग अपने विश्वासों से दृढ़ता से खड़े होंगे!हम एक बटन के लिए एक एकल विधि के बारे में बात कर रहे हैं , मैं पूरी तरह के लिए कॉल को समझने जहां एक ही समारोह के साथ से ...

आ रहे हैं हम जावास्क्रिप्ट के बहुत सारे के बारे में बात कर रहे हैं, एक तत्व की तुलना में अधिक है, अलग समारोह विभिन्न तरीकों के लिए कहता है, आदि मुझे लगता है कि किसी को भी स्वयं इनलाइन और विनीत दृष्टिकोण मिश्रण करने के लिए और अधिक मुश्किल होगा, और यह बेहतर होगा एक या अन्य दृष्टिकोण "अपनाने के लिए

Answer 1

Unobtrusive JavaScript करने के लिए एक वेब पेज के
संरचना/सामग्री और प्रस्तुति से मार्कअप से जे एस कोड को अलग करने कार्यक्षमता ("व्यवहार परत") के

• पृथक्करण
• सर्वश्रेष्ठ अभ्यास के लिए मुख्य चालक है पारंपरिक जावास्क्रिप्ट प्रोग्रामिंग (जैसे ब्राउज़र असंगतता और स्केलेबिलिटी की कमी) की समस्याओं से बचें
• प्रगतिशील वृद्धि उपयोगकर्ता एजेंटों कि
  उन्नत जावास्क्रिप्ट कार्यक्षमता

समर्थन नहीं कर सकते document.ready में कोड के साथ समर्थन करने के लिए, जब तक डोम लोड होते ही निष्पादित नहीं होगा और इससे पहले कि पृष्ठ सामग्री

लोड किए गए हैं

Learning jQuery

से $ (document) .ready() के साथ, आप अपने घटनाओं लोड करने के लिए या आग या जो भी आप उन्हें खिड़की लोड होने से पहले क्या करना चाहते हो सकता है।

आप jQuery in Action पर एक नज़र डालना चाहते हैं, तो मैं अत्यधिक अनुशंसा करता हूं। आप book's homepage पर Chapter 1 और Chapter 5 का नमूना दे सकते हैं। मुझे लगता है कि ऐसा करने से और अंतर्दृष्टि मिल सकती है कि अलगाव अच्छी तरह से क्यों काम कर सकता है।

अंत में, this question पर एक नज़र डालें, जिसने जवाब दिया है कि आप घटना श्रोताओं को एक डोम नोड पर कैसे पाएंगे।

संपादित करें:

कुछ विचार है जो आप के लिए राजी हो सकता है क्यों विनीत जावास्क्रिप्ट एक अच्छा विचार हो सकता है।

कल्पना कीजिए कि आप एक समारोह तत्वों की एक संख्या में से प्रत्येक पर उठाया एक ही घटना के लिए एक ईवेंट हैंडलर के रूप में बाध्य है -

• यह पता लगाने के लिए जो तत्वों कि समारोह फोन को संभालने के लिए आसान नहीं होगा एक घटना जब घोषणा प्रत्येक तत्व में इनलाइन में है, या घोषणा मार्कअप के बाहर एक ही स्थान पर है?

• क्या होगा यदि आप तत्वों को जोड़ना चाहते हैं जो पर उस समारोह को कॉल करते हैं तो ईवेंट प्रत्येक में उठाया जाता है? क्या ईवेंट हैंडलर इनलाइन को प्रत्येक तत्व में जोड़ने या कोड को एक स्थान में बदलने के लिए आसान/बेहतर होगा?

Answer 2

आप वास्तविक HTML डिज़ाइन से यूआई तर्क को अलग करने के लिए ऐसा करते हैं।

Answer 3

दस्तावेज़ तैयार ईवेंट दस्तावेज़ लोड ईवेंट से पहले अच्छी तरह से है। एक बार दस्तावेज़ लोड होने के बाद दस्तावेज़ तैयार होता है, जिससे कि आप उन पर काम करना शुरू करने से पहले सभी तत्व मौजूद हैं।

तो हाँ जेएस दस्तावेज़ के रूप में तैयार होने के रूप में तैयार हो जाएगा। बाध्यकारी के बारे में दूसरा बिंदु यह है कि सीटैन क्रिया होने पर तत्वों को बाइंडिंग बदलने के लिए उपयोगी होता है।

यदि आप चाहें तो भी आप तत्व पर कार्रवाई की घोषणा कर सकते हैं।

Answer 4

समय के साथ मैं तुम्हें jQuery वाक्य रचना और पढ़ने आदत हो लगता है:

वर्ग = "MyFormSubmit" पढ़ने onClick = "MyFormSubmit() वापसी के रूप में के रूप में जानकारीपूर्ण हो जाता है,

कहाँ शक्ति वास्तव में शुरू होता है किक इन (अन्य पोस्टर्स द्वारा उल्लिखित सभी लाभों के अलावा) वह आसानी है जिसके साथ आप वेब पेज पर अन्य कार्रवाइयों से जुड़े चयनकर्ताओं के माध्यम से ऑनक्लिक बाध्यकारी को बदल सकते हैं, जो कभी भी खुद को पेश नहीं करते हैं।

एक प्रश्न मैं खुद से पूछता हूं कि मैं किसी नए उपकरण के साथ जाने की योजना बना रहा हूं, अगर मैं एम की योजना बना रहा हूं एक फ्रेमवर्क या लाइब्रेरी का व्यापक उपयोग, फिर मेरे कोड को "अधिक देशी" कोडिंग शैली में लिखना बहुत अधिक प्राकृतिक और अन्य डेवलपर्स बन जाएगा जो टूल को जानते हैं, कोड को बहुत साफ और अधिक समझने योग्य मिलेगा।