कस्टम विशेषताएँ - Yea या nay?

Question

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

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

ऐसा लगता है कि यह वास्तव में सर्वर साइड और क्लाइंट साइड कोड दोनों को सरल कर सकता है , लेकिन यह डब्ल्यू 3 सी का अनुपालन नहीं है।

क्या हमें अपने वेब ऐप्स में कस्टम HTML विशेषताओं का उपयोग करना चाहिए? क्यों या क्यों नहीं?

उन लोगों के लिए जो कस्टम गुण सोचते हैं, एक अच्छी बात है: उनका उपयोग करते समय कुछ बातों को ध्यान में रखना चाहिए?

उन लोगों के लिए जो कस्टम गुण सोचते हैं, बुरी बात है: आप कुछ समान को पूरा करने के लिए किन विकल्पों का उपयोग करते हैं?

अपडेट: मैं ज्यादातर विभिन्न तरीकों के पीछे तर्क में रुचि रखता हूं , साथ ही साथ यह भी बताता हूं कि एक विधि दूसरे से बेहतर क्यों है। मुझे लगता है कि हम सभी एक ही चीज़ को पूरा करने के लिए 4-5 अलग-अलग तरीकों से आ सकते हैं। (छिपे हुए तत्व, इनलाइन स्क्रिप्ट, अतिरिक्त कक्षाएं, आईडी से जानकारी पार्स करना, आदि)।

अद्यतन 2: ऐसा लगता है कि HTML 5 data-विशेषता विशेषता का यहाँ बहुत समर्थन है (और मैं सहमत हूँ, यह एक ठोस विकल्प की तरह दिखता है)। अब तक मैंने इस सुझाव के खंडन के तरीके में बहुत कुछ नहीं देखा है। क्या इस दृष्टिकोण का उपयोग करने के बारे में चिंता करने के लिए कोई समस्या / नुकसान हैं? या क्या यह बस वर्तमान W3C चश्मे का 'हानिरहित' अमान्य है?

Comments

सच में, मेरी प्रारंभिक रुख है कि वे कर रहे हैं है नहीं इस तरह के एक बुरी बात है, जो बल्कि शुद्धतावादियों के साथ विवादास्पद हो सकता है। मुझे ऐसा लगता है कि वास्तव में मुझे इसको ठीक से वापस करने के लिए उपलब्ध सभी विकल्पों का मूल्यांकन करने की आवश्यकता है, हालांकि, इस प्रकार लंबे निबंध लिखने की आवश्यकता है।

— पाओलो बरगीनो

ऐसा करने के लिए आपको केवल कुछ प्रति-उदाहरण [s] की आवश्यकता हो सकती है: आप जिसे लागू करने की कोशिश कर रहे हैं, वह कस्टम विशेषताओं के साथ ऐसा करने के लिए कैसे सुविधाजनक है, और क्यों वह समाधान बेहतर है और कस्टम विशेषताओं के बिना अन्य समाधानों से बदतर नहीं है।

— क्रिस जू

@ क्रिस मैं ज्यादातर ब्याज से बाहर पूछ रहा हूं, कुछ विशिष्ट एप्लिकेशन से नहीं।

— टीएम।

खैर, ग्राहक पक्ष को डेटा प्राप्त करने के लिए बहुत सारे विकल्प हैं: छिपी इनपुट फ़ील्ड, छिपी हुई परिभाषा सूची, कक्षाएं, मेटाडेटा प्लगइन्स, एक विशाल जावास्क्रिप्ट डिक्शनरी (ऑब्जेक्ट) के साथ सभी डेटा मैपिंग अलग-अलग, कस्टम विशेषताएँ, डेटा विशेषताएँ ( एचटीएमएल 5), आदि मैं इन सभी का पता लगाना चाहता हूं, उनकी खूबियों, उनके नुकसान पर विचार करता हूं, और अंत में किसी निष्कर्ष पर पहुंचता हूं। इस पोस्ट ने आखिरकार मुझे यह लिखना शुरू कर दिया। :) 2010 से कुछ समय पहले किया जाना चाहिए।

