Attributi personalizzati - Sì o no?

Di recente ho letto sempre di più su persone che usano attributi personalizzati nei loro tag HTML, principalmente allo scopo di incorporare alcuni bit extra di dati da utilizzare nel codice javascript.

Speravo di raccogliere un feedback sull'utilizzo o meno di attributi personalizzati è una buona pratica, e anche quali sono alcune alternative.

Sembra che possa davvero semplificare sia il lato server sia il codice lato client, ma non è conforme al W3C.

Dovremmo utilizzare attributi HTML personalizzati nelle nostre app Web? Perché o perché no?

Per coloro che pensano che gli attributi personalizzati siano una buona cosa: quali sono alcune cose da tenere a mente quando le si utilizza?

Per coloro che pensano che gli attributi personalizzati siano una cosa negativa: quali alternative usi per realizzare qualcosa di simile?

Aggiornamento: sono principalmente interessato al ragionamento alla base dei vari metodi, nonché ai punti sul perché un metodo è migliore di un altro. Penso che tutti possiamo trovare 4-5 modi diversi per ottenere la stessa cosa. (elementi nascosti, script incorporati, classi extra, analisi delle informazioni dagli ID, ecc.).

Aggiornamento 2: sembra che la data-caratteristica dell'attributo HTML 5 abbia molto supporto qui (e tendo a concordare, sembra un'opzione solida). Finora non ho visto molto in termini di confutazioni per questo suggerimento. Ci sono problemi / insidie ​​di cui preoccuparsi nell'utilizzare questo approccio? O è semplicemente una invalidazione "innocua" delle attuali specifiche del W3C?

HTML 5 consente esplicitamente attributi personalizzati che iniziano con data. Quindi, per esempio, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p>è valido. Dal momento che è ufficialmente supportato da uno standard, penso che questa sia l'opzione migliore per gli attributi personalizzati. E non richiede di sovraccaricare altri attributi con gli hack, quindi il tuo HTML può rimanere semantico.

Fonte: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Ecco una tecnica che ho usato di recente:

<div id="someelement">

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

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

L'oggetto commento si lega all'elemento genitore (es. #Someelement).

Ecco il parser: http://pastie.org/511358

Per ottenere i dati per qualsiasi elemento particolare, è sufficiente chiamare parseDatacon un riferimento a quell'elemento passato come unico argomento:

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

var data = parseData( myElem );

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

Può essere più succinto di così:

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

Accedi ad esso:

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

L'unico svantaggio di utilizzare questo è che non può essere utilizzato con elementi a chiusura automatica (ad es. <img/>), Poiché i commenti devono essere all'interno dell'elemento per essere considerati come i dati di tale elemento.

MODIFICA :

Notevoli benefici di questa tecnica:

• Facile da implementare
• Fa non invalidate HTML / XHTML
• Facile da usare / comprendere (notazione JSON di base)
• Discreto e semanticamente più pulito della maggior parte delle alternative

Ecco il codice parser (copiato dal http://pastie.org/511358 collegamento ipertestuale sopra, nel caso in cui non fosse mai disponibile su 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;

    };

})();

Puoi creare qualsiasi attributo se specifichi uno schema per la tua pagina.

Per esempio:

Aggiungi questo

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

Facebook (anche i tag)

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

Il modo più semplice per evitare l'uso di attributi personalizzati è utilizzare gli attributi esistenti.

utilizzare nomi di classe significativi e pertinenti.
Ad esempio, fai qualcosa del tipo: type='book'e type='cd', per rappresentare libri e cd. Le lezioni sono molto migliori per rappresentare ciò che è qualcosa .

per esempio class='book'

Ho usato attributi personalizzati in passato, ma onestamente, non è davvero necessario per loro se si utilizzano gli attributi esistenti in modo semanticamente significativo.

Per fare un esempio più concreto, supponiamo che tu abbia un sito che fornisce collegamenti a diversi tipi di negozi. È possibile utilizzare quanto segue:

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

lo stile CSS può usare classi come:

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

Nell'esempio sopra vediamo che entrambi sono collegamenti a negozi (al contrario degli altri collegamenti non correlati sul sito) e uno è un negozio di cd, e l'altro è un negozio di libri.

Incorporare i dati nel dom e utilizzare i metadati per jQuery .

Tutti i buoni plug-in supportano il plug-in dei metadati (consentendo le opzioni per tag).

Consente inoltre strutture dati / dati infinitamente complesse, nonché coppie chiave-valore.

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

O

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

O

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

Quindi ottenere i dati in questo modo:

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

Non vedo alcun problema nell'uso delle funzionalità XHTML esistenti senza interrompere nulla o estendere lo spazio dei nomi. Diamo un'occhiata a un piccolo esempio:

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

Come aggiungere ulteriori informazioni a some_content senza attributi aggiuntivi? Che ne dici di aggiungere un altro tag come il seguente?

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

