jQuery घटना बाध्यकारी और हैंडलिंग

Question

मैं इस तरह jQuery कोड का एक बहुत कुछ देखा है, कहने की मुझे यह पसंद नहीं है:

<div id="myDiv"> 
    <a class="clickable" href="#">Click Me</a> 
    <a class="clickable" href="#">Click Me</a> 
    <a class="clickable" href="#">Click Me</a> 
    <a class="clickable" href="#">Click Me</a> 
</div> 

<script> 
    $(document).ready(function(){ 
     $('clickable').click(function(){ 
      // Do some stuff... 
     }); 
    }); 
</script> 

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

तो, मैं इस तरह कोडिंग शुरू कर दिया है, एक अलग .js फ़ाइल पर (fiddle here):

// BEGIN: Event Handlers 
    var onLoad = function(){ 
     $('.clickable').data('clicked', false); 
    }; 
    var onMyDivClick = function(){ 
     var clicked = $(this).data('clicked'); 
     if (clicked) { 
      $(this).trigger('myCustomEvent'); 
     } else { 
      alert('you clicked me'); 
      $(this).data('clicked', true); 
     } 
    }; 
    var onMyCustomEvent = function(){ 
     $(this).css('color', 'dimGray'); 
     alert('please don\'t click me again'); 
    }; 
// END: Event Handlers 

// BEGIN: Event Binding 
    $(window).on('load', onLoad); 
    $(document).on('click', '.clickable', onMyDivClick); 
    $(document).on('myCustomEvent', '.clickable', onMyCustomEvent); 
// END: Event Binding 

अब, मैं संरचना पेज पर किया जा रहा है के बारे में परवाह करने की जरूरत नहीं। मुझे $(document).ready(function(){}); के अंदर सबकुछ लपेटने की ज़रूरत नहीं है और मुझे परवाह करने की ज़रूरत नहीं है कि संरचना को AJAX के साथ लोड किया जा रहा है या नहीं।

प्रश्न 1 क्या दृष्टिकोण पर कोई डाउनसाइड्स हैं? अब तक, मुझे कोई नहीं मिला है। लेकिन हमारी साइटों पर कोड के बड़े पैमाने पर प्रतिक्रिया करने से पहले, मैं संभावित चेतावनी के बारे में सुनना चाहता हूं।

प्रश्न 2 नवीनतम jQuery सुविधाओं के साथ यह दृष्टिकोण और भी आगे कैसे लिया जा सकता है?

Answer 1

इस दृष्टिकोण के साथ मुझे एक नकारात्मक जानकारी है। यह इवेंट प्रदर्शन अनुभाग .on() में लिखा गया है।

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

तो सभी घटनाओं को document पर बाध्य करने के बाद, यह और भी खराब होगा।

और अतिरिक्त नोट्स में, वहाँ कुछ बात ऐसी load, scroll, और error के रूप में इस दृष्टिकोण के साथ काम नहीं कर सकता, कर रहे हैं।

Answer 2

ढांचे की जांच करें, उन्होंने आपके लिए बॉयलर-प्लेट काम किया है। मैंने अभी तक नॉकआउट का उपयोग किया है, लेकिन मैं कुछ अन्य लोगों से जुड़ूंगा।

• नॉकआउट डेटा/घटना के लिए अच्छा काम करता है बंधन - http://knockoutjs.com/
• रीढ़ - http://backbonejs.org/
• एंबर js - http://emberjs.com/
• कोणीय जे एस - http://angularjs.org/

"नमस्ते दुनिया" नॉकआउट में:

http://knockoutjs.com/examples/helloWorld.html

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 

// Here's my data model 
var ViewModel = function(first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 
    this.fullName = ko.computed(function() { 
     // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
}; 

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work 

Answer 3

यह मेरे लिए इंजीनियरिंग पर चिल्लाता है। Document.ready में कोड से बचने के लिए, और दृश्य में तर्क देखने से बचें, आप और भी जटिलता पेश करते हैं।

आपका दृष्टिकोण सीधे दस्तावेज़ पर बाध्य करता है और उसके बाद क्लिक किए जाने वाले डोम की जांच करता है। फिर आप क्लिक करने के लिए एक दूसरी घटना को आग लगाते हैं, जहां आपका तर्क रहता है।

यह एक या दो तत्वों के लिए ठीक है। यह आपका ठेठ ऐप नहीं है। क्या होता है जब आपके पास 5 तत्व होते हैं जिन्हें सभी को कुछ अलग करने की आवश्यकता होती है? लगभग 10 कैसे? शायद 15?

आपका "सरल" ईवेंट हैंडलर एक अच्छा बड़ा स्विच (या बदतर, ifs और nested ifs) बनने जा रहा है। अचानक एक नया हैंडलर जोड़ना इतना आसान नहीं है। न ही एक मौजूदा घटना बदल रहा है।

आप एक ढांचे को देखने से कहीं बेहतर होंगे जो आपको वह अलगाव प्रदान करता है जो आप ढूंढ रहे हैं। जूते को "मदद" करने के लिए इस तरह कुछ जूता करने का प्रयास करना आपके कोड को काटने के लिए वापस आ जाएगा। कोड में सबसे जटिलता एक इंजीनियर से पैदा होती है जो इसे "सरल" और "बेहतर" और "भविष्य का सबूत" बनाती है।

यह आपको या आपके विचारों को खारिज नहीं करना है। आपके पास सही विचार है: जिम्मेदारी को अलग करना एक अच्छी बात है। मुझे नहीं लगता कि आपका दृष्टिकोण सबसे अच्छा है।

जैसा कि एक अन्य पोस्ट किया गया है, कोणीय और रीढ़ की हड्डी और एम्बर (और कई और) आप जो चाहते हैं उसे पूरा करने के साधन प्रदान करते हैं। इसके अलावा, आपको जो भी लाइब्रेरी आपने चुना है उसे बनाए रखने की ज़रूरत नहीं है :)