jQuery के अंदर से - गुण, गुण, डेटा

नए साल की छुट्टियों का आखिरी, लेकिन इस श्रृंखला में अंतिम नहीं, jQuery के इंटर्नल्स पर। अतीत बहुत तेज और छोटा निकला, लेकिन इस विषय में फेरीवालों की दिलचस्पी, मतदान से पता चलता है कि "क्या यह जारी रखने के लिए लायक है?"

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

उनमें से अंतिम सबसे दिलचस्प है और हम इसे आखिरी बार स्थगित कर देंगे।

सभी तीन कार्य सेवा पहुंच के माध्यम से काम करते हैं।

jQuery.access

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

शुरू करने के लिए, हमारे तर्कों को फ़ंक्शन में चेक किया जाता है और, यदि यह एक ऑब्जेक्ट है, तो इसे "विस्तारित" किया जाएगा और प्रत्येक कुंजी के लिए access को अलग से बुलाया जाएगा। व्यावहारिक रूप से, ये दो विकल्प समान हैं:

$('.user-avatar').attr( { 'alt': '', 'title': function(idx, value) { return ' ' + value + ' (' + $(this).data('id') + ')'; } } );

$('.user-avatar') .attr('alt', '') .attr('title', function(idx, value) { return ' ' + value + ' (' + $(this).data('id') + ')'; } );

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

गुण और गुण

jQuery.fn.attr

सबसे पहले, फ़ंक्शन ATTRIBUTE_NODE , COMMENT_NODE , TEXT_NODE लिए विशेषता प्राप्त करने या सेट करने के प्रयासों को काटने के लिए तत्व के प्रकार की जांच करता है ।

अगला jQuery.attr में कुंजी में निर्दिष्ट नाम के साथ एक फ़ंक्शन के अस्तित्व के लिए एक चेक है , लेकिन यह चेक केवल तभी काम करता है यदि jQuery.attr init से jQuery.attr है। पहला लेख इस विषय पर एक उदाहरण था और मैंने इसके बारे में फिर से बात करने का वादा किया था। तो, दाईं ओर कोड पर बाईं ओर कोड "तैनात" किया जाएगा:

$('<span>', { 'title': '', 'text': ' ', 'appendTo': document.body } );

$('<span>') .attr('title', '') .text(' ') .appendTo(document.body);

मैं यह सिर्फ बहुत सुंदर नहीं है क्योंकि appendTo साथ ऐसा करने की सिफारिश नहीं है। हालाँकि, यह किसी भी फ़ंक्शन के लिए संभव है जिसे हम jQuery.fn में पा सकते हैं। इस मामले में, attr पाठ और परिशिष्ट कार्यों को ढूंढेगा और अपने काम को जारी रखने के बजाय उन्हें कॉल करेगा।

यदि तत्व getAttribute रूप में ऐसी सभी विधि में मौजूद नहीं है, तो jQuery.prop को एक ही कुंजी और मान के साथ कहा जाएगा। यह मामला काफी संकीर्ण है और प्रकट होता है, बगरेपोर्ट द्वारा, केवल HTML के साथ काम नहीं करते हुए पुराने IE में, लेकिन उदाहरण के लिए, एक अजाक्स अनुरोध से आने वाले XML दस्तावेज़ के साथ।

यदि विशेषता मान फ़ंक्शन में पास होता है और null , तो jQuery.removeAttr फ़ंक्शन को कॉल किया जाएगा , जो विशेषता (या विशेषताएँ, यदि वे एक स्थान के साथ सूचीबद्ध थे) को हटा देंगे और संबंधित बूलियन गुण, यदि कोई हो, को false लिए डाल देंगे।

इसके अलावा, विशेषता मान को संबंधित हुक (यदि कोई पाया जाता है) या सामान्य सेट-एट्रिब्यूट का उपयोग करके सेट किया जाएगा, या इसे हुक के माध्यम से प्राप्त किया जाएगा या getAttribute ।

