探讨 CSS Typed OM (CSS Object Model) 如何提供类型安全的 JavaScript API 来操作 CSS 属性值，提升性能和可靠性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位亲爱的程序员朋友们，晚上好！我是你们的老朋友，代码界的段子手，今天咱们来聊聊一个听起来有点高冷，但实际上非常实用的技术：CSS Typed OM (CSS Object Model)。

如果你还在用JavaScript吭哧吭哧地操作CSS字符串，那今晚的讲座绝对能让你眼前一亮，感觉自己之前的代码简直像在用算盘敲计算器！

第一部分：CSSOM 的痛点，以及 Typed OM 的闪亮登场

在传统的CSSOM（CSS Object Model）中，我们操作CSS属性值就像是在玩“猜谜游戏”。所有属性值都以字符串的形式存在，这意味着：

性能损耗： 每次读取或修改属性值，浏览器都需要进行字符串解析和转换，这会消耗大量的CPU资源。想想看，浏览器要先把 "10px" 解析成数字 10，然后再把 "blue" 解析成颜色值，多累啊！
类型不安全： 你可以把任何字符串赋值给任何CSS属性，即使这个字符串根本无效。比如，你把 "hello world" 赋值给 width 属性，浏览器也不会报错，直到渲染的时候才会发现不对劲。这就像给汽车加了汽油以外的东西，跑不跑得起来就听天由命了。
代码可读性差： 大量的字符串操作会让代码变得难以阅读和维护。一堆字符串拼接和解析，简直让人头大。

举个例子：

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

// 获取元素的 padding 值（字符串）
const padding = element.style.padding; // 例如："10px 20px"

// 提取左侧 padding 的值
const paddingLeft = parseInt(padding.split(' ')[1]); //  手动解析字符串

// 将左侧 padding 值增加 5px
element.style.padding = padding.replace(padding.split(' ')[1], (paddingLeft + 5) + 'px'); // 手动拼接字符串

这段代码是不是看起来很繁琐？而且一不小心就会出错。

Typed OM 的出现，就是为了解决这些痛点！ 它提供了一个类型安全的 JavaScript API 来操作 CSS 属性值。这意味着：

类型安全： CSS属性值会被表示为 JavaScript 对象，并且具有明确的类型。比如，长度值会被表示为 CSSUnitValue 对象，颜色值会被表示为 CSSColorValue 对象。
性能提升： 浏览器可以直接操作这些对象，而无需进行字符串解析和转换。就像是直接用螺丝刀拧螺丝，而不用先用石头砸，再用钳子夹。
代码可读性强： 使用Typed OM 可以让代码变得更加简洁、易懂。

第二部分：Typed OM 的基本概念和 API

Typed OM 引入了一些新的接口和类，让我们来了解一下：

CSSStyleValue： 所有CSS属性值的基类。
CSSUnitValue： 表示带单位的数值，例如 10px， 2em， 50%。
CSSKeywordValue： 表示CSS关键字，例如 auto， inherit。
CSSColorValue： 表示颜色值，例如 rgb(255, 0, 0)， #00FF00。
CSSMathValue： 表示数学表达式，例如 calc(100% - 20px)。
CSSUnparsedValue： 表示尚未解析的 CSS 值，通常用于自定义属性。
StylePropertyMapReadOnly 和 StylePropertyMap： 类似于 element.style 对象，但是提供了类型安全的 API。 StylePropertyMapReadOnly 用于读取属性， StylePropertyMap 用于读取和修改属性。

如何获取 Typed OM 对象？

我们可以通过 element.computedStyleMap() 方法来获取元素的 StylePropertyMapReadOnly 对象，或者通过 element.attributeStyleMap 获取 StylePropertyMap对象。

element.computedStyleMap()返回的是计算后的样式，是只读的。
element.attributeStyleMap返回的是内联样式，是可以修改的。

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

// 获取计算后的样式
const computedStyleMap = element.computedStyleMap();

// 获取内联样式
const attributeStyleMap = element.attributeStyleMap;

如何读取 CSS 属性值？

我们可以使用 get() 方法来读取 CSS 属性值。

// 获取元素的宽度
const width = computedStyleMap.get('width');

// 获取元素的颜色
const color = computedStyleMap.get('color');

