मैं अपने बॉस (और अन्य देवों) को विनीत जावास्क्रिप्ट का उपयोग करने / विचार करने के लिए कैसे मना करूं

Question

हम अपने डेवेलपर्स टीम में बहुत नए हैं।

मुझे कुछ मजबूत तर्कों और / या "ख़राब" उदाहरणों की आवश्यकता है, इसलिए मेरा बॉस अंततः विनीत जावास्क्रिप्ट के फायदों को समझेगा, ताकि वह और टीम के बाकी सदस्य इस तरह की चीजें करना बंद कर दें:

<input type="button" class="bow-chicka-wow-wow" 
       onclick="send_some_ajax(); return false;" value="click me..." />

तथा

<script type="text/javascript">

function send_some_ajax()
{
  // bunch of code ... BUT using jQuery !!!
}
</script>

मैंने एक बहुत ही सामान्य पैटर्न का उपयोग करने का सुझाव दिया:

<button id="ajaxer" type="button">click me...</button>

तथा

<script type="text/javascript">

// since #ajaxer is also delivered via ajax, I bind events to document 
//  -> not the best practice but it's not the point....

$(document).on('click', '#ajaxer', function(ev) {
var $elem = $(this);
ev.preventDefault();

});

मेरे बॉस (और अन्य) इस दृष्टिकोण का उपयोग नहीं करना चाहते हैं, इसका कारण यह है कि फायरबग (या क्रोम देव टूल्स) में घटना-निरीक्षण सरल नहीं है, जैसे कि

<input type="text" name="somename" id="someid" onchange="performChange()">

वह तुरंत यह देख सकता है कि परिवर्तन-ईवेंट पर कौन सा फ़ंक्शन निष्पादित होता है और स्पेगेटी-कोड से भरी एक विशाल जेएस फ़ाइल में सही से कूद जाता है ।

विनीत जावास्क्रिप्ट के मामले में केवल एक चीज वह देख सकता है:

<input type="text" name="somename" id="someid" />

और उसे इस बात का कोई अंदाजा नहीं है कि क्या कुछ घटनाएँ, यदि कोई हैं, तो इस तत्व के लिए बाध्य थीं और कौन सा कार्य शुरू हो जाएगा।

मैं एक समाधान की तलाश में था और इसे पाया:

$(document).data('events') // or .. $(document).data('events').click

लेकिन, इस "दृष्टिकोण" के कारण यह "बहुत लंबा ..." यह पता लगाने के लिए कि किस समारोह में किस समारोह में आग लग जाती है, इसलिए मुझे कहा गया था कि इस तरह की घटनाओं को रोकें।

मैं आपसे कुछ उदाहरण या मजबूत फायदे या किसी अन्य प्रकार के सुझाव के लिए पूछ रहा हूं "हमें यूजेएस का उपयोग क्यों करना चाहिए"

अद्यतन: "नौकरी बदलने" का सुझाव एक आदर्श समाधान नहीं है।

अद्यतन 2: ठीक है, मैंने केवल jQuery इवेंट-बाइंडिंग का उपयोग करने का सुझाव नहीं दिया है, मैंने ऐसा किया । जब मैंने सभी इवेंट-डेलिगेशन लिखा, तो बॉस मेरे पास आए और मुझसे पूछा, मैं अलग-अलग दृष्टिकोण और दृष्टिकोण के साथ इवेंट डेलिगेशन क्यों कर रहा हूं, वह नहीं जानते

मैंने कुछ स्पष्ट लाभों का उल्लेख किया, जैसे - 15 इनपुट-फ़ील्ड्स हैं और फिर सभी में एक onchangeईवेंट है (न केवल उनमें से कुछ के पास भी है onkeyup), इसलिए इस तरह के ईवेंट-प्रतिनिधिमंडल को सभी इनपुट-फ़ील्ड के लिए लिखना अधिक व्यावहारिक है, 15 बार करने के बजाय, खासकर यदि सभी HTML को PHP की गूंज -> के साथ प्रदान किया जाएगाecho '... <input type="text" id="someid" ... />...'

Comments

आपके पहले कोडबॉक्स में "क्लास" को शायद a = की आवश्यकता है।

— जो जेड