jQuery.fn.prop

हम इस फ़ंक्शन पर लंबे समय तक निवास नहीं करेंगे, क्योंकि यह attr के समान ही काम करता है, केवल तत्व को सीधे गुण सेट करता है और साथ ही साथ गुणों के नामों को सामान्य करता है । सामान्यीकरण jQuery.propFix सेवा ऑब्जेक्ट के माध्यम से होता है, जो, फिर से, प्रलेखित नहीं है और इसका उपयोग करना उचित नहीं है, हालांकि:

 jQuery.propFix.validMsg = 'validationMessage'; //    $('input:first').prop('validMsg') === $('input:first').prop('validationMessage'); 

hooky

jQuery.attrHooks ( jQuery.attrHooks ) और prop ( jQuery.propHooks ) के लिए हुक एक साधारण वस्तु है जिसमें एक set और / या फंक्शन get है। वे कार्य में लगे हुए हैं और एक निश्चित मूल्य प्राप्त कर रहे हैं। उदाहरण के लिए, यह अधिक स्पष्ट होगा:

 <span class="user user-male"></span> <span class="user user-male"></span><!-- male -  !--> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script> var SEX_MALE = 0, SEX_FEMALE = 1, sexClassesMap = { 'user-male': SEX_MALE, 'user-female': SEX_FEMALE }; jQuery.propHooks.usersex = { get: function(elem) { var elementClasses = elem.className.split(/\s+/), i = elementClasses.length; for (; i > 0; i--) { if ('undefined' !== typeof sexClassesMap[elementClasses[i]]) { return sexClassesMap[elementClasses[i]]; } } }, set: function(elem, value) { var $element = $(elem), i; for (className in sexClassesMap) { $element.toggleClass( className, sexClassesMap[className] === value ); } } } //      male if (SEX_MALE === $('.user:first').prop('userSex')) { console.log(' - !'); } //    -   $('.user:last').prop('userSex', SEX_FEMALE); </script> 

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

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

 > $('<input>').attr('disabled', true) [<input disabled=​"disabled">​] 

इस स्थिति में, हुक disabled संपत्ति के मूल्य को भी true ।

nodeHook का एक सेट भी है, लेकिन यह बैसाखी का एक प्रकार है, जिसे ब्राउज़र क्षमताओं की जांच करते समय (उदाहरण के लिए, यहां ) jQuery के आरंभीकरण चरण में फिर से भरना है। आधुनिक ब्राउज़रों में, यह खाली है।

डेटा

शुरू करने के लिए, आपको गंभीरता से लगता है कि अगर आपको लगता है कि jQuery ऐसी किसी चीज़ के बारे में जानता है जो एक डेटासेट के रूप में होती है जो HTML5 के साथ हमारे पास आई है। उसके पास कोई विचार नहीं है, इसका उपयोग पुस्तकालय में कहीं भी नहीं किया जाता है, सब कुछ मैन्युअल रूप से किया जाता है। हालांकि, dataset माध्यम से सेट की गई संपत्तियां jQuery.data माध्यम से सुलभ हैं (केवल अगर यह एक वस्तु नहीं है)। लेकिन अगर कुछ jQuery से jQuery.data माध्यम से सेट किया गया है, तो यह dataset माध्यम से सुलभ नहीं होगा, क्योंकि लाइब्रेरी अपने कैश में दिए गए सभी मूल्यों को संग्रहीत करता है। पहले चीजें पहले, हम भी अध्याय को थोड़ा तोड़ देंगे।

नाम स्थान

हम उल्लेख करते हैं कि jQuery में 1.8.3 jQuery.fn.data डेटा के लिए तथाकथित नाम स्थान के साथ काम करने की अनुमति देता है। यह सुविधा 1.7 में पदावनत के रूप में चिह्नित है, और 1.9 में यह अब बिल्कुल भी नहीं है। तो अगर आप कुछ इस तरह का उपयोग करते हैं, तो मेरे पास आपके लिए बुरी खबर है:

 $('sometag').on('changeData.users', function(e) { console.dir(e); } ); // ,   ,     $('sometag').data('id.users', 10); //    -  ,       $('sometag').data( { 'id.users': 10 } ); 

