探讨 CSS Typed OM (CSS Object Model) 如何提供类型安全的 JavaScript API 来操作 CSS 属性值，提升性能和可靠性。

咳咳，大家好！我是今天的客座讲师，一个和BUG斗智斗勇多年的老码农。今天咱们聊聊CSS Typed OM，一个能让JavaScript操作CSS属性值变得更安全、更高效的小宝贝。

开场：CSS操作的那些糟心事儿

话说咱们写前端，谁还没跟CSS打过交道？JavaScript操作CSS更是家常便饭。但是，传统的JavaScript操作CSS属性，那体验，简直让人抓狂。

const element = document.getElementById('myElement');

// 获取宽度
const width = element.style.width; // "100px" (字符串!)

// 设置宽度
element.style.width = '200px'; // 字符串!

// 计算宽度 (噩梦开始...)
const currentWidth = parseFloat(element.style.width); // 字符串转数字...
const newWidth = currentWidth + 50;
element.style.width = newWidth + 'px'; // 数字转字符串...

看到没？全是字符串！获取的是字符串，设置的是字符串，计算还得自己转换成数字。这来回转换，不仅麻烦，还容易出错。比如，一不小心忘了加单位，页面直接崩给你看。更别提浏览器为了解析这些字符串，背后默默做了多少工作，浪费了多少性能。

CSS Typed OM：救星驾到！

CSS Typed OM（CSS Object Model）就是来拯救咱们于水火之中的。它提供了一套类型安全的JavaScript API，专门用来操作CSS属性值。有了它，咱们就可以像操作数字、对象一样操作CSS属性，告别字符串的噩梦。

Typed OM的核心概念：CSSStyleValue

Typed OM的核心是 CSSStyleValue 接口，它是所有CSS属性值的基类。它有很多子类，分别代表不同类型的CSS属性值，比如：

• CSSUnitValue: 代表带单位的数值，比如 100px, 2em, 50%。
• CSSKeywordValue: 代表关键字，比如 auto, inherit, initial。
• CSSColorValue: 代表颜色值，比如 rgb(255, 0, 0), hsl(0, 100%, 50%)。
• CSSImageValue: 代表图像值，比如 url(image.png), linear-gradient(...)。
• CSSMathSum, CSSMathProduct, CSSMathNegate, CSSMathInvert: 用于表达数学表达式，例如 calc(100% - 20px)。

等等，还有很多！

Typed OM怎么用？（代码说话）

Typed OM并不是直接通过 element.style.width 访问的，而是通过 element.computedStyleMap() 和 element.attributeStyleMap 来操作。

• element.computedStyleMap(): 返回一个 StylePropertyMapReadOnly 对象，用于访问元素的计算样式（经过层叠、继承后的最终样式）。注意，这个是只读的！
• element.attributeStyleMap: 返回一个 StylePropertyMap 对象，用于访问元素的行内样式（style 属性中定义的样式）。这个是可读写的！

举个栗子：操作宽度

<div id="myElement" style="width: 100px;">Hello, world!</div>

const element = document.getElementById('myElement');

// 获取宽度 (使用 attributeStyleMap)
const widthValue = element.attributeStyleMap.get('width');

if (widthValue instanceof CSSUnitValue) {
  console.log(widthValue.value); // 100 (数字!)
  console.log(widthValue.unit);  // "px" (字符串!)

  // 设置宽度
  element.attributeStyleMap.set('width', CSS.px(200)); // 使用 CSS.px() 创建 CSSUnitValue 对象

  // 计算宽度
  element.attributeStyleMap.set('width', CSS.px(widthValue.value + 50));

  console.log(element.attributeStyleMap.get('width').value); // 250
}

看到了吗？获取到的 widthValue 是一个 CSSUnitValue 对象，可以直接访问它的 value 属性（数字）和 unit 属性（单位字符串）。设置宽度的时候，我们用 CSS.px() 创建了一个 CSSUnitValue 对象。整个过程，没有字符串转换，清爽多了！

再来一个：操作颜色

<div id="myElement" style="color: red;">Hello, world!</div>

const element = document.getElementById('myElement');

// 获取颜色
const colorValue = element.attributeStyleMap.get('color');

if (colorValue instanceof CSSColorValue) {
  console.log(colorValue.toString()); // "rgb(255, 0, 0)"

  // 设置颜色
  element.attributeStyleMap.set('color', CSS.rgb(0, 0, 255)); // 蓝色

  // 或者使用 HSL
  element.attributeStyleMap.set('color', CSS.hsl(120, 100, 50)); // 绿色
}

这里我们用到了 CSS.rgb() 和 CSS.hsl() 来创建 CSSColorValue 对象。同样，避免了直接操作字符串。

Computed Style和Attribute Style的区别

computedStyleMap() 返回的是计算后的样式，attributeStyleMap返回的是行内样式。区别很重要，尤其是在处理继承和层叠样式时。

<style>
  #myElement {
    color: green; /* CSS规则 */
  }
</style>
<div id="myElement" style="color: red;">Hello, world!</div>

const element = document.getElementById('myElement');

// 计算样式
const computedColor = element.computedStyleMap().get('color');
console.log(computedColor.toString()); // "rgb(255, 0, 0)" (行内样式覆盖了CSS规则)

// 行内样式
const attributeColor = element.attributeStyleMap.get('color');
console.log(attributeColor.toString()); // "rgb(255, 0, 0)"

