jQuery $ .data() फ़ंक्शन के लिए वेनिला विकल्प: कोई मूल जावास्क्रिप्ट विकल्प?

Question

मैं आमतौर पर अपनी स्क्रिप्ट में jQuery लाइब्रेरी को शामिल करने से बचता हूं, हालांकि मैं हाल ही में jQuery मूल्य $ .data() की मुख्य कार्यक्षमता के रूप में डेटा जोड़ने के लिए कार्य करने की क्षमता, ऑब्जेक्ट & किसी भी के साथ कार्य करता हूं तत्व।

जो मैंने पढ़ा है, उससे jQuery की $ .data() फ़ंक्शन भी सुरक्षा उपायों में बनाया गया है जो इस तरह के प्रथाओं से जुड़े स्मृति रिसाव को रोकता है, लेकिन उस एकल फ़ंक्शन के लिए संपूर्ण जेक्यू लाइब्रेरी को शामिल करना अधिक है।

क्या किसी को मूल विकल्प के बारे में पता है?

संपादित करें खुद को और स्पष्ट करने के लिए, मैं तत्व विशेषताओं को पुनर्प्राप्त करने के लिए मूल कार्य नहीं ढूंढ रहा हूं। jQuery की $ .data() एपीआई जावास्क्रिप्ट ऑब्जेक्ट्स & jQuery तत्व नोड्स के साथ फ़ंक्शंस को जोड़ने की क्षमता के विस्तार से इस तरह के उपयोग से बहुत दूर है।

