使用网格牧羊人技术与CSS订购数据

牧羊人擅长照料他们的羊群，为羊群带来秩序和结构。即使有数百只羊，牧羊人仍然会在一天结束时将它们赶回农场。

在处理数据时，程序员常常不知道数据是否被正确过滤或排序。当迭代数组然后在页面上显示数据时，尤其痛苦，因为不知道接收每个元素的位置。Grid Shepherd 是一种技术，它使用 CSS Grid 而不是 JavaScript 来帮助您将项目定位和排序到您想要的位置。

这就是我们将在本文中探讨的内容。Grid Shepherd 技术可以为我们处理的数据带来秩序和结构，同时让我们比以往更清楚地了解数据的使用位置和方式。

让我们深入了解。

使用 JavaScript 排序

我们将从迭代一个无序的农场动物数组开始。想象一下，奶牛和绵羊快乐地在田野里吃草。它们可以使用 Array.prototype.sort 方法以编程方式组合在一起，并在页面上列出：

let animals = [
  { name: 'Edna', animal: 'cow'   },
  { name: 'Liam', animal: 'sheep' },
  { name: 'Fink', animal: 'sheep' },
  { name: 'Olga', animal: 'cow'   },
];
let sortedAnimals = animals.sort((a, b) => {
  if (a.animal > b.animal) return 1;
  return 0;
});
console.log(sortedAnimals);
/* 返回：
  [ { name: 'Elga', animal: 'cow'   },
    { name: 'Olga', animal: 'cow'   },
    { name: 'Liam', animal: 'sheep' },
    { name: 'Fink', animal: 'sheep' } ]
*/

了解 Grid Shepherd

Grid Shepherd 方法使得无需使用 JavaScript即可对数据进行排序。相反，我们依靠 CSS Grid 来为我们完成这项工作。

结构与上面的 JavaScript 对象数组完全相同，只是用 DOM 节点表示。

<main><div>Edna</div>
  <div>Liam</div>
  <div>Jenn</div>
  <div>Fink</div>
</main>

为了管理这些动物，我们必须将它们围在一个公共区域内，这就是我们使用 <main></main> 元素的原因。通过设置 display: grid，我们创建了一个网格格式化上下文，我们可以在其中定义每个动物应该占据的列（或行）。

.sheep { grid-column: 1; }
.cow { grid-column: 2; }

使用 grid-auto-flow: dense，每个动物都会自动排列到每个已定义区域的第一个可用位置。这也可以与任意数量的不同排序选项一起使用——只需定义另一列，数据就会神奇地被排序到其中。

main {
  display: grid;
  grid-auto-flow: dense;
}

.sheep { grid-column: 1; }
.cow { grid-column: 2; }

高级牧羊

我们可以使用 CSS 计数器进一步改进我们的管理示例。这样，我们可以计算每列中动物的数量，并——应用 Heydon Pickering 在 Lea Verou 2011 年的演讲中提出的数量查询——根据数量有条件地设置样式。

数量查询依赖于某种用于计数类的选择器——这对于 :nth-child(An B [of S]?) 伪类表示法来说是很好的，但它目前仅在 Safari 中可用）。这意味着我们必须使用 :nth-of-type() 选择器作为变通方法。

我们需要一些新的元素类型才能使其工作。这可以通过 Web Components 或将任何 HTML 元素重命名为自定义名称来实现。即使这些元素不在 HTML 规范中，这也适用，因为浏览器使用 HTMLUnknownElement 来表示未定义的标签，这导致它们的行为与 div 非常相似。文档现在如下所示：

<fence><sheep>Lisa</sheep><sheep>Bonnie</sheep><cow>Olaf</cow><sheep>Jenn</sheep></fence>

现在我们可以访问我们的自定义元素类型了。当绵羊或奶牛的数量等于或小于 10 时，让我们应用红色背景。

sheep:nth-last-of-type(n 10),
sheep:nth-last-of-type(n 10) ~ sheep,
cow:nth-last-of-type(n 10),
cow:nth-last-of-type(n 10) ~ cow, {
  background-color: red;
}

此外，计数器可以通过在父元素上使用 counter-reset: countsheep countcow; 并使用 before 选择器来定位每个元素并向上计数来简单地实现。

sheep::before {
  counter-increment: countsheep;  
  content: counter(countsheep); 
}

在这里，我们将使用 Vue 来动态添加和删除动物，使用 Vue 过渡和两个不同的排序选项。观察动物如何自然地占据正确的列，即使添加更多动物并删除一些动物也是如此：

Grid Shepherd 也可以用于任何无序数据来：

• 分离并计算民意调查中的投票者（可能作为两个部分，以及它们相应的个人资料图片）并进行实时插入；
• 根据职位、年龄、身高对人员/同事进行分组；以及
• 创建任何层次结构

管理和可访问性

grid-auto-flow: dense 不会更改网格的 DOM 结构——它只是在视觉上重新排序包含的元素。在按字母顺序排序的最后一个示例中可以看到一个副作用，因为计数器数字被混合在一起。更改 DOM 结构不仅会影响使用屏幕阅读器的人，还会影响选项卡遍历。

还要注意，扁平的文档结构可能不利于屏幕阅读器。相反，我会将这些演示网格视为图形，并提供更长的文本替代信息。

收尾！

看到像网格这样的强大的 CSS 布局工具如何被用于传统布局需求之外的用例，并进入过去可能需要其他语言的领域，这非常巧妙。在这种情况下，我们可以看到 CSS Grid 的布局优势和 JavaScript 的动态数据处理能力如何重叠，以及这如何为我们提供更多选择——以及权力——来根据我们的意愿弯曲渲染的数据。

以上是使用网格牧羊人技术与CSS订购数据的详细内容。更多信息请关注PHP中文网其他相关文章！