Mantiene la relazione tramite un id / estensione ben definito "_extended" di tua scelta e dalla sua posizione nella gerarchia. Uso spesso questo approccio insieme a jQuery e senza usare effettivamente tecniche simili ad Ajax.

Anzi. Prova invece qualcosa del genere:

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

Non sto usando gli attributi personalizzati, perché sto eseguendo l'output di XHTML, perché voglio che i dati siano leggibili meccanicamente da software di terze parti (anche se, se lo volessi, potrei estendere lo schema XHTML).

In alternativa agli attributi personalizzati, principalmente trovo sufficienti gli attributi id e class (ad es. Come menzionato in altre risposte).

Inoltre, considera questo:

• Se i dati aggiuntivi devono essere leggibili dall'uomo e leggibili automaticamente, devono essere codificati utilizzando tag e testo HTML (visibili) anziché come attributi personalizzati.

• Se non è necessario che sia leggibile dall'uomo, forse può essere codificato utilizzando tag e testo HTML invisibili .

Alcune persone fanno un'eccezione: consentono attributi personalizzati, aggiunti al DOM da Javascript sul lato client in fase di esecuzione. Ritengono che sia OK: poiché gli attributi personalizzati vengono aggiunti al DOM solo in fase di esecuzione, l'HTML non contiene attributi personalizzati.

Abbiamo creato un editor basato sul Web che comprende un sottoinsieme di HTML, un sottoinsieme molto rigoroso (compreso quasi universalmente dai client di posta). Dobbiamo esprimere cose come <td width="@INSWIDTH_42@">nel database, ma non possiamo averlo nel DOM, altrimenti il ​​browser in cui viene eseguito l'editor, impazzisce (o è più probabile che impazzisca di quanto sia probabile che impazzisca per gli attributi personalizzati) . Volevamo il trascinamento della selezione, quindi inserirlo esclusivamente nel DOM era fuori, così come quello di jquery .data()(i dati extra non venivano copiati correttamente). Probabilmente avevamo anche bisogno dei dati extra per il passaggio .html(). Alla fine abbiamo deciso di utilizzare <td width="1234" rs-width="@INSWIDTH_42@">durante il processo di modifica, e quindi quando POST tutto, rimuoviamo widthe facciamo una ricerca e distruzione di regex s/rs-width=/width=/g.

All'inizio il ragazzo che scriveva la maggior parte di questo era il nazista della convalida su questo problema e provava di tutto per evitare il nostro attributo personalizzato, ma alla fine acconsentì quando nient'altro sembrava funzionare per TUTTI i nostri requisiti. Aiutò quando si rese conto che l'attributo personalizzato non sarebbe mai apparso in una e-mail. Abbiamo preso in considerazione la possibilità di codificare i nostri dati extra class, ma abbiamo deciso che sarebbe stato il maggiore dei due mali.

Personalmente, preferisco avere le cose pulite e passare validatori, ecc., Ma come dipendente dell'azienda devo ricordare che la mia responsabilità principale è far avanzare la causa dell'azienda (fare più soldi il più rapidamente possibile), non quella del mio desiderio egoistico di purezza tecnica. Gli strumenti dovrebbero funzionare per noi; non noi per loro.

So che le persone sono contrarie, ma ho trovato una soluzione super breve per questo. Se si desidera utilizzare un attributo personalizzato come "mio", ad esempio:

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

Quindi è possibile eseguire questo codice per recuperare un oggetto proprio come fa 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;
});

Spec: Crea un controllo TextBox ASP.NET che formatta dinamicamente il testo come numero, in base alle proprietà "DecimalSeparator" e "ThousandsSeparator", utilizzando JavaScript.


Un modo per trasferire queste proprietà dal controllo a JavaScript è fare in modo che il controllo esegua il rendering delle proprietà personalizzate:

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

Le proprietà personalizzate sono facilmente accessibili tramite JavaScript. E mentre una pagina che utilizza elementi con proprietà personalizzate non verrà convalidata , il rendering di quella pagina non sarà influenzato.


Ho solo utilizzare questo approccio quando voglio associare tipi semplici come stringhe e numeri interi in elementi HTML da utilizzare con JavaScript. Se voglio semplificare l'identificazione degli elementi HTML, farò uso delle proprietà class e id .

Per le app Web complesse, trascino attributi personalizzati ovunque.

Per altre pagine pubbliche, utilizzo l'attributo "rel" e trasferisco tutti i miei dati lì in JSON e poi li decodifico con MooTools o jQuery:

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

Sto provando a rimanere con l'attributo di dati HTML 5 ultimamente solo per "preparare", ma non è stato ancora naturale.

Uso sempre campi personalizzati, ad esempio <ai = "" .... Quindi riferimento a i con jquery. HTML non valido, sì. Funziona bene, sì.

A mio modesto parere, gli attributi personalizzati non dovrebbero essere usati in quanto non convalidati. In alternativa a ciò, puoi definire molte classi per un singolo elemento come:

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