牧羊人擅長(zhǎng)照料他們的羊群，為羊群帶來(lái)秩序和結(jié)構(gòu)。即使有數(shù)百只羊，牧羊人仍然會(huì)在一天結(jié)束時(shí)將它們趕回農(nóng)場(chǎng)。

在處理數(shù)據(jù)時(shí)，程序員常常不知道數(shù)據(jù)是否被正確過(guò)濾或排序。當(dāng)?shù)鷶?shù)組然后在頁(yè)面上顯示數(shù)據(jù)時(shí)，尤其痛苦，因?yàn)椴恢澜邮彰總€(gè)元素的位置。Grid Shepherd 是一種技術(shù)，它使用 CSS Grid 而不是 JavaScript 來(lái)幫助您將項(xiàng)目定位和排序到您想要的位置。

這就是我們將在本文中探討的內(nèi)容。Grid Shepherd 技術(shù)可以為我們處理的數(shù)據(jù)帶來(lái)秩序和結(jié)構(gòu)，同時(shí)讓我們比以往更清楚地了解數(shù)據(jù)的使用位置和方式。

讓我們深入了解。

使用 JavaScript 排序

我們將從迭代一個(gè)無(wú)序的農(nóng)場(chǎng)動(dòng)物數(shù)組開(kāi)始。想象一下，奶牛和綿羊快樂(lè)地在田野里吃草。它們可以使用 Array.prototype.sort 方法以編程方式組合在一起，并在頁(yè)面上列出：

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 方法使得無(wú)需使用 JavaScript即可對(duì)數(shù)據(jù)進(jìn)行排序。相反，我們依靠 CSS Grid 來(lái)為我們完成這項(xiàng)工作。

結(jié)構(gòu)與上面的 JavaScript 對(duì)象數(shù)組完全相同，只是用 DOM 節(jié)點(diǎn)表示。

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

為了管理這些動(dòng)物，我們必須將它們圍在一個(gè)公共區(qū)域內(nèi)，這就是我們使用 <main></main> 元素的原因。通過(guò)設(shè)置 display: grid，我們創(chuàng)建了一個(gè)網(wǎng)格格式化上下文，我們可以在其中定義每個(gè)動(dòng)物應(yīng)該占據(jù)的列（或行）。

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

使用 grid-auto-flow: dense，每個(gè)動(dòng)物都會(huì)自動(dòng)排列到每個(gè)已定義區(qū)域的第一個(gè)可用位置。這也可以與任意數(shù)量的不同排序選項(xiàng)一起使用——只需定義另一列，數(shù)據(jù)就會(huì)神奇地被排序到其中。

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

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

高級(jí)牧羊

我們可以使用 CSS 計(jì)數(shù)器進(jìn)一步改進(jìn)我們的管理示例。這樣，我們可以計(jì)算每列中動(dòng)物的數(shù)量，并——應(yīng)用 Heydon Pickering 在 Lea Verou 2011 年的演講中提出的數(shù)量查詢——根據(jù)數(shù)量有條件地設(shè)置樣式。

數(shù)量查詢依賴于某種用于計(jì)數(shù)類的選擇器——這對(duì)于 :nth-child(An B [of S]?) 偽類表示法來(lái)說(shuō)是很好的，但它目前僅在 Safari 中可用）。這意味著我們必須使用 :nth-of-type() 選擇器作為變通方法。

我們需要一些新的元素類型才能使其工作。這可以通過(guò) Web Components 或?qū)⑷魏?HTML 元素重命名為自定義名稱來(lái)實(shí)現(xiàn)。即使這些元素不在 HTML 規(guī)范中，這也適用，因?yàn)闉g覽器使用 HTMLUnknownElement 來(lái)表示未定義的標(biāo)簽，這導(dǎo)致它們的行為與 div 非常相似。文檔現(xiàn)在如下所示：

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

現(xiàn)在我們可以訪問(wèn)我們的自定義元素類型了。當(dāng)綿羊或奶牛的數(shù)量等于或小于 10 時(shí)，讓我們應(yīng)用紅色背景。

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;
}

此外，計(jì)數(shù)器可以通過(guò)在父元素上使用 counter-reset: countsheep countcow; 并使用 before 選擇器來(lái)定位每個(gè)元素并向上計(jì)數(shù)來(lái)簡(jiǎn)單地實(shí)現(xiàn)。

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

在這里，我們將使用 Vue 來(lái)動(dòng)態(tài)添加和刪除動(dòng)物，使用 Vue 過(guò)渡和兩個(gè)不同的排序選項(xiàng)。觀察動(dòng)物如何自然地占據(jù)正確的列，即使添加更多動(dòng)物并刪除一些動(dòng)物也是如此：

Grid Shepherd 也可以用于任何無(wú)序數(shù)據(jù)來(lái)：

• 分離并計(jì)算民意調(diào)查中的投票者（可能作為兩個(gè)部分，以及它們相應(yīng)的個(gè)人資料圖片）并進(jìn)行實(shí)時(shí)插入；
• 根據(jù)職位、年齡、身高對(duì)人員/同事進(jìn)行分組；以及
• 創(chuàng)建任何層次結(jié)構(gòu)

管理和可訪問(wèn)性

grid-auto-flow: dense 不會(huì)更改網(wǎng)格的 DOM 結(jié)構(gòu)——它只是在視覺(jué)上重新排序包含的元素。在按字母順序排序的最后一個(gè)示例中可以看到一個(gè)副作用，因?yàn)橛?jì)數(shù)器數(shù)字被混合在一起。更改 DOM 結(jié)構(gòu)不僅會(huì)影響使用屏幕閱讀器的人，還會(huì)影響選項(xiàng)卡遍歷。

還要注意，扁平的文檔結(jié)構(gòu)可能不利于屏幕閱讀器。相反，我會(huì)將這些演示網(wǎng)格視為圖形，并提供更長(zhǎng)的文本替代信息。

收尾！

看到像網(wǎng)格這樣的強(qiáng)大的 CSS 布局工具如何被用于傳統(tǒng)布局需求之外的用例，并進(jìn)入過(guò)去可能需要其他語(yǔ)言的領(lǐng)域，這非常巧妙。在這種情況下，我們可以看到 CSS Grid 的布局優(yōu)勢(shì)和 JavaScript 的動(dòng)態(tài)數(shù)據(jù)處理能力如何重疊，以及這如何為我們提供更多選擇——以及權(quán)力——來(lái)根據(jù)我們的意愿彎曲渲染的數(shù)據(jù)。

以上是使用網(wǎng)格牧羊人技術(shù)與CSS訂購(gòu)數(shù)據(jù)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！