घटनाओं को बांधने के लिए विशेष वर्गों का उपयोग क्यों करें

किसी कारण से, घटनाओं को बांधने के लिए, कई जेएस डेवलपर्स लेआउट से विरासत में मिली कक्षाओं का उपयोग करते हैं। कई बार मुझे इस पद्धति के साथ आने वाली समस्याओं, ऐसे कोड के समर्थन से जुड़ी समस्याएं, और अब मैं इस बारे में अधिक बात करना चाहता हूं।

मेरी राय में, एक विचार में एक तत्व पर एक घटना को लटकाने के 3 लोकप्रिय तरीके हैं:

1. वाया आई.डी.
2. लेआउट से क्या मिला
3. विशेष वर्गों के माध्यम से

1. आईडी के माध्यम से बाध्यकारी

क्या आसान हो सकता है? मुझे यकीन है कि कई लोग, जब वे पहली बार जेएस से मिले थे, यह किया था, लेकिन अब कोई ऐसा कर रहा है। विधि, निश्चित रूप से, फायदे हैं। सबसे पहले, यह एक उच्च गति है, इस तथ्य के कारण कि आईडी वाले तत्व वैश्विक विंडो ऑब्जेक्ट में हैं और आपको उन्हें खोजने की आवश्यकता भी नहीं है। दूसरे, तत्वों को डीबग करना आसान है, दोनों टेम्पलेट से और हैंगिंग घटनाओं के माध्यम से।
उदाहरण के लिए, हमारे पास एक कोड है

<div class="main"> <p>          .     3-   10. <a href="#" id="system-detail"></a> </p> </div> 

आपको इस बात से सहमत होना चाहिए कि इस प्रणाली में इस तत्व के साथ संलग्न होने पर # सिस्टम-डिटेल को खोजना आसान है। यह तब भी सच है जब हमारे पास js कोड है, लेकिन हमें एक टेम्पलेट खोजने की आवश्यकता है।

बिना कंस के भी, कहीं नहीं। यदि इन तत्वों का उपयोग पृष्ठ पर कई बार डाले जाने वाले टेम्प्लेट में किया जाता है, तो हमें मेल आईडी के कारण टकराव होगा।

2. लेआउट से क्या मिला के माध्यम से बाइंडिंग

पद्धति का सार यह है कि हम टेम्पलेट को संपादित नहीं करते हैं, लेकिन हमारे पास जो कुछ भी है उस पर निर्माण करते हैं। उदाहरण के लिए, हमारे पास ऐसा टेम्पलेट है।

 <div class="block_content"> <p class="left b_font red_font"><a href="#">  </a></p> <div class="left inline-block"> <p>         !      .  ,   . <a href="#"></a> <p class="hidden"> <span>     -  <a href="#">   </a></span> </p> </p> </div> </div> 

सबसे अधिक संभावना है कि डेवलपर ने भावना में कुछ लिखा

 $('.block_content .inline-block a:first'); //  $('.block_content .left.b_font.red_font'); //    $('.block_content .inline-block a:last'); //     

अनुरोध में बड़ी संख्या में चयनकर्ताओं के अलावा, यह आदेश बहुत नाजुक है। जैसे ही हम तत्वों या उनकी व्यवस्था में से एक को बदलते हैं, सब कुछ अलग हो जाएगा। इसके अलावा, ऐसे प्रश्नों को डीबग करना बहुत कठिन है।
कैसे पता लगाने के लिए कि "अपग्रेड" पर ईवेंट को कहां रखा गया है! हम कैसे खोज करेंगे? भागों में, केवल यादृच्छिक पर। हम एक चयनकर्ता द्वारा खोज करेंगे, फिर दूसरे द्वारा, और इसी तरह जब तक हमें कुछ समान नहीं मिलेगा, जिसके बाद हम अभी भी जांच करेंगे कि यह है या नहीं। यदि हमें किसी अन्य तत्व पर कार्रवाई की नकल करने की आवश्यकता है, तो हमें असाइनमेंट को फिर से लिखना होगा (या इसे पुराने चयनकर्ता को अल्पविराम से जोड़ना होगा)।

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

3. विशेष वर्गों के माध्यम से बाध्यकारी

और इसलिए हम अंतिम बिंदु पर आते हैं। घटनाओं को बांधने के लिए, एक विशेष वर्ग जोड़ा जाता है, उदाहरण के लिए, js-new-message या ऐप-ओपन-विंडो, जिसका उपयोग शैलियों को सेट करने के लिए नहीं किया जाता है, लेकिन केवल एक इवेंट को लटकाए जाने की आवश्यकता होती है। पिछले उदाहरण को लें और इसे परिष्कृत करें

 <div class="block_content"> <p class="left b_font red_font"><a href="#" class="app-skip-advert">  </a></p> <div class="left inline-block"> <p>         !      .  ,   . <a href="#" class="app-modern"></a> <p class="hidden"> <span>     -  <a href="#" class="app-help-me">   </a></span> </p> </p> </div> </div> 

 $('.app-skip-advert'); //    $('.app-go-to-modern'); //  $('.app-help-me'); //     

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