Cero Downtime

Generalmente cuando escribimos javascript para una página web nos encontraremos con la necesidad de obtener metadatos que vienen en el código HTML, incrustados en el tag de algún elemento. Si alguno de estos es incluido a través de un atributo nombrado con el formato data-* (data attribute) y solo contamos con la ayuda de JQuery, seguramente recurriríamos a su método .data(), por ejemplo:

< input id=”name” data-key=”007″ />
< script>
console.log( $(‘#name’).data(‘key’) ); // 007
< /script>

Pero ojo, este método posee un comportamiento que no resulta siempre consistente. El problema se da si asumimos que $(‘#name’).data(‘key’) siempre devolverá el mismo valor que se encuentra asignado al atributo data-key del elemento. En realidad este caso es la excepción a la regla, pues .data() trabaja con un mapa independiente (elemento:valor) y solamente tomará en cuenta el valor asignado al atributo data-key si en su mapa no contiene ya un valor asociado al elemento, posteriormente .data() se guiará con su propio mapa e ignorara cualquier cambio sobre el valor asignado al atributo.

Esto no resulta obvio hasta el momento que necesitamos modificar el valor asociado al elemento y por un malentendido lo hacemos a través del otro método de jQuery .attr() o del objeto nativo Element.dataset; los cuales sí operan directamente sobre el contenido del atributo data-key.