— पाओलो बर्गैनिनो

@Paolo आप बस यह नहीं कह सकते हैं कि आपने हमें इस लिंक का जवाब दिए बिना एक निबंध लिखा है। अछा नहीं लगता।

— Connell

Answer 1

HTML 5 स्पष्ट रूप से कस्टम विशेषताओं की अनुमति देता है जो इसके साथ शुरू होती हैं data। इसलिए, उदाहरण के लिए, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>वैध है। चूंकि यह आधिकारिक तौर पर एक मानक द्वारा समर्थित है, मुझे लगता है कि यह कस्टम विशेषताओं के लिए सबसे अच्छा विकल्प है। और इससे आपको हैक के साथ अन्य विशेषताओं को अधिभारित करने की आवश्यकता नहीं होती है, इसलिए आपका HTML शब्दार्थ रह सकता है।

स्रोत: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-vanish-data-with-the-data-*-attributes

Comments

यह एक अच्छा दृष्टिकोण है .. लेकिन मुझे संदेह है कि यह आपके काम आएगा IE 6 और अन्य पुराने ब्राउज़रों का समर्थन करना।

— cllpse

मुझे पूरा यकीन है कि यह पुराने ब्राउज़रों के साथ काम करता है; विशेषताएँ DOM में जोड़ी जाती हैं, जहाँ आप उन्हें एक्सेस कर सकते हैं।

— सुश्री 2

यह HTMLElement पर getAttribute () विधि का उपयोग करके सभी ब्राउज़रों के साथ पूरी तरह से अच्छी तरह से काम करता है। साथ ही, HTML5 डेटासेट समर्थन बढ़ने से आप आसानी से इसे जोड़ सकते हैं।

— ajm

@ स्पष्ट रूप से आप DOCTYPE में विशेषताएँ जोड़ सकते हैं: rodsdot.com/html/… - ऐसा नहीं है कि मुझे लगता है कि यह एक अच्छा विचार है, लेकिन यह मानकीकृत लगता है।

— माइकल स्टम

@Wahnfrieden: w3.org/TR/REC-html40/intro/sgmltut.html#idx-attribute-8 जो अनुमोदित, मानक अनुपालन विधि है। जिसे यहाँ अच्छी तरह से वर्णित और प्रदर्शित किया गया है: rodsdot.com/html/… जैसा कि पहले दूसरों द्वारा पोस्ट किया गया था।

— rdivilbiss

Answer 2

यहाँ एक तकनीक है जिसका मैं हाल ही में उपयोग कर रहा हूँ:

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

