Uso corretto degli attributi dei dati HTML

5

Sto scrivendo diversi plugin JavaScript che vengono eseguiti automaticamente quando viene rilevato il codice HTML corretto sulla pagina. Ad esempio, quando viene rilevata una classe tabs , il plug-in di schede viene caricato in modo dinamico e applica automaticamente la funzionalità della scheda. Qualsiasi opzione di personalizzazione per il plug-in JavaScript viene impostata tramite attributi di dati HTML5, molto simile a ciò che fa il framework Bootstrap di Twitter.

Il fascino del sistema di cui sopra è che, una volta che hai funzionato, non ti devi preoccupare di istanziare manualmente i plugin, basta scrivere il tuo markup HTML. Ciò è particolarmente utile se le persone che non conoscono bene JavaScript (o del tutto) desiderano utilizzare i propri plugin, che è uno dei miei obiettivi.

Questa configurazione ha funzionato molto bene, ma per alcuni plugin, sto trovando che ho bisogno di un set di opzioni più robusto. Le mie scelte sembrano avere un elemento con molti attributi di dati o consentire un singolo attributo data-options con un oggetto opzioni JSON come valore. Avere un sacco di attributi sembra goffo e ripetitivo, ma il percorso JSON lo rende leggermente più complicato per i principianti e mi piacerebbe evitare il JavaScript completo negli attributi se possibile. Non sono del tutto sicuro di quale sia il modo migliore.

  1. C'è una terza opzione che non sto considerando?
  2. Ci sono delle best practice consigliate per questo particolare caso d'uso?
posta VirtuosiMedia 23.09.2012 - 02:18
fonte

2 risposte

8

Ho lavorato con un modello simile negli ultimi mesi. La mia opinione personale è che è giusto mescolare queste due convenzioni a seconda delle esigenze del plugin. Se si dispone di un numero ridotto (ad es. < 5) di parametri ben definiti o se si desidera selezionare elementi basati su un particolare attributo, allora gli attributi dei dati per ciascun parametro sono ok. Se si dispone di un numero elevato di parametri o se i parametri sono altamente dinamici (ad esempio, i parametri di richiesta per una chiamata ajax), JSON all'interno di un attributo di dati può essere più vantaggioso.

In ogni caso, IMO è molto importante documentare chiaramente quali sono i parametri e come dovrebbero essere utilizzati.

    
risposta data 23.09.2012 - 02:40
fonte
0

Come hai sottolineato, entrambi i tuoi approcci hanno buoni punti e svantaggi. Attualmente sto lavorando con il dopo, che personalmente trovo più facile da usare. Tuttavia, il primo approccio sembra essere più facile da leggere per gli altri, quindi .. Invece di cercare un'altra soluzione migliore, potresti semplicemente utilizzare entrambe le tue idee. Cosa ne pensi di questo?

<div data-foo="bar" data-bar="foo" data-other="example">

Equals

<div data-options="{foo: 'bar', bar: 'foo', other: 'example'}">
    
risposta data 24.09.2012 - 10:55
fonte

Leggi altre domande sui tag