जावास्क्रिप्ट, HTML और सीएसएस के बीच तंग युग्मन: एक अधिक आधुनिक दृष्टिकोण?

Question

तत्वों को संग्रहित करने, डेटा संग्रहीत करने और घटनाओं को सुनने के लिए जावास्क्रिप्ट का चयन कुछ चयनकर्ताओं से करना बहुत आम है। स्टाइल के लिए उपयोग किए जाने वाले इन समान चयनकर्ताओं को देखना भी आम है।

jQuery (और इसके चयनकर्ता इंजन Sizzle) सीएसएस-प्रकार सिंटैक्स वाले तत्वों को संदर्भित करके इसका समर्थन करते हैं और इसे बढ़ावा देते हैं। जैसे, परियोजनाओं को बनाते समय यह तकनीक विशेष रूप से 'अनलर्न' (या रिफ्लेक्टर) करने में मुश्किल होती है।

मुझे समझ में आया है कि यह HTML और जावास्क्रिप्ट विकास के इतिहास का एक परिणाम है, और यह कि ब्राउज़र कुशलतापूर्वक / पार्स / का उपभोग करने और इस तरह के युग्मन को प्रस्तुत करने के लिए बनाए गए हैं। लेकिन जैसे-जैसे वेबसाइटें तेजी से जटिल होती जा रही हैं, यह वास्तविकता इन अलग-अलग परतों को व्यवस्थित करने और बनाए रखने में कठिनाइयों का सामना कर सकती है।

मेरा सवाल है: क्या आधुनिक वेबसाइटों में इससे बचा जा सकता है?

यदि मैं सामने के अंत के विकास के लिए नया हूं, और मैं चीजों को 'सही तरीके से' सीखना चाहता हूं, तो क्या शुरू से इस तरह की निर्भरता को कम करना और उससे बचना सीखने लायक है? इसका मतलब यह है कि एक अधिक अवनत संरचना को बढ़ावा देने वाले पुस्तकालय के पक्ष में jQuery से बचना है?

Comments

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

— रॉबर्ट हार्वे

जब आप decoupling html, css और js के बारे में बात करते हैं तो सबसे महत्वपूर्ण बात यह है कि किसी अन्य के बजाय क्लास चयनकर्ताओं का उपयोग करें, यह oocss और BEM जैसी कार्यप्रणाली की मुख्य अवधारणा है।

— 18

प्रतिक्रिया या वेब घटक जानें, और आपको अब JS में चयनकर्ताओं से परेशान नहीं होना पड़ेगा।

— एंडी

Answer 1

उससे बचने का कोई उपाय नहीं है। वे एक दूसरे के साथ बातचीत करते हैं क्योंकि वे युग्मित हैं। यदि आपकी जावास्क्रिप्ट किसी भी तरह के DOM हेरफेर करने का इरादा रखती है, तो उसे DOM को संदर्भित करने का एक तरीका चाहिए।

इसके लिए विभिन्न सम्मेलन होते हैं।

स्तर 2 DOM API getElementById, getElementByTagName, और getElementsByName विधियाँ प्रदान करता है। आज तक ये किसी भी तरह के DOM ट्रैवर्सल के कार्यक्षेत्र हैं। अन्य सभी कट्टरपंथी jQuery के चयनकर्ता अंततः इनमें से एक संयोजन में हल करते हैं, और / या प्रत्येक DOM नोड के ट्रैवर्सल को सीधा करते हैं (यह getByClassName करने का तरीका है)।

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

एक और नया सम्मेलन डेटा-विशेषता चयन है।

<ul data-myapp-sortable="true">

jQuery('[data-myapp-sortable]').makeSortable();

डेटा-विशेषता का उपयोग आम तौर पर स्क्रिप्टिंग उद्देश्यों के लिए किया जाता है और इसका उपयोग करके चयन करना कुछ मायने रखता है। दोष यह है कि यह getElementById () का उपयोग करने की तुलना में धीमा है।

एक और दृष्टिकोण कोणीयजेएस द्वारा उपयोग किया जाने वाला एक है, जो एक दृश्य-मॉडल बनाता है। इस सम्मेलन में किसी भी प्रकार की स्क्रिप्टिंग कार्यक्षमता विशेष रूप से निर्दिष्ट विशेषताओं जैसे ng-disabled ng-hrefऔर बहुत से द्वारा निर्दिष्ट की गई है । आप अपनी जावास्क्रिप्ट में चयनकर्ताओं को नहीं जोड़ते हैं। HTML डॉक्यूमेंट क्या स्क्रिप्टेड है और कैसे बनता है, इस पर मुख्य अथॉरिटी बन जाती है और जावास्क्रिप्ट इस पर काम करती है। यह एक अच्छा तरीका है, लेकिन जाहिर तौर पर पिछले तरीकों की तुलना में अधिक सीखने की अवस्था है। और फिर, प्रदर्शन पर विचार करना होगा।

लेकिन कभी यह न सोचें कि आप इंटरैक्टिव HTML और जावास्क्रिप्ट लिख सकते हैं, और किसी भी तरह उन दोनों हिस्सों को दूसरे के बारे में नहीं जानते हैं। यह निर्भरता के संदर्भों को सीमित करने के तरीके के बारे में अधिक है।

Comments

शानदार जवाब, +1। यदि केवल तंग युग्मन से बचने के लिए एक तंत्र के रूप में डेटा विशेषताओं का उल्लेख करने के लिए

— फर्गस इन लंदन

