I dati attribuiscono buoni identificatori di determinati blocchi di codice HTML?

Question

I dati attribuiscono buoni identificatori di determinati blocchi di codice HTML?

#1 da (3 voti)

1

Ho un ambiente complesso che è principalmente orientato attorno / finisce per sputare blocchi di HTML, che costituiscono l'intera pagina.

Ora, ho bisogno di un modo per "puntare e cliccare" per identificare qualsiasi blocco sulla mia pagina dal front-end. Al comando dell'utente, dovrebbero essere in grado di, quando viene cliccato un elemento, estrarre un identificativo univoco per esso e in base a quello, mostrare più informazioni.

Un blocco potrebbe essere semplice come:

<h1 class="beautiful-title">Test Title</h1>

E poi, un altro:

<p class="beautiful-paragraph">Test paragraph, has some nice CSS to it. </p>

E supponiamo, per ogni blocco che voglio essere identificato, aggiungo l'attributo data-identifier , in quanto tale, il mio primo blocco ora è:

<h1 class="beautiful-title" data-identifier="block-432">Test Title</h1>

E al momento del clic, il browser visualizzerà block-432 per me, che verrà quindi utilizzato per richiedere un'API REST con informazioni per questo blocco, ad esempio

mylink.com/rest/block_data&block_id=block-432

Che restituirebbe una risposta JSON con dati (titoli, informazioni, video, ecc.) su detto blocco nella risposta success della mia chiamata.

Le mie più grandi preoccupazioni:

Ci saranno momenti in cui ho circa 20-30 blocchi su una pagina. esso è fondamentale e necessario che quando l'utente fa clic su un pulsante speciale, tutti i blocchi "cliccabili con informazioni" sono mostrati con a bordo verde, come in "è possibile fare clic qui per ottenere maggiori informazioni". Cosa è, se dovessi cercare l'intero DOM per tutto il data-identifier attributo, sarà al 100% lento.
Non ci sarà il pre-caricamento, quindi non ci saranno dati tirati per ogni blocco presente sulla pagina, questo deve accadere in una chiamata REST / AJAX, ma dovrei prendere in considerazione il precaricamento ?

Quindi, di nuovo, gli attributi dei dati sono la via da seguire?

rest web-applications data

posta coolpasta 21.07.2018 - 23:16

fonte

1 risposta

Leggi altre domande sui tag rest web-applications data

Identità utente e microservizi Topologia di rete per sistemi ATM e POS

score 3 · Accepted Answer

Stai associando dati extra (qui, un ID risorsa esterna) con un elemento DOM. L'utilizzo degli attributi dei dati è un approccio perfetto per farlo. Questo è probabilmente l'approccio migliore, sebbene ci siano alternative:

utilizza i tag <meta> all'interno dell'elemento.
utilizza tag <script> (possibilmente con un tipo personalizzato) per archiviare dati strutturati aggiuntivi.

Entrambe queste alternative sono solitamente più complesse.

Una terza alternativa è aggiungere direttamente un gestore onclick o un URL javascript all'elemento che già conosce l'ID corretto:

<div onclick="loadResource('foo-123')"> ... </div>

Questo non è automaticamente negativo, ma è meno flessibile: l'ID risorsa può ora essere utilizzato solo per caricare la risorsa, non per altri usi.

Come hai correttamente determinato, l'attributo ID non è appropriato qui. L'ID identifica un frammento DOM. Può ad es. essere usato per collegare a quell'elemento Un ID non deve essere riutilizzato all'interno di un albero DOM. Per tutti questi motivi, l'elemento ID standard non è adatto o fuorviante per rappresentare gli ID delle risorse esterne.

Quindi, per riassumere, un attributo data-identifier è probabilmente la soluzione migliore.

Ora rispondi alle tue preoccupazioni:

Come puoi stile questi elementi? Ovviamente puoi aggiungere un selettore CSS [data-identifier] . Hai paura che questo potrebbe essere lento, ma è davvero improbabile che ciò sia importante.

In alternativa, smetti di usare gli attributi dei dati per lo stile e aggiungi un'altra classe, in modo che il tuo selettore sia semplicemente .clickable o qualcosa del genere. Puoi utilizzare questo selettore sia per lo stile sia per trovare gli elementi pertinenti al caricamento della pagina per installare i gestori di eventi.
Dovresti utilizzare il pre-caricamento? Questo dipende dal tipo e dalla dimensione dei dati. Se i dati devono essere super aggiornati o se i dati sono molto grandi, potrebbe essere meglio rimandare il caricamento finché l'utente non lo richiede. Altrimenti, mostrare i dati già presenti è molto più veloce dell'attesa dell'arrivo dei dati. Se la tua app Web è destinata ai dispositivi mobili o ai consumatori, valuta la possibilità di utilizzare gli strumenti di sviluppo del tuo browser per simulare una connessione di rete scarsa.