घटनाओं में नाम स्थान गायब नहीं होते हैं और हम भविष्य में निश्चित रूप से उन पर विचार करेंगे।

acceptData

data हर चीज के साथ काम नहीं करता है जो चलता है, लेकिन केवल इस तथ्य के साथ कि एक्सेप्टडाटा फ़ंक्शन टेस्ट पास करता है। केवल नोड्स, embed नहीं, applet या object (इस मामले में, फ्लैश के अपवाद के साथ, परिभाषा classid से आती है)।

jQuery.cache

JQuery में कैश न केवल data का उपयोग करता है। डेटा के साथ हमारे मामले के लिए, कुछ कुंजी के लिए कुछ मूल्य सेट करते समय तत्व द्वारा कैश को कुछ मिलता है। jQuery.cache ऑब्जेक्ट एक नियमित क्रमांकित ऑब्जेक्ट है, जहां कुंजी तत्व के expando मूल्य है। jQuery.expando - एक अद्वितीय पहचानकर्ता जो लाइब्रेरी के प्रारंभ होने पर यादृच्छिक रूप से निर्धारित किया जाता है। जैसे ही हम कैश में कुछ लिखना चाहते हैं, तत्व को कैश में अपना सीरियल नंबर ( वैश्विक काउंटर jQuery.guid का वेतन वृद्धि) jQuery.guid किया जाता है, जो तत्व की संपत्ति को लिखा जाता है। संख्या के अनुरूप कैश तत्व में, मान को "डेटा" अनुभाग में रखा जाएगा। उदाहरण के लिए, यह अधिक स्पष्ट होगा:

 var $span = $('<span>'), spanElement = $span[0]; //  ,       console.log(jQuery.expando); // jQuery18302642508496064693 console.log(spanElement[jQuery.expando]); // undefined //     id $span.data('id', 10); console.log(spanElement[jQuery.expando]); // 1 console.dir(jQuery.cache[1]); /* Object { data: Object { id: 10 } } */ $span.remove(); console.dir(jQuery.cache[1]); // undefined console.dir(jQuery.deletedIds); // [ 1 ] 

पिछले लेख में cleanData का संक्षिप्त उल्लेख याद है? यह केवल हटाए गए आइटम के लिए कैश को साफ करता है , और हटाए गए सीरियल नंबर को jQuery.deletedIds में jQuery.deletedIds , फिर एक नया जेनरेट करने के बजाय वहां से अगला नंबर लेने के लिए।

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

 var $strangeObject = $( { 'test': 123 } ), strangeObject = $strangeObject[0]; $strangeObject.data('id', 10); console.dir(strangeObject); /* Object { jQuery18309172190900426358: Object { data: Object { id: 10 } toJSON: function () {} } test: 123 } */ console.log(JSON.stringify(strangeObject, null, 4)); /* { "test": 123 } */ 

CamelCase

data लिए सभी कुंजियाँ पढ़ने और लिखने दोनों पर कैमलकेस में परिवर्तित हो data (वैसे, dataset इस पर गर्व नहीं कर सकता, यह डैश के साथ कुंजियों पर शपथ लेगा):

 $('<span>').data('test-me', 10).data('testMe') // 10 $('<span>').data('testMe', 10).data('test-me') // 10 

डेटा रिकॉर्डिंग

कुंजी से लिखने के लिए, पुस्तकालय पहले नाम स्थान (जो कि अवधि के बाद) आवंटित करने की कोशिश करता है , बाद में उस घटना के कॉल में उपयोग करता है जिसे हमने ऊपर उल्लेख किया था।

