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




(17)

मैं एक पृष्ठ बना रहा हूं जिसमें जावास्क्रिप्ट द्वारा प्रदान की गई कुछ बातचीत है। एक उदाहरण के रूप में: लिंक जो लेखों की सामग्री प्राप्त करने के लिए 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">

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

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


Answers

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

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

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

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

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

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


इस तरह मैं आपको 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/


मुझे मेटाडेटा प्लगइन मिला है जो एचटीएमएल टैग के साथ मनमानी डेटा संग्रहीत करने की समस्या का एक उत्कृष्ट समाधान है जो इसे पुनर्प्राप्त करना और 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"/>

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

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


बस एक और तरीका, मैं व्यक्तिगत रूप से इसका उपयोग नहीं करता लेकिन यह काम करता है (आश्वस्त करें कि आपका JSON मान्य है क्योंकि eval () खतरनाक है)।

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

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

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


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

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

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

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

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

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


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

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

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


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


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

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

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


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

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

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

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

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


आप छुपा इनपुट टैग का उपयोग कर सकते हैं। मुझे w3.org पर इस के साथ कोई सत्यापन त्रुटियां नहीं मिलीं:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

JQuery के साथ आपको कुछ ऐसा (जैसे परीक्षण नहीं किया गया) के साथ आलेख आईडी मिलेगी:

$('.article input[name=articleid]').val();

लेकिन अगर मैं एक विकल्प है तो मैं एचटीएमएल 5 की सिफारिश करूंगा।


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


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

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


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

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

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


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

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

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

ब्राउजर द्वारा <BASE> उपयोग किए बिना लिंक कैसे संसाधित किए जाते हैं?

कुछ उदाहरणों के लिए, मान लीजिए कि हमारे पास ये यूआरएल हैं:

ए) http://www.example.com/index.html
बी) http://www.example.com/
सी) http://www.example.com/page.html
डी) http://www.example.com/subdir/page.html

ए + बी दोनों एक ही फ़ाइल ( index.html ) में परिणामस्वरूप ब्राउज़र पर भेजे जाते हैं, सी निश्चित रूप से /subdir/page.html . page.html भेजता है, और डी भेजता है /subdir/page.html

आइए आगे मान लें, दोनों पृष्ठों में लिंक का एक सेट है:

1) पूरी तरह से योग्य पूर्ण लिंक ( http://www... )
2) स्थानीय पूर्ण लिंक ( /some/dir/page.html )
3) फ़ाइल नाम ( dir/page.html ) सहित सापेक्ष लिंक, और
4) केवल "सेगमेंट" के साथ सापेक्ष लिंक ( #anchor ?foo=bar )।

ब्राउज़र पृष्ठ प्राप्त करता है, और HTML प्रस्तुत करता है। अगर इसे कुछ यूआरएल मिल जाए, तो उसे यह पता होना चाहिए कि इसे कहां इंगित करना है। यह लिंक 1 के लिए हमेशा स्पष्ट है), जिसे लिया जाता है। अन्य सभी प्रस्तुत पृष्ठ के यूआरएल पर निर्भर करते हैं:

URL     | Link | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

अब <BASE> साथ क्या परिवर्तन किया जा रहा है?

<BASE> यूआरएल को प्रतिस्थापित करना है जैसा कि यह ब्राउज़र में दिखाई देता है । इसलिए यह सभी लिंक प्रस्तुत करता है जैसे उपयोगकर्ता ने <BASE> में निर्दिष्ट यूआरएल को बुलाया था। जो कई अन्य उत्तरों में भ्रम की कुछ व्याख्या करता है:

  • फिर, "पूरी तरह से योग्य पूर्ण लिंक" ("प्रकार 1") के लिए कुछ भी नहीं बदलता है
  • स्थानीय पूर्ण लिंक के लिए, लक्षित सर्वर बदल सकता है (यदि <BASE> में निर्दिष्ट एक जिसे उपयोगकर्ता से प्रारंभ में कहा जाता है)
  • सापेक्ष यूआरएल यहां महत्वपूर्ण हो जाते हैं, इसलिए आपको विशेष देखभाल करना होगा कि आपने <BASE> कैसे सेट किया है:
    • एक निर्देशिका में इसे स्थापित करने से बेहतर बेहतर है। ऐसा करने से, "टाइप 3" के लिंक काम करना जारी रख सकते हैं, लेकिन यह निश्चित रूप से "टाइप 4" ("केस बी" को छोड़कर) को तोड़ देता है।
    • इसे पूरी तरह से योग्य फ़ाइल नाम पर सेट करें , ज्यादातर मामलों में, वांछित परिणाम।

एक उदाहरण यह सबसे अच्छा बताता है

मान लें कि आप mod_rewrite का उपयोग करके कुछ यूआरएल "सुंदर" करना चाहते हैं:

  • वास्तविक फ़ाइल: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • असली यूआरएल: http://www.example.com/some/dir/file.php?lang=en
  • उपयोगकर्ता के अनुकूल यूआरएल: http://www.example.com/en/file

आइए मान लें कि mod_rewrite का प्रयोग वास्तविक रूप से उपयोगकर्ता के अनुकूल यूआरएल को पारदर्शी रूप से फिर से लिखने के लिए किया जाता है (कोई बाहरी री-डायरेक्ट नहीं, इसलिए "उपयोगकर्ता के अनुकूल" ब्राउजर एड्रेस बार में रहता है, जबकि वास्तविक-लोड होता है)। अब क्या करे?

  • नहीं <BASE> निर्दिष्ट: सभी सापेक्ष लिंक तोड़ता है (क्योंकि वे अब http://www.example.com/en/file पर आधारित होंगे)
  • <BASE HREF='http://www.example.com/some/dir> : बिल्कुल गलत। dir निर्दिष्ट यूआरएल का फाइल हिस्सा माना जाएगा, फिर भी, सभी रिश्तेदार लिंक टूटे हुए हैं।
  • <BASE HREF='http://www.example.com/some/dir/> : बेहतर पहले से ही। लेकिन "टाइप 4" के सापेक्ष लिंक अभी भी टूटे हुए हैं ("केस बी" को छोड़कर)।
  • <BASE HREF='http://www.example.com/some/dir/file.php> : बिल्कुल। सब कुछ इस के साथ काम करना चाहिए।

एक अंतिम नोट

ध्यान रखें कि यह आपके दस्तावेज़ में सभी यूआरएल पर लागू होता है:

  • <A HREF=
  • <IMG SRC=
  • <SCRIPT SRC=
  • ...




javascript html