javascript - कस्टम विशेषताएं-हाँ या नहीं?




html xhtml (10)

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

मैं कस्टम फीचर्स का उपयोग करना चाहे या नहीं, इस पर कुछ फीडबैक इकट्ठा करने की उम्मीद कर रहा था, और कुछ विकल्प क्या हैं।

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

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

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

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

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

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


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


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

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

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


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


अस्वीकार। इसके बजाए इस तरह कुछ कोशिश करें:

<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>

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

सार्थक, प्रासंगिक वर्ग के नाम का प्रयोग करें।
उदाहरण के लिए, कुछ ऐसा करें: 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 { }

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


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

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

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

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


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

<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 के साथ इस दृष्टिकोण का उपयोग करता हूं और वास्तव में तकनीकों की तरह अजाक्स का उपयोग किए बिना।


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

<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;
});

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


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

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

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

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

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

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


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

<div id="someelement">

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

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

टिप्पणी-वस्तु मूल तत्व (यानी # सोमेलेमेंट) से संबंध रखती है।

यहां पार्सर है: 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;

    };

})();

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

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

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





custom-attribute