फिर, उसी accessData माध्यम से (हम किसी फ़ंक्शन, आदि से मान प्राप्त करने के लिए समर्थन को याद करते हैं), यह तत्व पर सेटडेटा ईवेंट हैंडलर को कॉल करने की कोशिश करता है, कैश को डेटा लिखता है (आमतौर पर jQuery.data कैश के साथ काम करने के लिए सिर्फ एक शीट है, जिसे हमने पहले से ही थोड़ा सीखा है। ऊपर) और changeData ईवेंट changeData को कॉल करने का प्रयास करता है।

ऑब्जेक्ट द्वारा, एकाधिक डेटा रिकॉर्ड करने के लिए, jQuery.data प्रत्येक कुंजी-मान के लिए jQuery.data , jQuery.data , सीधे लिखकर, accessData को दरकिनार कर accessData और संबंधित घटनाओं को कॉल किया जाता है, जो कि लाइब्रेरी में सबसे अधिक संभावना है (इसमें खुद को कॉल करना होगा, jQuery.fn.data )। कुछ भी मरम्मत करने की आवश्यकता नहीं है, 1.9 में यह टुकड़ा फिर से लिखा गया था।

पढ़ना

एक तत्व पढ़ना भी accessData से होकर गुजरता है। सबसे पहले, पुस्तकालय कैश में डेटा को खोजने की कोशिश करता है और, अगर यह नहीं मिला है, तो यह उस तत्व के डेटा-विशेषताओं को खोजने की कोशिश करता है जो पहले से ही मैन्युअल रूप से सेट किया जा सकता था।

इस मामले में, कुंजी एंटी-कोमेलीज़ी (ओह क्या शब्द है, लेकिन मुद्दा यह है कि टेस्टमे को टेस्ट-मी में बदल दिया जाएगा) और यह संबंधित डेटा-विशेषता (पिछले ब्रैकेट से एक उदाहरण के लिए डेटा-टेस्ट-मी) का मूल्य प्राप्त करने की कोशिश करता है और यदि यदि यह पाया जाता है, तो इसे पार्स किया जाएगा। यदि मान null या बूलियन है, तो इसे मूल (स्ट्रिंग नहीं) में परिवर्तित किया जाएगा, लेकिन यदि विशेषता मान एक खुले घुंघराले ब्रैकेट के साथ शुरू होता है, तो लाइब्रेरी jQuery.jsonParse को कॉल करने का प्रयास करेगी । कृपया ध्यान दें कि एक लंबी संख्या (20 से अधिक वर्ण) एक संख्या के रूप में और एक स्ट्रिंग के रूप में दोनों वापस कर सकते हैं (टिप के लिए सिल्वर_क्लैश के लिए धन्यवाद), यदि, एक संख्या और इसके विपरीत में परिवर्तित होने के बाद, मूल के साथ तुलना विफल हो जाएगी। परिणामी मूल्य कैश को लिखा जाएगा और डेवलपर को वापस कर दिया जाएगा।

पूरे डेटा सेट को पुनः प्राप्त करने से फिर से accessData से अलग हो accessData और, फिर से, getData इवेंट getData कॉल नहीं करेगा। इस स्थिति में, कैश से सबकुछ प्राप्त हो जाएगा, साथ ही पुस्तकालय तत्व की सभी विशेषताओं को खत्म कर देगा, जिसका नाम "डेटा-" से शुरू होता है और उन्हें कैश में भी लिखें, कैश में parsedAttrs ध्वज को पास करना, ताकि सभी विशेषताओं की अगली पुनर्प्राप्ति अब पूरी न हो। जुदा।

निष्कर्ष

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

हमेशा की तरह, लेख के बारे में अपनी राय व्यक्त करने के लिए, कुछ प्रस्तावित करने और पूछने के लिए स्वतंत्र महसूस करें।

सामग्री चक्र

1. परिचय
2. एचटीएमएल पार्सिंग
3. डोम हेरफेर
4. गुण, गुण, डेटा