आप कर सकते हैं: 1) अपने बॉस को उन तकनीकों का उपयोग करने के लिए मनाएं जिन्हें वह नहीं जानता है; 2) अपने बॉस को नई तकनीक सिखाएं; 3) अपने मालिक को पता नहीं है कि तकनीक का उपयोग बंद करो; या 4) नौकरी बदलें। क्या मैं एक विकल्प भूल गया? यदि आप 4 नहीं चाहते हैं, और आप 1 और 2 में सफल नहीं हो सकते हैं, तो आपका एकमात्र शेष विकल्प 3 है। बस ध्यान रखें कि आपका बाजार मूल्य उस पर निर्भर करता है जो आप जानते हैं। इसलिए जब आप अपने बॉस के अनुमोदन के बारे में सब कुछ सीख लेते हैं, तो आपके शेष विकल्प हैं: 3 ए) सीखना बंद कर दें और अपने बाजार मूल्य को देखें; 3 बी) अपने खाली समय में नई तकनीकों को सीखें और उनका उपयोग करें। विकल्प 3 ए में आपके पैसे खर्च होते हैं, विकल्प 3 बी में आपका समय लगता है।

— विलिअम बुआर

मैं एक दृष्टिकोण का उपयोग करूँगा जैसे कि github करता है: JS में बाइंड की गई प्रत्येक तत्व में एक js-this-class-do-somethingवर्ग होता है, इसलिए, आप कोड में इसके लिए आसानी से CTRL + F ले सकते हैं।

— caarlos0

FireQuery "बहुत लंबे समय तक" भाग के साथ मदद कर सकता है। यह सुनिश्चित नहीं है कि यह घटनाओं के साथ कितनी अच्छी तरह काम करता है, लेकिन यह आपको कम से कम यह बताना चाहिए कि किसी तत्व की घटनाएँ हैं।

— इजाकाता

यहां एक अच्छी उपयोगिता है जो मुझे घटनाओं के साथ काम करते समय उपयोग करने के लिए पसंद है

— karka91

Answer 1

1. Buzzwords का उपयोग करना बंद करें और इसके बजाय मजबूत तर्क देने का प्रयास करें। यहां तक ​​कि विनीत जावास्क्रिप्ट के लिए विकिपीडिया पेज भी कहता है कि यह शब्द औपचारिक रूप से परिभाषित नहीं है। यह कई अच्छे विचारों के लिए एक कंबल शब्द हो सकता है, लेकिन अगर यह एक मात्र सनक या फैशन की तरह लगता है तो आपके बॉस और सहकर्मी बहुत ध्यान नहीं देंगे। इससे भी बदतर, अगर आप किसी ऐसी चीज के बारे में सोचते रहते हैं जिसे वे बेकार मानते हैं, तो वे पूरी तरह से असंबंधित विचारों को छूट देना शुरू कर सकते हैं, जिनकी आप वकालत करते हैं।

2. समझें कि आपको क्यों लगता है कि विनीत जावास्क्रिप्ट विचार महत्वपूर्ण हैं। क्या ऐसा इसलिए है क्योंकि आप पढ़ते हैं कि उन्हें सर्वोत्तम अभ्यास माना जाता है? क्या आप उन समस्याओं में भाग ले रहे हैं जिन्हें आप इन विचारों का पालन नहीं करने का श्रेय दे सकते हैं? इन विचारों को अपनाने से कंपनी की निचली रेखा पर कितना प्रभाव पड़ेगा?

3. अपने मालिक के सिर के अंदर जाओ। वह उन चीजों को क्यों करता है जो वह करता है, और उसने आपके परिवर्तनों को अस्वीकार क्यों किया है? वह शायद बेवकूफ नहीं है, और वह शायद आप की तुलना में अधिक अनुभवी है, इसलिए उसके पास अपने काम करने के कुछ अच्छे कारण हैं। आप उनमें से कुछ के लिए पहले से ही अवगत हो चुके हैं - उस धागे का उसके अंत तक पालन करें। फिर पता करें कि क्या और कैसे आपके सुझावों से उन चीजों में सुधार होगा जो वह सबसे ज्यादा चिंतित हैं।

4. संकेत 1: प्रबंधकों को पैसे पसंद हैं। जितना अधिक आप अपने सुझावों को बढ़ी हुई आय या कम खर्च पर बाँध सकते हैं, आपके तर्क पर उतना अधिक प्रभाव पड़ेगा। संकेत 2: समय पैसा है। संकेत 3: अपने आप में, कोड की सौंदर्य अपील पैसा नहीं बनाती है। विपरीत, वास्तव में - कोड को अच्छा दिखने में समय लगता है। बदसूरत कोड जो अच्छी तरह से काम करता है वह ज्यादातर प्रबंधकों के साथ ठीक है।