टिप्पणी-वस्तु मूल तत्व (यानी #someelement) से जुड़ी है।

यहाँ पार्सर है: http://pastie.org/511358

किसी विशेष तत्व के लिए डेटा प्राप्त करने के लिए केवल parseDataउस तत्व के संदर्भ में कॉल करें जिसे एकमात्र तर्क के रूप में पारित किया गया है:

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

---

यह उससे अधिक रसीला हो सकता है:

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

इस तक पहुंचें:

parseData( document.getElementById('foo') ).specialID; // <= 245

---

इस का उपयोग कर के केवल नुकसान यह है कि यह स्वतः बंद होने वाले तत्वों (जैसे के साथ नहीं किया जा सकता है <img/>,) के बाद से टिप्पणियां होना चाहिए भीतर तत्व यह है कि तत्व के डेटा के रूप में माना जाता है।

---

संपादित करें :

इस तकनीक के उल्लेखनीय लाभ:

• लागू करने में आसान
• HTML / XHTML को अमान्य नहीं करता है
• उपयोग करने में आसान / समझ (मूल JSON संकेतन)
• अधिकांश विकल्पों की तुलना में विनीत और शब्दार्थक स्वच्छ

---

यहां पार्सर कोड ( ऊपर http://pastie.org/511358 हाइपरलिंक से कॉपी किया गया है, अगर यह pastie.org पर उपलब्ध नहीं है तो):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();

Comments

जिज्ञासा से बाहर, आप स्व-समापन टैग के लिए किस विधि का उपयोग करते हैं? मुझे आम तौर पर इस तरह के कुछ का उपयोग करने की आवश्यकता है <इनपुट> तत्व (क्लाइंट-साइड सत्यापन नियमों में सहायता करने के लिए)। उस स्थिति में आप क्या विकल्प अपनाते हैं?

— टीएम।

मैं शायद एक समान तकनीक का उपयोग करूंगा, "पैरेंटनोड" पर टिप्पणी करने के लिए टिप्पणी डेटा के बजाय यह टिप्पणी के "पिछलेसब्लिंग" से जुड़ सकता है ... फिर आप <इनपुट /> के तुरंत बाद टिप्पणी कर सकते हैं और यह होगा काम: <इनपुट /> <! - {डेटा: 123} ->

— जेम्स

किसी को इसे एक jquery प्लगइन बनाना चाहिए

— SeanDowney

कुछ भी तोड़ने के बिना टिप्पणियाँ बदल / हटा दी जानी चाहिए। यह पूरी बात है। इसलिए मार्कअप या कोड को महत्वपूर्ण कुछ भी टिप्पणी में रखना एक बुरा विचार है। भविष्य के डेवलपर्स आसानी से सोच सकते हैं कि वे टिप्पणियां हैं और उन्हें हटा दें। हमारे पास पहले से ही इस प्रश्न का एक वास्तविक समाधान है: कस्टम विशेषताएँ "डेटा-" के साथ उपसर्ग करती हैं। इस दृष्टिकोण का उपयोग कभी नहीं किया जाना चाहिए।

— MGOwen

मुझे @MGOwen के कथन को सुदृढ़ करना चाहिए: कार्यक्षमता जोड़ने के लिए टिप्पणियों का उपयोग न करें। विशेष रूप से HTML में। क्या आप मिनीफायर का उपयोग नहीं कर रहे हैं? आप अपने कोड को तोड़े बिना टिप्पणियों को हटा नहीं पाएंगे। इसका मतलब यह भी है कि आप वास्तविक टिप्पणी नहीं जोड़ सकते।

— ओलिविक्टर

Answer 3

यदि आप अपने पृष्ठ के लिए एक स्कीमा निर्दिष्ट करते हैं, तो आप कोई भी विशेषता बना सकते हैं।

उदाहरण के लिए:

इसे जोड़ो

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

फेसबुक (यहां तक ​​कि टैग)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>

Answer 4

कस्टम विशेषताओं के उपयोग से बचने का सबसे आसान तरीका मौजूदा विशेषताओं का उपयोग करना है।

सार्थक, प्रासंगिक वर्ग नामों का उपयोग करें।
उदाहरण के लिए, कुछ ऐसा करें: type='book'और type='cd', पुस्तकों और सीडी का प्रतिनिधित्व करने के लिए। कुछ आईएस का प्रतिनिधित्व करने के लिए कक्षाएं बहुत बेहतर हैं ।

जैसे class='book'

मैंने पूर्व में कस्टम विशेषताओं का उपयोग किया है, लेकिन ईमानदारी से, यदि आप एक अर्थपूर्ण तरीके से मौजूदा विशेषताओं का उपयोग करते हैं तो वास्तव में उनके लिए कोई आवश्यकता नहीं है।

अधिक ठोस उदाहरण देने के लिए, मान लें कि आपके पास विभिन्न प्रकार के स्टोरों के लिंक देने वाली साइट है। आप निम्नलिखित का उपयोग कर सकते हैं:

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

सीएसएस स्टाइल वर्गों का उपयोग कर सकता है जैसे:

.store { }
.cd.store { }
.book.store { }

उपरोक्त उदाहरण में हम देखते हैं कि दोनों स्टोर के लिंक हैं (साइट पर अन्य असंबंधित लिंक के विपरीत) और एक सीडी स्टोर है, और दूसरा एक बुक स्टोर है।

Comments

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

— टीएम।

मेरा कहना था कि आपको इसके लिए टाइप टैग का उपयोग नहीं करना चाहिए। इसलिए यदि आप थे ... तो आपको चाहिए ... मैं इसे स्पष्ट करने के लिए संपादित करूंगा

— जोनाथन फिंगलैंड

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

— एप-इनोगो

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

— टीएम।

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

— knittl

Answer 5

डेटा को डोम में एम्बेड करें और jQuery के लिए मेटाडेटा का उपयोग करें ।

सभी अच्छे प्लग-इन मेटाडेटा प्लगइन (प्रति टैग विकल्पों की अनुमति) का समर्थन करते हैं।

यह असीम रूप से जटिल डेटा / डेटा संरचनाओं, साथ ही साथ कुंजी-मूल्य जोड़े की अनुमति देता है।

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

या

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

या

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

फिर डेटा को इस तरह प्राप्त करें:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');

Comments

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

— rdivilbiss

प्लगइन का उपयोग करने के तरीकों में से केवल एक वर्ग विशेषता को भ्रष्ट करना है ; यह एकमात्र तरीका नहीं है।

— antony.trupe

एक और कारण है कि आपको वोट दिया गया है एक प्लगइन का सुझाव दे रहा है जहां कोई प्लगइन की आवश्यकता नहीं है।

— मेन्ड्रे

Answer 6

मुझे किसी भी चीज को तोड़ने या अपने नाम स्थान को विस्तारित किए बिना मौजूदा XHTML सुविधाओं का उपयोग करने में कोई समस्या नहीं है। आइए एक छोटे से उदाहरण पर नज़र डालें:

<div id="some_content">
 <p>Hi!</p>
</div>

अतिरिक्त विशेषताओं के बिना some_content में अतिरिक्त जानकारी कैसे जोड़ें? निम्नलिखित की तरह एक और टैग जोड़ने के बारे में क्या?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

यह आपकी पसंद की अच्छी तरह से परिभाषित आईडी / विस्तार "_extended" के माध्यम से और पदानुक्रम में अपनी स्थिति के माध्यम से संबंध रखता है। मैं अक्सर jQuery के साथ और वास्तव में तकनीक जैसी Ajax का उपयोग किए बिना इस दृष्टिकोण का उपयोग करता हूं।

Comments

इस तरह नेस्टेड टैग जोड़ने के साथ समस्या यह है कि यह बहुत बोझिल और बदसूरत सर्वरसाइड कोड (JSP / ASP / DTL आदि)

— TM बनाने के लिए जाता है।

Answer 7

अस्वीकार। इसके बजाय कुछ इस तरह आज़माएँ:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>

Comments

तो आप डायनामिक पृष्ठों के लिए अपने दस्तावेज़ में बहुत सारे अतिरिक्त स्क्रिप्ट टैग लिखना पसंद करते हैं? जब ग्राहक की तरफ से जानकारी जोड़ी जा रही होती है तो मैं मैनुअल जावास्क्रिप्ट असाइनमेंट का उपयोग करता हूं, लेकिन यह समस्या मुख्य रूप से सर्वर पर रेंडर करने के बारे में है। इसके अलावा, jQuery.data () आपकी विधि से बहुत बेहतर है।

— टीएम।

ऊपर का उत्तर एक फ्रेमवर्क-स्वतंत्र है, जो कार्यक्षमता का प्रदर्शन करने के लिए बेलाबर्ड उदाहरण है। आप आसानी से इसके बारे में विस्तार कर सकते हैं कि यह कोड को काफी सुरीला बना सके। जैसे, <div id = "foo" /> <div id = "bar" /> <div id = "baz" /> <script type = "text / javascript"> xtrnlFnc ({foo: 'w00 h00', bar : 'आदि', बाज: 3.14159}); </ script> यदि आप jQuery का उपयोग कर रहे हैं (ऐसा नहीं है कि आपने अपने मूल प्रश्न में इसका उल्लेख किया है), हर तरह से, डेटा पद्धति का उपयोग करें - यही वह है जिसके लिए यह है। यदि नहीं, तो आर्किटेक्चरल लेयर्स के बीच डेटा पास करना इनलाइन स्क्रिप्ट टैग का पूरी तरह से मान्य उपयोग है।

— आयन

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

— टीएम।

मुझे नहीं लगता कि ब्राउज़र के इस दृष्टिकोण से कोई समस्या है। Microsoft इस सटीक तंत्र का उपयोग करता है क्योंकि यह ASP.NET पृष्ठों में पसंदीदा तंत्र है। (सर्वर की ओर से RegisterExpandoAttribute को कॉल करके)। सवाल क्लाइंट पर केंद्रित है और सर्वर पर नहीं है, लेकिन सर्वर की तरफ ये सभी एप्रोच हो सकते हैं (होना चाहिए?)।

— एड्रियन

इस दृष्टिकोण के पेशेवरों: - यह वैध मार्कअप (यहां तक ​​कि पुराने ब्राउज़रों / चश्मे के तहत) का उत्पादन करता है। - यह डेटा की मंशा (जेएस द्वारा उपभोग की जाने वाली) को स्पष्ट करता है। - यह अन्य विशेषताओं (जैसे टिप्पणी) के चतुर उपयोग किए बिना तत्व के लिए एकजुट है। - इसे विशेष पार्सिंग की आवश्यकता नहीं है। सर्वर-साइड के नजरिए से, आप इसे आरपीसी की तरह मान सकते हैं।

— स्टीमर 25

Answer 8

मैं कस्टम विशेषताओं का उपयोग नहीं कर रहा हूं, क्योंकि मैं एक्सएचटीएमएल आउटपुट कर रहा हूं, क्योंकि मैं चाहता हूं कि डेटा 3-पार्टी सॉफ्टवेयर द्वारा मशीन-पठनीय हो (हालांकि, अगर मैं चाहता था तो मैं एक्सएचटीएमएल स्कीमा का विस्तार कर सकता था)।

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

इसके अलावा, इस पर विचार करें:

• यदि अतिरिक्त डेटा को मानव-पठनीय होने के साथ-साथ मशीन-पठनीय होना है, तो इसे कस्टम विशेषताओं के बजाय HTML टैग और टेक्स्ट का उपयोग करके एन्कोड किया जाना चाहिए।

• यदि उसे मानव पठनीय होने की आवश्यकता नहीं है, तो शायद अदृश्य एचटीएमएल टैग और पाठ का उपयोग करके इसे एन्कोड किया जा सकता है ।

कुछ लोग एक अपवाद बनाते हैं: वे कस्टम विशेषताओं की अनुमति देते हैं, रन-टाइम पर क्लाइंट साइड पर जावास्क्रिप्ट द्वारा डोम में जोड़ा जाता है। वे मानते हैं कि यह ठीक है: क्योंकि कस्टम विशेषताएँ केवल रन-टाइम पर DOM में जोड़ी जाती हैं, HTML में कोई कस्टम विशेषताएँ नहीं होती हैं।

Answer 9

हमने एक वेब-आधारित संपादक बनाया है जो HTML के एक सबसेट को समझता है - एक बहुत सख्त उपसमूह (जो मेल क्लाइंट द्वारा लगभग सार्वभौमिक रूप से समझा गया है)। हमें <td width="@INSWIDTH_42@">डेटाबेस जैसी चीजों को व्यक्त करने की आवश्यकता है , लेकिन हमारे पास ऐसा डोम में नहीं हो सकता है, अन्यथा वह ब्राउज़र जहां संपादक चलता है, बाहर निकलता है (या कस्टम विशेषताओं की तुलना में अधिक खराब होने की संभावना है) । हम ड्रैग-एंड-ड्रॉप चाहते थे, इसलिए इसे विशुद्ध रूप से डोम में डाल दिया गया था, जैसा कि jquery का था .data()(अतिरिक्त डेटा को ठीक से कॉपी नहीं किया गया था)। हमें संभवतः सवारी में आने के लिए अतिरिक्त डेटा की भी आवश्यकता थी .html()। अंत में हम <td width="1234" rs-width="@INSWIDTH_42@">संपादन प्रक्रिया के दौरान उपयोग करने पर बस गए , और फिर जब हम यह सब पोस्ट करते हैं, तो हम हटाते हैं widthऔर regex खोज-और-नष्ट करते हैं s/rs-width=/width=/g।

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

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

Answer 10

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

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

फिर आप इस कोड को jquery.data () की तरह एक ऑब्जेक्ट वापस पाने के लिए चला सकते हैं।

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});