यह लेख (http://tutorialzine.com/2010/11/jquery-data-method/) इस प्रयोग पर छू लेती है, लेकिन मैं वर्तमान में इसका उपयोग कर रहा हूँ एक उदाहरण के रूप एक वस्तु के साथ एक GSAP समय एनीमेशन संबद्ध करने के लिए, ताकि मैं पहुँच सकते हैं और के बाहर GSAP समय के .reverse() एनीमेशन समारोह कॉल कर सकते हैं वह कार्य जो इसे बनाया गया है। उदाहरण के लिए:

function doAnimation(){ 
    var element = document.createElement('div'), 
     timeline = new TimelineMax({....GSAP related fns...}), 
     options = { 
      .... 
      timeline: timeline 
     }; 
    $(element).data('options', options); 
} 


function reverseAnimation($element){ 
    var options = $element.data('options'), 
     previouslyCreatedTimeline = options.timeline; 

    previouslyCreatedTimeline.reverse(); 
} 

शायद नहीं स्पष्ट उदाहरण है अगर आप GSAP के एक उपयोगकर्ता नहीं हैं, लेकिन संक्षेप में, $ .data() विधि मुझे एक तत्व के साथ एक जावास्क्रिप्ट वस्तु संबद्ध करने के लिए अनुमति दी है, ताकि मैं अपने मूल दायरे के बाहर किसी फ़ंक्शन में इसकी विधियों तक पहुंच सकते हैं।

Answer 1

setAttribute विधि का उपयोग करें:

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'"); 

लेकिन क्या तुम सच में डेटा का उपयोग कर किया जाना चाहिए की तरह, एक पानी का छींटा के साथ और उसके संपत्ति के साथ पीछा किया:

<li ... data-icon="base.gif" ...> 

और जे एस में यह करने के लिए डाटासेट का उपयोग संपत्ति:

document.getElementById('item1').dataset.icon = "base.gif"; 

Answer 2

निम्नलिखित सामान्य डेटा फ़ंक्शन देखें। ऑब्जेक्ट को दिए गए कुंजी के साथ मेटाडेटा सेट करने के लिए किसी ऑब्जेक्ट को दिए गए किसी दिए गए कुंजी के साथ मेटाडेटा प्राप्त करने के लिए $.data(obj, key) किसी ऑब्जेक्ट को जिम्मेदार सभी मेटाडेटा प्राप्त करने के लिए $.data(obj) का उपयोग करें, और $.data(obj, key, val)। देशी ऑब्जेक्ट विशेषताओं के टकराव के साथ समस्या हो सकती है जैसे 'toString' या 'hasOwnProperty' की कुंजी के साथ कुछ सेट करना।

$.data(document.body); // Returns {} because no data has been set for this object 
$.data(document.body, 'lastUpdate', new Date());//Sets 'lastUpdate' of obj to current time 
$.data(document.body, 'lastUpdate'); // Gets previously set time 
$.data(document.body); // Gets object of all data, including 'lastUpdate' time 
$.data(document.body, 'nonexistant'); // Returns undefined because property was never set 
$.data(); // Returns all metadata 

Answer 3

सरल कुंजी-मान भंडारण के लिए, .dataset, जो तत्व की data-* विशेषताओं को दर्शाता है का उपयोग करें:

window.$ = { 
    data: function(obj, key, val) { 
     if(!obj) { 
      return this._data; 
     } else if(!key) { 
      if(!(obj in this._data)) { 
       return {}; 
      } 
      return this._data[obj]; 
     } else if(arguments.length < 3) { 
      if(!(obj in this._data)) { 
       return undefined; 
      } 
      return this._data[obj][key]; 
     } else { 
      if(!(obj in this._data)) { 
       this._data[obj] = {}; 
      } 
      this._data[obj][key] = val; 
     } 
    }, 
    _data: {} 
}; 

यहाँ उसके उपयोग के तरीके का एक उदाहरण है। यह स्ट्रिंग मानों तक सीमित है, इसलिए आपको समग्र मानों को क्रमबद्ध करने की आवश्यकता होगी (उदाहरण के लिए JSON का उपयोग करना)।

वस्तुओं और कार्यों के संदर्भों को संग्रहीत करने के लिए, मैं WeakMap का उपयोग करने की अनुशंसा करता हूं। यह किसी भी स्मृति रिसाव से बचने के लिए ख्याल रखेगा। ब्राउज़र में जो इसका समर्थन नहीं करते हैं, उन्हें HTML तत्व पर सीधे संपत्ति के रूप में संग्रहित करें, लेकिन टक्कर मुक्त संपत्ति नामों का चयन करने के लिए सावधानी बरतें।

Answer 4

आप किसी भी डोम तत्व पर कुछ भी स्टोर कर सकता है:

// store data: 
document.body.data = {a:1, b:2}; 

// retrieve data: 
console.log(document.body.data); 

मैं यहाँ data शब्द का इस्तेमाल एक कस्टम डोम संपत्ति के रूप में है, लेकिन यह किसी भी शब्द हो जो पहले से उपयोग में हो सकता है।

---

jQuery क्योंकि यह मेमोरी लीक हो सकती है, तत्व स्वयं पर चीजों की दुकान नहीं है, लेकिन जब से तुम एक बहुत ही विशेष कार्य के लिए इस की जरूरत है, तो यह काम करेगा। बस यह सुनिश्चित करने के पहले कि आप इसे याद करने से पहले मेमोरी लीक कैसे काम करते हैं, सुनिश्चित करें।

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

Answer 5

मैंने वीकैप और मानचित्र के चारों ओर एक रैपर लिखा है, जो नौकरी करना चाहिए। वीकैप के बारे में अच्छी बात यह है कि एलिमेंट हटा दिए जाने के बाद मूल्य को कचरा इकट्ठा किया जाता है। यह स्मृति रिसाव से बचना चाहिए।

/** A storage solution aimed at replacing jQuerys data function. 
* Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap]. 
* This makes sure the data is garbage collected when the node is removed. 
*/ 
window.dataStorage = { 
    _storage: new WeakMap(), 
    put: function (element, key, obj) { 
     if (!this._storage.has(key)) { 
      this._storage.set(element, new Map()); 
     } 
     this._storage.get(element).set(key, obj); 
    }, 
    get: function (element, key) { 
     return this._storage.get(element).get(key); 
    }, 
    has: function (element, key) { 
     return this._storage.get(element).has(key); 
    }, 
    remove: function (element, key) { 
     var ret = this._storage.get(element).delete(key); 
     if (!this._storage.get(key).size === 0) { 
      this._storage.delete(element); 
     } 
     return ret; 
    } 
} 

इस तरह यह प्रयोग करें:

var myElement = document.getElementById("myId"); 
dataStorage.put(myElement, "myKey", "myValue"); 

यह $ .data() की तुलना में बहुत तेजी से, लेकिन अभी भी एक तत्व पर एक संपत्ति के रूप में सूचना के संचय की तुलना में थोड़ा धीमी है।