डेटा-विशेषताएँ एक रामबाण नहीं हैं। वे इन दिनों बहुत लोकप्रिय हैं और लोग सब कुछ डाल रहे हैं लेकिन उनमें रसोई का सिंक है। बहुत सारे चौखटे (जैसे jQuery UI) बड़े पैमाने पर उनका उपयोग करते हैं। समस्याओं से बचने के लिए आपको नाम स्थान और अन्य सम्मेलनों के साथ वास्तविक सख्त होना होगा। वे जेएस से HTML को कम करने में मदद करते हैं, लेकिन वे जरूरी नहीं कि डिबगिंग को कोई आसान बनाते हैं।

— मस्ताबेला

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

— एरिक रेपेन

Answer 2

यदि आप आपको मिलने वाली अन्तरक्रियाशीलता को त्यागने के लिए तैयार हैं, तो आप पूरी तरह से जावास्क्रिप्ट से बच सकते हैं। ASP.NET MVC जैसे फ्रेमवर्क उन पृष्ठों की सेवा करने में बहुत अच्छे हैं जिनमें केवल HTML, CSS और SUBMIT बटन हैं।

ठीक है। शायद यह थोड़ा चरम है।

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

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

सबसे "आधुनिक" दृष्टिकोण (यानी सप्ताह का स्वाद) शायद एसपीए अनुप्रयोग है ।

Comments

मेरे लिए चरम ध्वनि नहीं है। कई साइटें जो जावास्क्रिप्ट का व्यापक उपयोग करती हैं, इस बिंदु पर कि वे इसके बिना अनुपयोगी हैं, वास्तव में इसकी आवश्यकता नहीं है। चाहेंगे कि उनके डेवलपर्स के पास एक सुराग अधिक था ...

— माइकल हैम्पटन

Answer 3

मार्टिन फाउलर इसका एक दृष्टिकोण अलग-अलग डोम के रूप में बताता है , जहां आप अपने पेज तर्क से अपने डोम जावास्क्रिप्ट को अलग करते हैं।

Application Logic <----> DOM Manipulation <----> DOM / HTML

Comments

+1 मैं जावास्क्रिप्ट <-> डोम तर्क को अलग करने से पूरी तरह सहमत हूं। मैं वास्तव में डेटा विशेषताओं को पसंद नहीं करता क्योंकि ये DOM के लिए प्रासंगिक नहीं हैं, लेकिन एक बाहरी उपकरण के लिए। मुझे लगता है कि क्लीनर दृष्टिकोण किसी प्रकार की मैपिंग करना है। हां, इसका मतलब यह हो सकता है कि आपके पास दो पहलुओं (जैसे, जेएस फ़ंक्शंस और डीओएम तत्व) के संदर्भ में एक फ़ाइल है, उदाहरण के लिए, डोम कुछ संदर्भों को शामिल करता है, जिसे जेएस उठाता है (जिसे 'एकल-पहलू' के रूप में वर्णित किया जा सकता है। ')। हालाँकि, अगर सोच-समझकर किया गया हो, तो यह बहुत ही रख-रखाव, पुन: प्रयोज्य हो सकता है, और डेटा विशेषताओं की तुलना में बेहतर अलगाव की पेशकश कर सकता है।

— AWJ

Answer 4

नहीं, वर्ग, तत्व और आईडी चयनकर्ताओं का उपयोग करके ग्राहक-पक्ष को टाला नहीं जाना चाहिए। वाक्यविन्यास का उपयोग किया जाता है क्योंकि CSS चयनकर्ता बहुत परिपक्व और अच्छी तरह से स्थापित डोमेन भाषा है, और एक सामान्य डिज़ाइन होने से प्रोग्राम और डिज़ाइन के बीच एक पृष्ठ के आम तार्किक मॉडल को साझा करना बहुत आसान हो जाता है, जो एक बहुत अच्छी बात है।

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

Comments

मैं वास्तव में कई चीजों के लिए वर्ग, तत्व और आईडी चयनकर्ताओं का उपयोग करने के खिलाफ सलाह देता हूं, और इसके बजाय कस्टम [data-*]विशेषता चयनकर्ताओं का उपयोग करने पर ध्यान केंद्रित करता हूं , जिनका उपयोग बहुत शक्तिशाली तरीकों से किया जा सकता है।

— zzzzBov

मेरे दिमाग में खराब सलाह, खासकर जब यह लिखने के लिए आता है मॉड्यूलर / पुन: प्रयोज्य जेएस जो चयनकर्ताओं पर कोई धारणा नहीं बनाना चाहिए। इन परिदृश्यों के लिए डेटा विशेषताएँ एक बेहतर विचार हैं।

— फर्ग्यूस इन लंदन

@zzzzBov - मुझे पता है कि यह एक माइक्रो-ऑप्टिमाइज़ेशन है, लेकिन आईडी और क्लास लुकअप डेटा-फ़ीचर लुक्स की तुलना में बहुत तेज़ हैं। लेकिन हां, मुझे अलग-अलग चिंताओं को संभालने के लिए अलग-अलग सेट के गुणों का उपयोग करने का विचार पसंद है।

— जिमी ब्रैक-मैके

Answer 5

किसी को डोम पर एक अप्रत्यक्ष और कैश लेयर के लिए jQuery पथ प्रबंधक इंटरफ़ेस बनाने की आवश्यकता है।

pathMgr.register(name,selector [,isDynamic=false]);
pathMgr.get(name [,refresh]);

फिर,

String.prototype.reg([isDynamic=false]);
String.prototype.get(name [,refresh]);

इसलिए,

// at init....
var pathMgr=new PathMgr();
'sidebar-links #sidebar a'.reg();// new registery of selector '#sidebar a' under name 'sidebar-links'
// more, more


// in code
'sidebar-links'.get().css(etc...);
//or
'sidebar-links'.addStyleRule({});