Answer 11

युक्ति: जावास्क्रिप्ट का उपयोग करते हुए गुणों के अनुसार एक ASP.NET TextBox नियंत्रण बनाएं जो गतिशील रूप से अपने पाठ को एक नंबर के रूप में स्वरूपित करता है, "DecimalSeparator" और "ThousandsSeparator"।


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

<input type="text" id="" decimalseparator="." thousandsseparator="," />

कस्टम गुण जावास्क्रिप्ट द्वारा आसानी से सुलभ हैं। और कस्टम गुणों वाले तत्वों का उपयोग करते हुए एक पृष्ठ को मान्य नहीं किया जाएगा , जबकि उस पृष्ठ का प्रतिपादन प्रभावित नहीं होगा।


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

Answer 12

जटिल वेब ऐप्स के लिए, मैं सभी जगहों पर कस्टम विशेषताओं को छोड़ देता हूं।

अधिक सार्वजनिक सामना करने वाले पृष्ठों के लिए मैं "rel" विशेषता का उपयोग करता हूं और अपने सभी डेटा को JSON में डंप करता हूं और फिर इसे MooTools या jQuery के साथ डिकोड करता हूं:

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

मैं एचटीएमएल 5 डेटा विशेषता के साथ हाल ही में "तैयार" करने के लिए छड़ी करने की कोशिश कर रहा हूं, लेकिन यह स्वाभाविक रूप से अभी तक नहीं आया है।

