CSS `CSS Typed OM` 操作 `Layout Worklet` `Constraints` (`min`, `max`)

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊CSS Typed OM这家伙，以及它如何跟Layout Worklet狼狈为奸，哦不，珠联璧合，再扯上Constraints（min和max）这俩活宝。

咱们争取把这盘菜炒得既有技术深度，又通俗易懂，让各位吃得津津有味！

一、CSS Typed OM：告别字符串，拥抱类型！

很久很久以前，在CSS的世界里，我们操作样式都是这样的：

const element = document.getElementById('myElement');
element.style.width = '100px';
element.style.padding = '20px';
const width = element.style.width; // width是字符串 "100px"

看到没？全是字符串！这就意味着，浏览器要不停地解析字符串，转换成数值，进行计算，再转换回字符串。这效率简直是蜗牛爬树！

CSS Typed OM（CSS类型化对象模型）就是来拯救世界的！它引入了带类型的对象来表示CSS属性值。比如：

const element = document.getElementById('myElement');
element.attributeStyleMap.set('width', CSS.px(100));
element.attributeStyleMap.set('padding', CSS.px(20));

const width = element.attributeStyleMap.get('width'); // width是CSSUnitValue对象
console.log(width.value); // 输出 100
console.log(width.unit);  // 输出 "px"

看到了吗？CSS.px(100) 创建了一个 CSSUnitValue 对象，明确告诉浏览器这是一个像素值。浏览器直接拿来用，省去了字符串解析的麻烦。

Typed OM的优点：

性能提升： 避免了字符串解析和转换，提高了性能。
类型安全： 明确的类型减少了错误。
更易于操作： 可以直接访问数值和单位，方便计算。

Typed OM的一些常用类：

类名	描述	示例
`CSSUnitValue`	表示带单位的数值，如像素、百分比等。	`CSS.px(100)`, `CSS.percent(50)`
`CSSKeywordValue`	表示CSS关键字，如 `auto`，`inherit`。	`CSS.keyword('auto')`
`CSSStyleValue`	所有CSS值的基类。
`CSSImageValue`	表示图像值，如 `url()`。
`CSSColorValue`	表示颜色值。
`CSSMathValue`	表示数学表达式的值。	`CSS.calc('100px + 50px')`
`CSSUnparsedValue`	表示未解析的CSS值。

二、Layout Worklet：自定义布局引擎！

浏览器默认的布局引擎虽然强大，但总有一些场景满足不了我们这些“不安分”的开发者。比如，想实现一个瀑布流布局，或者一个复杂的自定义动画效果。

Layout Worklet就是来解放我们的！它允许我们用JavaScript编写自定义的布局算法，并在浏览器的渲染管道中运行。

Layout Worklet的工作流程：

注册： 使用 CSS.layoutWorklet.addModule('my-layout.js') 注册一个Layout Worklet模块。
定义： 在 my-layout.js 中定义一个或多个Layout API类，这些类负责执行布局计算。
使用： 在CSS中使用 layout: my-layout; 来应用自定义布局。

一个简单的Layout Worklet示例：

my-layout.js

class MyLayout {
  static get inputProperties() {
    return ['--item-width']; // 声明需要使用的CSS变量
  }

  async intrinsicSizes(children, edges, styleMap) {
    // 返回元素的固有尺寸，用于布局引擎计算
    return { width: 100, height: 100 };
  }

  async layout(children, edges, constraints, styleMap, breakToken) {
    const itemWidth = styleMap.get('--item-width').value; // 获取CSS变量的值
    let x = 0;
    let y = 0;

    for (const child of children) {
      child.inlineSize = itemWidth;
      child.blockSize = itemWidth;
      child.styleMap.set('top', CSS.px(y));
      child.styleMap.set('left', CSS.px(x));

      x += itemWidth;
      if (x + itemWidth > constraints.inlineSize) {
        x = 0;
        y += itemWidth;
      }
    }

    return { inlineSize: constraints.inlineSize, blockSize: y + itemWidth };
  }
}

registerLayout('my-layout', MyLayout);

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Layout Worklet Example</title>
  <style>
    #container {
      display: block; /* 必须是 block 或 inline-block */
      width: 500px;
      height: 500px;
      layout: my-layout;
      --item-width: 100px; /* 定义CSS变量 */
    }

    .item {
      width: 100px; /* 这里的width会被Layout Worklet覆盖 */
      height: 100px; /* 这里的height会被Layout Worklet覆盖 */
      background-color: lightblue;
      position: absolute; /* Layout Worklet需要绝对定位 */
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

  <script>
    CSS.layoutWorklet.addModule('my-layout.js');
  </script>
</body>
</html>

这个例子实现了一个简单的网格布局。Layout Worklet会根据 --item-width CSS变量的值，将子元素排列成网格。

Layout Worklet API：

static get inputProperties(): 声明Layout Worklet需要使用的CSS变量。
intrinsicSizes(children, edges, styleMap): 返回元素的固有尺寸，用于布局引擎计算。
layout(children, edges, constraints, styleMap, breakToken): 执行布局计算，并返回容器的尺寸。

三、Constraints：布局的约束条件！

在Layout Worklet的 layout() 方法中，我们收到了一个 constraints 参数。这个参数包含了布局的约束条件，比如容器的可用宽度和高度。

constraints 对象包含以下属性：

inlineSize: 容器的可用宽度。
blockSize: 容器的可用高度。
availableInlineSize: 剩余的可用宽度。
availableBlockSize: 剩余的可用高度。

这些约束条件可以帮助我们更好地控制布局。比如，我们可以根据容器的宽度来调整子元素的排列方式。

四、min 和 max：尺寸的上下限！

在CSS中，min-width、max-width、min-height、max-height 这些属性可以用来设置元素的最小和最大尺寸。这些属性也会影响Layout Worklet的布局计算。

Layout Worklet如何处理min/max？

Layout Worklet在 layout() 方法中收到的 constraints 对象，已经考虑了 min 和 max 的影响。也就是说，constraints.inlineSize 和 constraints.blockSize 的值，已经被限制在 min 和 max 之间。

举个例子：

#container {
  width: 500px;
  min-width: 300px;
  max-width: 700px;
  layout: my-layout;
}

