En el enlace de datos de JavaScript, ¿por qué usar el atributo de datos en lugar de no solo extender los objetos DOM?

Muchas respuestas pueden aplicarse a muchos contextos también. No los golpearé a todos, pero aquí hay un par de razones.

1. No hagas esto. Los datos en los que se basa su aplicación nunca deben provenir del DOM (ya sea como objetos JS directamente o no). Es solo para representación visual. Mantenga sus datos en una tienda Javascript. Cualquier cosa con la que te sientas más cómodo. Redux, Backbone, infierno incluso GraphQL (que oscila por cierto).
2. Legibilidad. No subestimes el valor que aporta tu código cuando es algo que otro desarrollador puede retomar justo donde lo dejaste. Su pregunta describe un escenario MUY improbable y la depuración de algo así en la producción sería una locura.
3. Lógica. Aparte del hecho de que nadie hace esto (por lo tanto, su pregunta), requeriría más esfuerzo del que vale. Parece que quiere el máximo rendimiento porque estudió todas las comparaciones en http://jsperf.com y todo de Paul (Irish / Lewis). Incluso si este proyecto es por diversión y solo quieres aprender, no te beneficiará lo suficiente en rendimiento ni conocimiento / experiencia lo suficiente como para justificar el tiempo dedicado a la codificación y todo el tiempo dedicado a depurar o hacer cualquier otra cosa a partir de entonces.
4. Esto debería ser el # 1: si esto produciría suficiente rendimiento para justificar los tres anteriores, hay / son problemas importantes en el resto de su proyecto que deben abordarse.

En el enlace de datos de JavaScript, ¿por qué usar el atributo de datos en lugar de no solo extender los objetos DOM?

Bueno, primero no puedes extender fácilmente los objetos DOM. El DOM los controla por una razón. Sin embargo, puede hacer algunas cosas realmente geniales dentro de una biblioteca, como usar un mapa débil. Si siempre tendrá una referencia al objeto dom cuando necesite sus valores, puede almacenarlos en un mapa débil con el objeto dom como clave. Entonces siempre puede recuperarlo del mapa, pero si el objeto se limpia, el mapa se limpia automáticamente.

El atributo de datos existe para el intercambio HTML / JS. En su HTML (que a menudo forma parte de una plantilla calculada del lado del servidor) puede incluir atributos data- * que se adjuntan al atributo de datos dom para que pueda leerlo fácilmente. Es una excelente manera de controlar las bibliotecas javascript que realizan mejoras progresivas sin tener que escribir ningún javascript usted mismo. En resumen, para muchas aplicaciones de línea de negocio, es exactamente la forma correcta de hacer las cosas.

Usted puede. D3 usó las propiedades de expansión la última vez que verifiqué, en .__ data__. Las propiedades de Expando estropearían la recolección de basura en IE hace mucho tiempo por razones que no recuerdo con precisión (creo que tenía que ver con referencias cíclicas entre DOM y JavaScript). Puede ser una forma conveniente de vincular un modelo a una vista, lo que imagino es por qué mbostock usó este enfoque. Hago esto con Web Components en mis Elementos personalizados (implementaciones nativas de v1) y parece útil. Creo que dataset / data- * atribuye todo el mapa a cadenas, por lo que sería de un valor más limitado y más trabajo para usar.

Promover:
Me estoy dando cuenta de que las personas no lo hacen hoy en día porque les han dicho que no lo hagan y creen que es un antipatrón. Si no puede trabajar con su equipo porque están tan atrapados en una convención, entonces eso realmente no va a funcionar, por lo que sería una buena razón para usar los atributos del conjunto de datos para asignar lo que desee.

Los componentes web, especialmente v1, ilustran un enfoque moderno (2017 y más allá) para usar enfoques nativos con cualquier propiedad, getter / setter, etc. que le guste:
Elementos personalizados v1: componentes web reutilizables | Fundamentos de la web
El | Desarrolladores de Google

Dadas las fuertes opiniones sin fundamento proporcionadas en las otras respuestas, sugiero que solo lea el manual anterior y use ambos conjuntos de datos / data- * junto con cualquier otro enfoque que desee para tener una mejor idea de cómo funcionan.

Personalmente, encuentro que adjuntar modelos directamente a los nodos DOM es útil en los casos en que el controlador necesita hacerlo con respecto a sus propias preocupaciones aisladas. Alternativamente, puede construir un sistema de mapeo más complejo (como se hace en jQuery y Angular 1 con $ scope) y luego debe mantener esa abstracción separada. Todos estos son enfoques correctos, tienen sus problemas con la limpieza, realmente depende de usted qué nivel de complejidad requiere su proyecto. Encuentro que las interfaces de usuario web son muy adecuadas para los enfoques de OOP basados ​​en eventos que usan patrones MVC donde cada componente (modelo o vista) puede adoptar un patrón sub MVC propio. (Básicamente, conviértase en modelos o vistas inteligentes con preocupaciones específicas por separado). Este es el caso que encontré en mi propio trabajo en el que adjuntar modelos directamente a elementos DOM es muy útil y también lo he visto en D3.