5. बस इसके बारे में बात मत करो, यह करो । यदि आप एक छोटे, स्व-निहित परियोजना के लिए पर्याप्त भाग्यशाली हैं, तो अपने प्रबंधक से पूछें कि क्या आप "UJS" शैली का उपयोग एक प्रकार के प्रदर्शन के रूप में कर सकते हैं। जब आप तैयार हों, तो एक कोड समीक्षा करें, जहां आप बता सकते हैं कि यह सब कैसे काम करता है और आपको लगता है कि यह वर्तमान शैली से बेहतर क्यों है।

6. आदर्शवाद महान है, लेकिन इसे रास्ते में आने न दें। किसी ऐसे व्यक्ति के रूप में देखा जाना अधिक महत्वपूर्ण है, जो किसी ऐसे काम करता है जैसे कि एक डिलेटेंट के रूप में किया जाता है, जो बिना मुंह वाली कोडिंग शैली के बारे में शिकायत करता है। यदि आप नए आदमी हैं तो यह विशेष रूप से सच है। यदि आप अब UJS के साथ कर्षण प्राप्त नहीं कर सकते हैं, तो इसके बजाय कुछ अच्छे काम करें और धीरे-धीरे उन परिवर्तनों के लिए एक मामला बनाएं जो आप विश्वसनीयता हासिल करना चाहते हैं।

7. पढ़ें स्विच: चीजों को कैसे बदलें जब परिवर्तन कठिन होता है । यह आपको आपके मामले को प्रभावी ढंग से बनाने के बारे में बहुत अधिक अच्छे विचार देगा।

Comments

उत्तर का सार यह सिद्ध करता है कि ujs वास्तविक रूप से काम करता है। उन्हें दिखाओ यह काम करता है।

— OnesimusUnbound

@AvinashR बात सिर्फ यह है कि प्रबंधकों को प्रेरित करने वाली बात अक्सर डेवलपर्स को प्रेरित करने वाली चीज नहीं होती है। हम डेवलपर्स अच्छे और सुव्यवस्थित होने के लिए कोड पसंद करते हैं, सुरुचिपूर्ण ढंग से डिजाइन किए गए, आदि प्रबंधक लाभ को अधिकतम करना चाहते हैं। यदि आपका परिवर्तन अधिक बिक्री, महान में परिणाम देगा। यदि यह कम विकास के समय या कम समय बिताए या बग को ठीक करने में परिणाम देता है, तो बहुत अच्छा है। खुशी है कि ग्राहकों को अपने जीयूआई की तरह सुनने के लिए, लेकिन क्या बॉस ने यूजेएस को या जीयूआई को देखने के तरीके पर ध्यान दिया है? यदि ग्राहक आपके कोड को देखते हैं और कहते हैं "हम चाहते हैं कि हमारा कोड इस तरह दिखे!" अपना मामला बनाना आसान होना चाहिए।

— कालेब

"स्विच" के अलावा, मैं ट्रान्स रयान द्वारा "ड्राइविंग तकनीकी परिवर्तन" की भी सिफारिश करूंगा: terrenceryan.com/book । इसके अलावा, "हैलो एचटीएमएल 5 और सीएसएस 3" में, रॉब क्रॉथर इसे सरलता से कहता है: "सामग्री के लिए एचटीएमएल, प्रस्तुति के लिए सीएसएस, और व्यवहार के लिए जावास्क्रिप्ट।" जावास्क्रिप्ट को एचटीएमएल से बाहर रखकर, आप व्यवहारों की एक लाइब्रेरी बना सकते हैं और बिना किसी अतिरिक्त कोडिंग के सभी जगह HTML का पुन: उपयोग कर सकते हैं। यह, कालेब के बिंदु # 4 पर, समय और धन बचाता है।

— एड्रियन जे। मोरेनो

बिंदु 3: अनुभव से अधिक मत निकलना। बल्कि मैं अपनी टीम में एक सुपर प्रतिभाशाली 22 वर्षीय लियो मेसी की जगह एक 32 वर्षीय ओवरपेड अनुभवी आलसी आकस्मिक प्रीमियर खिलाड़ी खिलाड़ी की जगह चाहता हूं। युवा, ताजा, प्रतिभाशाली रक्त अक्सर बहुत मूल्यवान होता है।

