在前端开发中，常常需要根据用户操作以及其他一些条件来动态改变元素的样式。而传统的处理方式往往需要手动遍历 DOM 元素和设置样式，十分繁琐和低效。现在，随着 ES10 的引入，我们可以使用更加便捷高效的方式来处理样式的动态变化。
响应 style 改变的微反应力样式函数
微反应力（micro-reactions）是一种设计模式，它强调将用户体验分解成许多小动作，并为每个动作提供相应的反馈。在这种模式下，当某个操作引起页面上某个元素的样式改变时，我们需要快速、顺畅地进行响应。为此，可以使用响应 style 改变的微反应力样式函数。
这种函数能够监听某个样式的改变，并且在该样式的值发生变化时，自动执行特定的回调函数。这样，我们便可以在回调函数中处理一些额外的逻辑，比如更新页面内容、设置其他样式等。
下面是一个简单的实现示例：
// www.javascriptcn.com code example
function watchStyleChanges(element, styleName, callback) {
let lastValue = element.style[styleName];
setInterval(() => {
const newValue = element.style[styleName];
if (lastValue !== newValue) {
lastValue = newValue;
callback(newValue);
}
}, 100);
}
const element = document.getElementById('my-element');
watchStyleChanges(element, 'color', (newValue) => {
console.log(`The color of "my-element" is now ${newValue}`);
});在上述示例中，我们定义了一个函数 watchStyleChanges，它接受三个参数：目标元素、要监听的样式名称和回调函数。函数的实现采用了一个定时器，在每次循环中检查样式的值是否发生变化，如果变化了，就执行回调函数。
在回调函数中，我们可以处理一些额外的逻辑。例如，我们可以根据样式的值来显示不同的内容，或者设置其他的样式属性。
ES10 中使用 Object.fromEntries 和 Map 储存样式
在 ES10 中，我们可以使用 Object.fromEntries 和 Map 来轻松储存和检索样式属性。这两个新特性的使用可以简化代码，并且提高可读性和可维护性。
Object.fromEntries() 可以将一个二维数组转换为一个对象。而对于样式属性，我们可以使用它来将样式名和样式值构成一个键值对，并将它们存储在一个对象中。
下面是一个使用 Object.fromEntries 的示例：
const styles = [
['color', 'red'],
['font-size', '24px'],
['text-align', 'center'],
];
const styleObj = Object.fromEntries(styles);
console.log(styleObj); // { color: "red", font-size: "24px", text-align: "center" }除此之外，我们还可以使用 Map 数据结构来储存样式属性。在如下示例中，我们首先使用 Map 实例储存样式属性，然后通过 Object.fromEntries 将其转换为一个对象。
const styles = new Map([
['color', 'blue'],
['font-size', '16px'],
['text-align', 'left'],
]);
const styleObj = Object.fromEntries(styles);
console.log(styleObj); // { color: "blue", font-size: "16px", text-align: "left" }使用 Object.fromEntries 和 Map 可以将样式属性的存储和检索变得更加高效、方便和直观。
示例代码
最后，我们可以通过组合使用上述技术，在一个完整的示例中展示如何使用 ES10 和响应 style 改变的微反应力样式函数来处理样式的动态变化。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>ES10 Style Changes Demo</title>
<style>
#my-element {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<div id="my-element">Hello World!</div>
<script>
// Define a watchStyleChanges function to respond to changes
function watchStyleChanges(element, styleName, callback) {
let lastValue = element.style[styleName];
setInterval(() => {
const newValue = element.style[styleName];
if (lastValue !== newValue) {
lastValue = newValue;
callback(newValue);
}
}, 100);
}
// Use Object.fromEntries and Map to store and retrieve styles more efficiently
const styles = new Map([
['fontSize', '36px'],
['color', 'green'],
]);
const styleObj = Object.fromEntries(styles);
const element = document.getElementById('my-element');
Object.assign(element.style, styleObj);
// Watch the font size for changes and show a message
watchStyleChanges(element, 'fontSize', (newValue) => {
console.log(`The font size of "my-element" is now ${newValue}`);
});
// Add a click listener to switch the color of the text
element.addEventListener('click', () => {
const oldColor = element.style.color;
const newColor = oldColor === 'red' ? 'blue' : 'red';
element.style.color = newColor;
});
</script>
</body>
</html>在上述示例中，我们首先定义了一个 watchStyleChanges 函数，它用于监听样式的改变。然后，我们使用 Object.fromEntries 和 Map 来初始化一个样式对象，并将其应用到目标元素上。接着，我们使用该函数来监听样式 fontSize 的改变，并在样式变化时打印一个信息。最后，我们为目标元素添加了一个点击事件监听器，该监听器可以根据当前的颜色值来切换文本的颜色。
通过这个示例，我们可以更好地理解如何使用 ES10 和响应 style 改变的微反应力样式函数来处理样式的动态变化。同时，我们也可以更好地掌握 Object.fromEntries 和 Map 的用法，并且学会如何将它们与响应式样式处理函数结合使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d5fd58a941bf7134b92023