Quiero generar un nombre de clase de elemento DOM basado en los estilos definidos estáticamente que tiene (en mi marco). Básicamente, digamos que hay 10.000 elementos virtuales. Cada elemento virtual tiene 10 atributos de estilo CSS "estáticos", así como 5-10 atributos de estilo "dinámico". Por "estático" quiero decir que está codificado en un valor fijo que no cambia, y por dinámico quiero decir que el valor podría cambiar al estar vinculado al valor de alguna variable, por ejemplo.

Ahora, en términos de optimización/teoría, los atributos de estilo CSS estático no necesitan escribirse en el objeto de style de un elemento nativo (no virtual), sino que pueden agruparse y colocarse en una clase CSS. De esta manera podemos darle al elemento una clase y los estilos se aplican automáticamente. Pero los atributos de estilo CSS dinámico deben configurarse directamente en el elemento como el.style[name] = value .

Entonces, todo lo que tenemos que hacer para que esto suceda es tomar todos los atributos CSS definidos estáticamente y generar un nombre de clase único para ellos. Una forma ingenua de hacerlo es simplemente hacer esto:

 let hashId = 1 const stylesCache = {} console.log(generateHash({ color: 'red' })) console.log(generateHash({ color: 'red' })) console.log(generateHash({ color: 'blue', fontFamily: 'Arial' })) console.log(generateHash({ color: 'blue' })) function generateHash(staticStyleAttributes) { const array = [] Object.keys(staticStyleAttributes).sort().forEach(name => { const value = staticStyleAttributes[name] array.push(`${name}=${value}`) }) const string = array.join(';') const id = stylesCache[string] = stylesCache[string] || hashId++ return `myClassName-${id}` }

Pero no estoy seguro de que este sea el mejor uso del objeto como tabla hash, porque las cadenas de los atributos de estilo pueden ser bastante largas (más de 500 caracteres). ¿Hay alguna manera mejor de lograr esto? ¿Algo más elegante quizás? ¿O complicado pero eficiente?

¿Es posible tomar la string de estilo generada y ejecutar una función hash de algún tipo que sea eficiente y simple? Entonces, ¿da valores únicos según la entrada y también es rápido? No necesita ser seguro.

Al usar una función hash, también, no necesitaríamos almacenar potencialmente cientos de cadenas de claves largas en una tabla hash, solo se calcularía sobre la marcha. Así que también escatimamos un poco en la memoria.