छिपे हुए इनपुट बनाम एचटीएमएल 5 डेटा विशेषताओं

Question

कुछ जो मुझे हाल ही में परेशान कर रहा है वह HTML5 data attributes का उपयोग है और उनका उपयोग करने के लिए उपयुक्त कब है।

आमतौर पर, एक पृष्ठ पर जो मेरे सर्वर पर कई AJAX कॉल करता है, मुझे ID की आवश्यकता होती है जो पृष्ठ के प्रतिनिधि को देखा जा रहा है। मैं वर्तमान में पृष्ठ पर एक छिपे हुए <input> तत्व में संग्रहीत कर रहा हूं, जिसे तब मेरे jQuery दस्तावेज़ तैयार कॉल के शीर्ष पर जेएस वैरिएबल में एक्सेस और संग्रहीत किया जाता है।

मैं इसे शरीर तत्व पर data-id विशेषता पर ले जाने पर विचार कर रहा हूं, जिसे मैं $('body').data('id'); का उपयोग करके jQuery में एक्सेस करूंगा।

क्या एचटीएमएल 5 डेटा एट्रिब्यूट्स या वीजा बनाम का उपयोग करने के कोई फायदे हैं? प्रदर्शन? सुरक्षा? "सर्वोत्तम प्रथाएं"?

यह मेरी समझ है कि डेटा विशेषताओं को सभी ब्राउज़रों द्वारा पहुंचा जा सकता है इसलिए आईई से निपटना कोई चिंता नहीं है।

Answer 1

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

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

यह एक अच्छा खुला सवाल है कि इस पर सर्वोत्तम प्रथाएं क्या हैं।

Answer 2

कैसे आप "आईडी" का उपयोग कर रहे पेज की पहचान करने के शायद यह सबसे अच्छा होगा

तरह http://www.example.com/page/123

जहां 123 आईडी

Answer 3

यहाँ है यूआरएल में आईडी डाल करने के आधार पर मेरी ले:

• हिडन input है, यह दिखाई दे रहा है, या संपादन करने योग्य बनाने के बिना सर्वर पर डेटा पास करने का तरीका के रूप में रूपों में प्रयोग की जाने वाली पग पर होती हैं ई।
• गुण तत्व की संपत्ति का वर्णन करने के लिए हैं। data- विशेषताएँ पृष्ठ पर जावास्क्रिप्ट को किसी तत्व के बारे में जानकारी देने के लिए हैं।

उस आधार पर, html या body तत्व पर एक data- विशेषता सबसे उपयुक्त प्रतीत होता है।

एक विकल्प, यद्यपि कम-अर्थपूर्ण, समाधान JSON के रूप में आपके पृष्ठ मेटाडेटा को क्रमबद्ध करना है और पृष्ठ पर वैश्विक चर के रूप में सेट करने के लिए script टैग का उपयोग करना है।आप पर कार्रवाई में देख सकते हैं उदाहरण के लिए, GitHub repositories, जहां एक वैश्विक GitHub वस्तु पेज के शीर्ष और कुछ जानकारी (रेपो नाम, वर्तमान शाखा, नवीनतम प्रतिबद्ध) के पास बनाई गई है के लिए, आसान पहुँच के लिए यह करने के लिए जोड़ा गया है।

Answer 4

मुख्य कमियां में से एक पहुँच है।

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

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

Answer 5

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

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

यह अधिकतर वेब आधारित ऐप्स या अधिक विशेष रूप से सास को प्रभावित करता है, जिसके लिए डेटा संचालित विशेषताओं की आवश्यकता नियमित वेबसाइट की तुलना में कहीं अधिक व्यापक होती है (यहां तक ​​कि इसके पीछे एक सीएमएस भी)। कि वे हम
मूल रूप से बनाया या तैयार किया गया

नहीं कर रहे हैं

1. उपयोग एचटीएमएल कुछ के लिए जिम्मेदार बताते हैं:

   मैं कई साल पहले, जब आप केवल 2 विकल्प था इस विशेषता के बारे दिन सपना करने के लिए इस्तेमाल एचटीएमएल उन में टोकन के साथ विशेषताओं का उपयोग, क्लाइंट साइड या सर्वर की ओर से समारोह के साथ उन्हें डिकोड करने के लिए (विभाजन, जोड़, विस्फोट)

इस दृष्टिकोण के साथ समस्या यह है कि n है o इससे कोई फर्क नहीं पड़ता कि आप इसे कैसे देखते हैं, आप नहीं हैं, जो एचटीएमएल विशेषताओं का उपयोग करते हैं, उनका मतलब है और उनका उपयोग करने के लिए डिज़ाइन किया गया है।

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

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

यह कैसे मैं यह करने के पहले डेटा विशेषता साथ आया था प्रयोग किया जाता है:

1. : आईडी टोकन के भीतर एक नया उत्पाद

   जोड़ने के लिए

   क्लिक करें मैं 3 मूल्यों था सर्वर से लोड होने वाला फॉर्म

2. संवाद विंडो की चौड़ाई
3. डायलो की ऊंचाई जी खिड़की

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

या तो दृष्टिकोण में विभाजित या समान कार्य का उपयोग करके टोकन को तोड़ना शामिल है।

यह मैं इसे कैसे अब क्या भयानक डेटा विशेषता के साथ:

क्लिक करें एक नया उत्पाद

इस तरह से मैं एक टोकन की जरूरत नहीं है जोड़ने के लिए, मैं सिर्फ साथ प्रत्येक विशेषता के मूल्य प्राप्त कर सकते हैं एक अच्छा पुराना $ (यह) .attr ('डेटा-फॉर्म') ;, $ (यह) .attr ('data-dwith'); और इसी तरह।

आईएमएचओ मुझे लगता है कि बनाने की तुलना में एचटीएमएल तत्वों में थोड़ा अतिरिक्त डेटा जोड़ना बेहतर है, इस प्रकार एक बहुत अधिक जावास्क्रिप्ट फ़ाइल इस प्रकार भारी और अधिक जटिल है।

Answer 6

मुझे पता है कि यह पोस्ट थोड़ी देर हो चुकी है क्योंकि यह पोस्ट सक्रिय है, लेकिन मैं हाल ही में इस विषय पर आया हूं, और मैं दोनों के प्रदर्शन पहलू पर टिप्पणी करना चाहता हूं।

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

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

अन्य विशेषताओं का उपयोग करके छिपे हुए इनपुट की तुलना में अधिक मेमोरी कुशल है, लेकिन अधिक प्रोसेसिंग की आवश्यकता हो सकती है। आपको शायद उन उपसर्गों का उपयोग करके कुछ प्रत्यय करने और डेटा निकालने की आवश्यकता है। इसके अलावा, उन्हें सेट करना और उन्हें प्राप्त करना भी मुश्किल हो सकता है और कुछ तत्वों की डिफ़ॉल्ट कार्यक्षमता को गड़बड़ कर सकता है।

तो यहां छुपा इनपुट और डेटा विशेषताओं के बीच चयन करने के लिए मेरे दिशानिर्देशों का सेट है।

• डेटा चुनें जिम्मेदार बताते हैं जब डेटा केवल सामने के छोर कार्यक्षमता के लिए इरादा है (वापस प्रस्तुत करने के लिए कोई जरूरत नहीं)
• चुनें डेटा विशेषताओं का बड़े पैमाने पर डेटा है कि आप जरूरत स्टोर करने के लिए (उदाहरण के है जब: ग्राफ समन्वय, कई के साथ बड़े लिस्टिंग पैरामीटर)
• छिपा आदानों चुनें जब विशेष वर्ण