javascript - कुछ HTML टैग्स के लिए मनमानी डेटा कैसे स्टोर करें




(14)

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

<a class="article" href="#5">

मैं फिर a.article तत्वों को खोजने के लिए jQuery का उपयोग करता हूं और उचित ईवेंट हैंडलर संलग्न करता हूं। (यहां उपयोगिता या अर्थशास्त्र पर भी लटका नहीं है, यह सिर्फ एक उदाहरण है)

वैसे भी, यह विधि काम करती है, लेकिन यह थोड़ा smells करता है, और बिलकुल एक्स्टेंसिबल नहीं है (क्या होता है यदि क्लिक फ़ंक्शन में एक से अधिक पैरामीटर होते हैं? क्या होगा यदि उनमें से कुछ पैरामीटर वैकल्पिक हैं?)

तत्काल स्पष्ट उत्तर तत्व पर विशेषताओं का उपयोग करना था। मेरा मतलब है, यही वह है जो वे हैं, है ना? (एक प्रकार का)।

<a articleid="5" href="link/for/non-js-users.html">

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

अतीत में उपयोग की जाने वाली एक और विधि वास्तव में कुछ जेएस उत्पन्न करना था और इसे पृष्ठ में <script> टैग में डालना था, जो एक संरचना बना रहा था जो ऑब्जेक्ट के साथ संबद्ध होगा।

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

लेकिन यह बनाए रखने के लिए बट में असली दर्द हो सकता है और आमतौर पर बहुत गन्दा होता है।

तो, सवाल उठाने के लिए, आप एचटीएमएल टैग के लिए जानकारी के मनमानी टुकड़े कैसे स्टोर करते हैं ?


Jquery का उपयोग करना,

स्टोर करने के लिए: $('#element_id').data('extra_tag', 'extra_info');

पुनर्प्राप्त करने के लिए: $('#element_id').data('extra_tag');


आप किस एचटीएमएल का संस्करण उपयोग कर रहे हैं?

एचटीएमएल 5 में, यह डेटा के साथ prefixed कस्टम विशेषताओं के लिए पूरी तरह से मान्य है- उदाहरण के लिए

<div data-internalid="1337"></div>

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

अगर मैं आप थे, तो मैं स्क्रिप्ट आधारित दृष्टिकोण का पालन करता हूं। आप सर्वर सर्वर पर इसे स्वचालित रूप से जेनरेट कर सकते हैं ताकि इसे बनाए रखने के लिए पीठ में दर्द न हो।


आप यादृच्छिक तत्व ( <span data-randomname="Data goes here..."></span> ) के अपने स्वयं के बनाए गए गुण के <span data-randomname="Data goes here..."></span> उपसर्ग का उपयोग कर सकते हैं, लेकिन यह केवल HTML5 में मान्य है। इस प्रकार ब्राउज़र वैधता के बारे में शिकायत कर सकते हैं।

आप <span style="display: none;">Data goes here...</span> का भी उपयोग कर सकते हैं <span style="display: none;">Data goes here...</span> टैग। लेकिन इस तरह आप विशेषता कार्यों का उपयोग नहीं कर सकते हैं, और यदि सीएसएस और जेएस बंद है, तो यह वास्तव में एक साफ समाधान नहीं है।

लेकिन मैं व्यक्तिगत रूप से क्या पसंद करता हूं निम्नलिखित है:

<input type="hidden" title="Your key..." value="Your value..." />

इनपुट सभी मामलों में छिपा होगा, गुण पूरी तरह से मान्य हैं, और अगर यह <form> टैग के भीतर है, तो यह नहीं भेजा जाएगा, क्योंकि इसका कोई नाम नहीं है, है ना? सबसे ऊपर, गुण याद रखना वाकई आसान है और कोड समझने में आसान और आसान लग रहा है। आप इसमें आईडी-एट्रिब्यूट भी डाल सकते हैं, ताकि आप आसानी से जावास्क्रिप्ट के साथ भी इसका उपयोग कर सकें और input.title; input.value - input.title; input.value साथ की-वैल्यू जोड़ी एक्सेस कर input.title; input.value input.title; input.value


इस तरह मैं आपको AJAX पेज करता हूं ... यह एक बहुत ही आसान तरीका है ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

यह कैसे काम करता है यह मूल रूप से उन सभी यूआरएल को देखता है जिनमें कक्षा 'AJAX' है और यह एक कीवर्ड को प्रतिस्थापित करता है और # चिह्न जोड़ता है ... इसलिए अगर जेएस बंद हो जाता है तो यूआरएल सामान्य रूप से कार्य करेगा जैसा कि वे सामान्य रूप से करते हैं ... सभी " ऐप्स "(साइट के प्रत्येक अनुभाग) का अपना कीवर्ड है ... इसलिए मुझे बस इतना करना है कि अधिक पेज जोड़ने के लिए ऊपर जेएस सरणी में जोड़ें ...

तो उदाहरण के लिए मेरी वर्तमान सेटिंग्स इस पर सेट हैं:

 var objApps= ['ads','user'];

तो अगर मेरे पास एक यूआरएल है जैसे कि:

www.domain.com/ads/3923/bla/dada/bla

जेएस स्क्रिप्ट / विज्ञापनों / भाग को प्रतिस्थापित करेगी, इसलिए मेरा यूआरएल समाप्त हो जाएगा

www.domain.com/ads/#p=3923/bla/dada/bla

फिर मैं पृष्ठ को लोड करने के लिए jquery bbq प्लगइन का उपयोग करता हूं ...

http://benalman.com/projects/jquery-bbq-plugin/