— रॉबर्ट नेस्टिरोज

"प्रबंधक अधिकतम लाभ कमाना चाहते हैं।" - प्रबंधक भी जोखिम कम करना चाहते हैं; एक और आय हो सकती है।

— रोजर लिप्सकॉम्ब

Answer 2

आप जो कुछ भी कर सकते हैं, उन्हें टूल क्विक के साथ-साथ क्रोम क्वेरी का उपयोग करके USJ html डिबगिंग का डेमो दे सकते हैं ।

FireQuery एक Firebug एक्सटेंशन है और इस पर बहुत अच्छा काम करता है। क्रोम क्वेरी के लिए, मैं यह नहीं कह सकता कि यह कितना अच्छा है, लेकिन यह निश्चित रूप से कुछ देवों (स्टैकओवरफ्लो में एक पोस्ट ) द्वारा उपयोग किया जाता है ।

यह भी जान लें कि jQuery 1.8.0 के.data बाद से आंतरिक ईवेंट डेटा को वापस करने के लिए फ़ंक्शन को हटा दिया गया है , और जिसे आधिकारिक अस्थिर के अनुसार अस्थिर किया जा सकता है$._data(element, "events")

यह अब 1.8 में हटा दिया गया है, लेकिन आप अभी भी $ ._ डेटा (तत्व, "ईवेंट") के माध्यम से डिबगिंग उद्देश्यों के लिए ईवेंट डेटा प्राप्त कर सकते हैं। ध्यान दें कि यह एक समर्थित सार्वजनिक इंटरफ़ेस नहीं है; वास्तविक डेटा संरचनाएं असंगत रूप से संस्करण से संस्करण में बदल सकती हैं।

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

इसके अलावा यूएसजे का उपयोग करने का प्लस यह है कि आप अपने पूरे आवेदन को एक छोटी (अपठनीय) स्क्रिप्ट में निर्दिष्ट कर सकते हैं। उन्हें google.com / github.com की स्क्रिप्ट भी दिखाएं (उदाहरण के रूप में), और बताते हैं कि यहां तक ​​कि वे कोड को संकुचित कर रहे हैं, जो हमेशा बेहतर होता है, क्योंकि साइट के दर्शक को सुरक्षा दोषों को डिकोड करने में कठिन समय होगा। और अपनी साइट पर एक पूर्ण हमले शुरू करने के लिए उनका उपयोग करें (उन्हें डराएं), भले ही संभावना न हो।

अद्यतन 2 :
Btw, मुझे नहीं पता था कि मैं USJ कर रहा था जब तक कि मैंने इस प्रश्न को नहीं देखा, इसलिए एक तरह से धन्यवाद।

Answer 3

इनलाइन घटना संचालकों बदबू आ रही है क्योंकि:

• कोई ईवेंट प्रतिनिधिमंडल नहीं - जो तब होता है जब आप किसी पृष्ठ के बाहर और भीतर गतिशील रूप से बगावत किए बिना रिप तत्वों को सक्षम करना चाहते हैं।

• आपने HTML टैग के वर्ग / आईडी विशेषताओं के बजाय HTML टैग के लिए व्यवहार को बाध्य किया है। मान लीजिए कि आपके पास अपने एप्लिकेशन में "combo_box" की एक कक्षा है। अचानक, अपने आधे पुराने पन्नों पर, आप अपने कॉम्बो बॉक्स पर एक अलग कंटेनर में होने पर थोड़ा बदलाव चाहते हैं। एक वर्ग से बंधे, आप कंटेनर संदर्भ के आधार पर उस व्यवहार को बदल सकते हैं, जैसे "#special_container .combo_box"। शापित HTML के अंदर आप अपने आप को हर छोटे चुनिंदा बॉक्स के नीचे ट्रैक कर सकते हैं। किसी भी नंबर पेज में .combo_box वर्ग के साथ उन हैंडलर संदर्भों को बदलने के लिए एक-एक करके एक फ़ाइल स्थान से फ़िल्टर करने के लिए कोड की एक या दो नई पंक्तियों को लिखने के बजाय। ।