注意，get() 方法返回的是 CSSStyleValue 对象，我们需要根据属性的类型进行相应的处理。

如何修改 CSS 属性值？

我们可以使用 set() 方法来修改 CSS 属性值。

// 设置元素的宽度
attributeStyleMap.set('width', CSS.px(200));

// 设置元素的颜色
attributeStyleMap.set('color', 'red');

注意，set() 方法需要传入一个 CSSStyleValue 对象或者一个字符串。

第三部分：Typed OM 的实战演练

让我们用 Typed OM 来重写一下之前的例子：

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

// 获取元素的 padding 值
const padding = element.computedStyleMap().get('padding');

// 判断 padding 是否是 CSSUnparsedValue 类型，如果是，则说明 padding 值没有设置
if (padding instanceof CSSUnparsedValue) {
  console.log("padding 没有设置");
  return;
}

// 获取左侧 padding 的值
const paddingLeft = element.computedStyleMap().get('padding-left');

// 判断 paddingLeft 是否是 CSSUnitValue 类型，如果是，则说明 paddingLeft 值是一个数值
if (paddingLeft instanceof CSSUnitValue) {
  // 将左侧 padding 值增加 5px
  element.attributeStyleMap.set('padding-left', CSS.px(paddingLeft.value + 5));
}

这段代码是不是看起来更加简洁易懂？而且类型安全也得到了保障。

再来一个更复杂的例子：实现一个简单的动画

<!DOCTYPE html>
<html>
<head>
  <title>Typed OM 动画示例</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');

    function animate() {
      const left = box.attributeStyleMap.get('left');
      let leftValue = 0;

      if (left instanceof CSSUnitValue) {
        leftValue = left.value;
      }

      leftValue += 1;

      box.attributeStyleMap.set('left', CSS.px(leftValue));

      if (leftValue < 300) {
        requestAnimationFrame(animate);
      }
    }

    requestAnimationFrame(animate);
  </script>
</body>
</html>

这个例子使用 Typed OM 来修改元素的 left 属性，从而实现一个简单的动画。

第四部分：Typed OM 的兼容性以及 polyfill

虽然 Typed OM 带来了很多好处，但是它的兼容性还不是很好。截至目前（2024年），主流浏览器都已经支持 Typed OM，但是一些旧版本的浏览器可能不支持。

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Internet Explorer	不支持

如果你需要兼容旧版本的浏览器，可以使用 polyfill。有很多现成的 Typed OM polyfill 可以使用，例如 typed-om。

如何使用 polyfill？

引入 polyfill 的 JavaScript 文件。
```
<script src="typed-om.js"></script>
```
在你的代码中使用 Typed OM API。

polyfill 会自动检测浏览器是否支持 Typed OM，如果不支持，则会使用 JavaScript 来模拟 Typed OM 的行为。

第五部分：Typed OM 的优势与局限性

优势：

性能提升： 避免了字符串解析和转换，提高了性能。
类型安全： 减少了错误，提高了代码的可靠性。
代码可读性强： 使代码更加简洁易懂。
更方便的数值计算和单位转换： Typed OM提供了更便捷的数值计算和单位转换方法，例如 CSSUnitValue.to('em')。

局限性：

兼容性： 兼容性还不是很好，需要使用 polyfill 来兼容旧版本的浏览器。
学习成本： 需要学习新的 API。
并非所有属性都支持： 目前 Typed OM 并非支持所有的 CSS 属性，一些复杂的属性可能仍然需要使用字符串来操作。

第六部分：Typed OM 的未来展望

Typed OM 是一个很有前景的技术，它正在不断发展和完善。未来，Typed OM 可能会支持更多的 CSS 属性，并且提供更多的 API。

随着浏览器对 Typed OM 的支持越来越好，它将会成为前端开发中不可或缺的一部分。

总结

Typed OM 是一个非常有用的技术，它可以提高性能、增强类型安全性和提高代码可读性。虽然它的兼容性还不是很好，但是随着浏览器的不断发展，它将会成为前端开发的主流技术。

希望今天的讲座能够帮助大家更好地理解 Typed OM，并在实际项目中应用它。

现在，大家有什么问题吗？可以提出来一起讨论。感谢大家的参与！祝大家编码愉快，bug 远离！

发表回复 取消回复

发表回复取消回复