// 删除行内样式
element.attributeStyleMap.delete('color');

// 再次获取计算样式
const computedColorAfterDelete = element.computedStyleMap().get('color');
console.log(computedColorAfterDelete.toString()); // "rgb(0, 128, 0)" (CSS规则生效)

可以看到，computedStyleMap() 始终返回最终生效的样式，而 attributeStyleMap 只返回行内样式。删除行内样式后，CSS规则才会生效。

Typed OM的优势：性能、安全、可读性

说了这么多，Typed OM到底有什么好？

• 性能提升： 浏览器可以直接使用Typed OM提供的类型化数据，避免了频繁的字符串解析和转换，大大提升了性能。
• 类型安全： Typed OM提供了类型检查，可以避免一些常见的CSS错误，比如拼写错误、单位错误等。JavaScript的类型检查工具 (如TypeScript) 可以更好地利用这些类型信息，提供更强的代码提示和错误检查。
• 代码可读性： Typed OM的代码更简洁、更易懂，告别了繁琐的字符串操作，让代码更清晰。
• 更易于动画： Typed OM 使得创建高性能的 CSS 动画更为容易，因为它允许直接操作数值，而无需每次都解析和序列化字符串。

Typed OM的兼容性

虽然 Typed OM 优点多多，但是兼容性也是个问题。目前，主流浏览器（Chrome, Firefox, Safari, Edge）都已经支持 Typed OM，但是一些老版本的浏览器可能不支持。在使用 Typed OM 之前，最好做一下兼容性检查。

可以使用 CSS.supports() 方法来检测浏览器是否支持某个CSS属性的 Typed OM。

if (CSS.supports('width', '100px')) {
  // 浏览器支持 width 属性的 Typed OM
  console.log('Typed OM for width is supported!');
} else {
  // 浏览器不支持
  console.log('Typed OM for width is NOT supported!');
}

当然，也可以使用polyfill来提供对老浏览器的支持。不过，polyfill的性能可能会受到影响，需要权衡利弊。

Typed OM 与 CSS Houdini

CSS Typed OM 通常与 CSS Houdini 联系在一起。Houdini 是一组底层 API，允许开发者扩展 CSS 引擎，创建自定义的 CSS 功能。Typed OM 是 Houdini 的一部分，但它也可以独立使用。

表格总结：传统方式 vs Typed OM

为了更清晰地对比传统方式和 Typed OM，咱们来个表格：

特性	传统方式 (字符串操作)	Typed OM
数据类型	字符串	类型化的对象 (CSSUnitValue, CSSColorValue 等)
性能	较低	较高
类型安全	差	好
可读性	较差	较好
兼容性	较好	较新浏览器支持，需考虑 Polyfill
操作方式	直接操作 style 属性	使用 computedStyleMap() 和 attributeStyleMap
数值计算	需要手动转换字符串	直接操作数值

一些高级用法：CSS Math 和 Custom Properties

Typed OM 还能玩转 CSS Math 和 Custom Properties（CSS变量）。

CSS Math:

<div id="myElement" style="width: calc(100% - 20px);">Hello, world!</div>

const element = document.getElementById('myElement');
const widthValue = element.computedStyleMap().get('width');

if (widthValue instanceof CSSMathSum) {
  console.log(widthValue.toString()); // "calc(100% - 20px)"

  // 获取操作数
  const operands = widthValue.values;
  console.log(operands[0]); // CSSUnitValue {value: 100, unit: '%'}
  console.log(operands[1]); // CSSMathNegate {value: CSSUnitValue {value: 20, unit: 'px'}}
}

Typed OM 可以解析 calc() 函数中的数学表达式，并提供对操作数的访问。

Custom Properties:

<style>
  :root {
    --main-color: blue;
  }

  #myElement {
    color: var(--main-color);
  }
</style>
<div id="myElement">Hello, world!</div>

const element = document.getElementById('myElement');
const colorValue = element.computedStyleMap().get('color');

if (colorValue instanceof CSSColorValue) {
  console.log(colorValue.toString()); // "rgb(0, 0, 255)" (蓝色)
}

// 获取自定义属性的值 (需要使用 getPropertyValue)
const rootStyle = document.documentElement.style;
const mainColor = rootStyle.getPropertyValue('--main-color'); // "blue" (字符串!)

// 设置自定义属性的值 (仍然是字符串操作，Typed OM 对自定义属性的支持有限)
rootStyle.setProperty('--main-color', 'red');

// 注意：Typed OM 对自定义属性的直接操作支持有限，通常还是需要使用字符串。

虽然 Typed OM 可以获取使用了自定义属性的元素的计算样式，但是直接操作自定义属性的值仍然需要使用字符串。这是 Typed OM 目前的一个局限。

最佳实践：逐步迁移

Typed OM 是一个强大的工具，但是完全替换传统的字符串操作可能需要一些时间和精力。建议逐步迁移，先在一些关键的性能瓶颈处使用 Typed OM，再逐步扩展到整个项目。

总结：拥抱Typed OM，提升前端开发体验

总而言之，CSS Typed OM 是一项非常有价值的技术，它可以提升前端开发的性能、安全性和可读性。虽然目前兼容性还有一些问题，但是随着浏览器的不断更新，Typed OM 的应用前景非常广阔。 拥抱 Typed OM，让你的前端代码更上一层楼！

好了，今天的讲座就到这里。希望大家有所收获！ 下课！