• यदि आप एक से अधिक हैंडलर चाहते हैं, तो आप उन्हें एक फ़ंक्शन में लपेटते हैं और फिर उस अनावश्यक HTML फ़ाइलों को बांधते हैं। कितना सुपाच्य है?

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

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

• यह नहीं है! यह तर्क लेआउट के रूप में तालिकाओं जितना पुराना है। इस पर उतरें और अनुभवी क्लाइंट-साइड-स्पेशलाइज्ड देव पर भरोसा करना शुरू करें जो आपने खुद को स्पष्ट रूप से काम पर रखा है क्योंकि आपको उनकी विशेषज्ञता का अभाव था (ऐसा नहीं कि मैं व्यक्तिगत अनुभव या किसी भी चीज से किसी भी क्रोध को प्रसारित कर रहा हूं)।

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

एक जेएस फिडल लिंक जो संभवतः अंततः समाप्त हो जाएगा

Comments

+1 फ़ाइनली किसी ने इनलाइन जेएस की मुख्य गड़बड़ियों को इंगित किया। मेरे बॉस के साथ अगली बहस में इस तर्क का उपयोग करेंगे।

— वी-लाइट

@ वी-लाइट क्या उन्होंने काम किया?

— एरिक रेपेन

नहीं! 'ChangeYourOrganization' विकल्प का हल था

— V-Light

Answer 4

आपकी सुझाई गई तकनीक का एक बड़ा फायदा यह है कि आपको केवल एक बार इवेंट हैंडलर को "दस्तावेज़" जैसे माता-पिता के साथ बाँधना होगा और यह हैंडलर सभी बच्चों से आने वाली घटनाओं को पकड़ने में सक्षम होगा जो दिए गए चयनकर्ता को संतुष्ट करता है जैसे कि "button.anyclass" "। स्मृति को बनाए रखता है और ऐसे बनाए रखता है कि केवल एक संपादित उदाहरण की आवश्यकता है और यह सभी तत्वों को प्रभावित करता है।

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

इसके अलावा, यदि आप सुरक्षा उद्देश्यों के लिए जावास्क्रिप्ट का औचित्य और मिनिफिकेशन प्रदान करना चाहते हैं, तो आपकी तकनीक इसे संभव करेगी, पुरानी शैली के विपरीत जो आपकी टीम अभी भी उपयोग कर रही है।

Answer 5

स्पष्ट उत्तर यह है कि आप ओनलीक विशेषता के साथ केवल एक फ़ंक्शन को अपने बटन पर बांध सकते हैं, जबकि JQuery इवेंट आपको कई फ़ंक्शन को बांधने की अनुमति देता है। ओनलोड घटना के साथ एक आम समस्या: यदि आपका दस्तावेज़ एक से अधिक फ़ाइल से बना है, तो अक्सर टकराव होता है।

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

Comments

नॉकआउट के बारे में, कूल-बच्चों के लिए कोणीय और अन्य जेएस फ्रेमवर्क ... दुर्भाग्य से यह एक विकल्प नहीं है। कारण ऊपर जैसा ही है ... यह "बहुत अधिक" या "बहुत नया" या "बहुत अच्छा" या सिर्फ "हम कुछ नया नहीं सीखना चाहते हैं, चलो इसे पुराने (बेवकूफ / गूंगा) तरीके से करते हैं।" । "

— वी-लाइट

@ निफ़रा: इसके अलावा, आप केवल एक घटक के लिए एक फ़ंक्शन को बांध सकते हैं।

— ब्रूनो शेपर

@ वी-लाइट: "आप ChangeYourOrganization या ChangeYourOrganization कर सकते हैं।" हो सकता है कि यह आपके लिए दिलचस्प हो: jamesshore.com/Change-Diary

— ब्रूनो स्कैपर

अरे, मेरी कंपनी क्लासिक एएसपी के साथ चिपक जाती है क्योंकि ASP.NET "बहुत नया" है, फिर भी मैं अभी भी हमारे कोड में नॉकआउट को आगे बढ़ाने में कामयाब रहा। यह देखने की कोशिश करें कि वास्तव में उनकी चिंताएं क्या हैं और देखें कि क्या आप बदलाव कर सकते हैं।

— डिस्टैंट इको

@ निफ़्रा "मेरी कंपनी क्लासिक एएसपी के साथ चिपक जाती है:" यह .... भयानक है।

— माइकल पॉलुकोनिस