在这个例子中，如果容器的实际宽度小于300px，那么 constraints.inlineSize 的值将会是300px。如果容器的实际宽度大于700px，那么 constraints.inlineSize 的值将会是700px。

一个使用min/max的Layout Worklet示例：

my-layout.js

class MyLayout {
  async layout(children, edges, constraints, styleMap, breakToken) {
    const itemWidth = Math.min(100, constraints.inlineSize / children.length); // 限制子元素的宽度，使其不超过容器的宽度
    let x = 0;
    let y = 0;

    for (const child of children) {
      child.inlineSize = itemWidth;
      child.blockSize = itemWidth;
      child.styleMap.set('top', CSS.px(y));
      child.styleMap.set('left', CSS.px(x));

      x += itemWidth;
    }

    return { inlineSize: constraints.inlineSize, blockSize: itemWidth };
  }
}

registerLayout('my-layout', MyLayout);

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Layout Worklet Example</title>
  <style>
    #container {
      display: block;
      width: 500px;
      min-width: 300px;
      max-width: 700px;
      height: 200px;
      layout: my-layout;
    }

    .item {
      background-color: lightblue;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>

  <script>
    CSS.layoutWorklet.addModule('my-layout.js');
  </script>
</body>
</html>

在这个例子中，Layout Worklet会根据容器的宽度和子元素的数量，动态地调整子元素的宽度。如果容器的宽度太小，子元素的宽度会被限制在100px以内。

五、Typed OM + Layout Worklet + Constraints：完美搭档！

现在，我们把Typed OM、Layout Worklet和Constraints这三个家伙凑到一起，看看他们能擦出什么火花！

Typed OM可以帮助我们更高效地获取和设置CSS属性值，Layout Worklet可以让我们自定义布局算法，Constraints可以让我们更好地控制布局的约束条件。这三者的结合，可以让我们构建出更加灵活、高效的布局系统。

一个更复杂的示例：

假设我们需要实现一个瀑布流布局，并且可以根据容器的宽度动态地调整列数。

waterfall-layout.js

class WaterfallLayout {
  static get inputProperties() {
    return ['--column-count'];
  }

  async layout(children, edges, constraints, styleMap) {
    const columnCount = parseInt(styleMap.get('--column-count').value); // 获取列数
    const columnWidth = constraints.inlineSize / columnCount;
    const columnHeights = new Array(columnCount).fill(0);

    for (const child of children) {
      child.inlineSize = columnWidth;

      // 找到高度最小的列
      let minHeight = Infinity;
      let columnIndex = 0;
      for (let i = 0; i < columnCount; i++) {
        if (columnHeights[i] < minHeight) {
          minHeight = columnHeights[i];
          columnIndex = i;
        }
      }

      child.styleMap.set('top', CSS.px(columnHeights[columnIndex]));
      child.styleMap.set('left', CSS.px(columnIndex * columnWidth));
      child.blockSize = child.intrinsicSizes().height; // 获取元素的固有高度
      columnHeights[columnIndex] += child.blockSize;
    }

    const maxHeight = Math.max(...columnHeights);
    return { inlineSize: constraints.inlineSize, blockSize: maxHeight };
  }
}

registerLayout('waterfall-layout', WaterfallLayout);

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Waterfall Layout Example</title>
  <style>
    #container {
      display: block;
      width: 800px;
      min-width: 400px;
      max-width: 1200px;
      height: 600px;
      layout: waterfall-layout;
      --column-count: 4; /* 默认列数 */
    }

    .item {
      background-color: lightblue;
      position: absolute;
      width: 100%; /* 这里的width会被Layout Worklet覆盖 */
    }

    .item:nth-child(odd) {
      height: 150px;
    }

    .item:nth-child(even) {
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>

  <script>
    CSS.layoutWorklet.addModule('waterfall-layout.js');
  </script>
</body>
</html>

在这个例子中，我们使用Layout Worklet实现了一个瀑布流布局。Layout Worklet会根据 --column-count CSS变量的值，动态地调整列数。同时，我们使用了Typed OM来获取 --column-count 的值，并使用了Constraints来限制容器的宽度。

六、总结

今天，我们深入探讨了CSS Typed OM、Layout Worklet和Constraints这三个重要的概念。Typed OM提高了CSS操作的性能和类型安全，Layout Worklet让我们能够自定义布局算法，Constraints则提供了布局的约束条件。这三者的结合，可以帮助我们构建出更加灵活、高效的布局系统。

希望今天的讲解能够帮助大家更好地理解和使用这些技术。下次再见！

发表回复 取消回复

发表回复取消回复