एक और तरीका एक कुंजी स्टोर करने के लिए हो सकता है: निम्न वाक्यविन्यास का उपयोग कर एक साधारण वर्ग के रूप में मूल्य जोड़ी:

<div id="my_div" class="foo:'bar'">...</div>

यह मान्य है और आसानी से jQuery चयनकर्ताओं या कस्टम किए गए फ़ंक्शन के साथ पुनर्प्राप्त किया जा सकता है।


एक संभावना हो सकती है:

  • सभी विस्तारित / मनमानी डेटा को पकड़ने के लिए एक नया div बनाएँ
  • यह सुनिश्चित करने के लिए कुछ करें कि यह div अदृश्य है (उदाहरण के लिए सीएसएस प्लस div की कक्षा विशेषता)
  • इस अदृश्य div के भीतर विस्तारित / मनमानी डेटा [एक्स] एचटीएमएल टैग के भीतर (उदाहरण के लिए किसी तालिका की कोशिकाओं के भीतर पाठ, या कुछ भी आपको पसंद हो सकता है) के भीतर रखें

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

हालांकि, मैं दुर्भाग्यपूर्ण पहचानूंगा, कि कई मामलों में सही समाधान सही समाधान नहीं है। इस मामले में मैं दृढ़ता से सुझाव देता हूं कि अतिरिक्त जानकारी रखने के लिए कुछ जावास्क्रिप्ट उत्पन्न करें।


तो ऐसा करने के लिए चार विकल्प होना चाहिए:

  1. आईडी विशेषता में डेटा रखें।
  2. मनमानी विशेषता में डेटा रखो
  3. कक्षा विशेषता में डेटा रखो
  4. अपने डेटा को दूसरे टैग में रखें

http://www.shanison.com/?p=321


मनमाना गुण मान्य नहीं हैं, लेकिन आधुनिक ब्राउज़र में पूरी तरह विश्वसनीय हैं। यदि आप जावास्क्रिप्ट के माध्यम से गुणों को सेट कर रहे हैं, तो आपको सत्यापन के बारे में चिंता करने की आवश्यकता नहीं है।

जावास्क्रिप्ट में विशेषताओं को सेट करने का एक विकल्प है। jQuery के पास उस उद्देश्य के लिए एक अच्छी उपयोगिता विधि है , या आप अपना खुद का रोल कर सकते हैं।


मनमानी डेटा जोड़ने के बजाय, पहले से मौजूद सार्थक डेटा का उपयोग क्यों न करें?

यानी <a href="/articles/5/page-title" class="article-link"> उपयोग करें, और फिर आप प्रोग्राम पर सभी लेख लिंक ( <a href="/articles/5/page-title" class="article-link"> माध्यम से) और आलेख आईडी (रेगेक्स से मिलान कर सकते हैं) /articles\/(\d+)/ this.href विरुद्ध)।


मुझे मेटाडेटा प्लगइन मिला है जो एचटीएमएल टैग के साथ मनमानी डेटा संग्रहीत करने की समस्या का एक उत्कृष्ट समाधान है जो इसे पुनर्प्राप्त करना और jQuery के साथ उपयोग करना आसान बनाता है।

महत्वपूर्ण : आपके द्वारा शामिल वास्तविक फ़ाइल केवल 5 केबी है और 37 केबी नहीं है (जो पूर्ण डाउनलोड पैकेज का आकार है)

Google Analytics विश्लेषण ईवेंट उत्पन्न करते समय उपयोग किए जाने वाले मानों को संग्रहीत करने के लिए इसका उपयोग करने का एक उदाहरण यहां दिया गया है (नोट: data.label और data.value वैकल्पिक पैराम होते हैं)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

मेरे पिछले नियोक्ता पर, हमने फॉर्म तत्वों के बारे में जानकारी रखने के लिए हर समय कस्टम HTML टैग का उपयोग किया था। पकड़: हम जानते थे कि उपयोगकर्ता को आईई का उपयोग करने के लिए मजबूर किया गया था।

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

यदि आप नियंत्रित कर सकते हैं कि आपका पाठक कौन सा ब्राउज़र उपयोग कर रहा है (यानी निगम के लिए एक आंतरिक वेब एप्लेट), तो हर तरह से, इसे आजमाएं। यह क्या चोट पहुंचा सकता है, है ना?


यदि आप पहले से ही jQuery का उपयोग कर रहे हैं तो आपको "डेटा" विधि का लाभ उठाना चाहिए जो jQuery के साथ एक डोम तत्व पर मनमानी डेटा संग्रहीत करने के लिए अनुशंसित विधि है।

कुछ स्टोर करने के लिए:

$('#myElId').data('nameYourData', { foo: 'bar' });

डेटा पुनर्प्राप्त करने के लिए:

var myData = $('#myElId').data('nameYourData');

यह सब कुछ है कि इसके लिए है लेकिन अधिक जानकारी / उदाहरणों के लिए jQuery दस्तावेज़ीकरण पर नज़र डालें।


यह अच्छी सलाह है। @ प्रेस्टौल के लिए धन्यवाद

यदि आप पहले से ही jQuery का उपयोग कर रहे हैं तो आपको "डेटा" विधि का लाभ उठाना चाहिए जो jQuery के साथ एक डोम तत्व पर मनमानी डेटा संग्रहीत करने के लिए अनुशंसित विधि है।

बहुत सच है, लेकिन क्या होगा यदि आप सादे पुराने एचटीएमएल में मनमानी डेटा स्टोर करना चाहते हैं? यहां एक और विकल्प है ...

<input type="hidden" name="whatever" value="foobar"/>

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

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







html