Answer 13

मैं उदाहरण के लिए हर समय कस्टम फ़ील्ड का उपयोग करता हूं <ai = "" .... फिर jquery के साथ i का संदर्भ देता हूं। अमान्य html, हाँ। यह अच्छा काम करता है, हाँ।

Comments

यहां कुछ ऐसा दिखता है जैसे इसकी याद आ रही हो। क्या आपका टैग पूरा हुआ, यहाँ?

— स्टुअर्ट सीगलर

कोई इसे कैसे समझ सकता है? कृपया अपना उत्तर पूरा करें।

— राहुल राज

Answer 14

कस्टम विशेषताएँ, मेरी विनम्र राय में, का उपयोग नहीं किया जाना चाहिए क्योंकि वे मान्य नहीं करते हैं। इसके लिए, आप एक ही तत्व के लिए कई वर्गों को परिभाषित कर सकते हैं जैसे:

<div class='class1 class2 class3'>
    Lorem ipsum
</div>

Comments

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

— जोनाथन फिंगलैंड

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

— टीएम।

@ जोनाथन फिंगलैंड: यदि कम्पास का उपयोग किया जाता है, तो आपको यहां वर्ग नाम निर्धारित करने की आवश्यकता नहीं है। आप उन्हें केवल .ass फ़ाइल में निर्दिष्ट कर सकते हैं और आपका मार्कअप साफ हो जाएगा।

— एलन हाग्गै अलवी

@ जोनाथन फिंगलैंड, classविशेषता निश्चित रूप से केवल "दिखता है" के लिए आरक्षित नहीं है। एक अन्य उपयोग "उपयोगकर्ता एजेंटों द्वारा सामान्य प्रयोजन प्रसंस्करण" है। इसमें से युक्ति बोलती है: w3.org/TR/REC-html40/struct/global.html#h-7.5.2

— npup

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

— जोनाथन फिंगलैंड