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

在處理數(shù)據(jù)時，程序員常常不知道數(shù)據(jù)是否被正確過濾或排序。當?shù)鷶?shù)組然後在頁面上顯示數(shù)據(jù)時，尤其痛苦，因為不知道接收每個元素的位置。 Grid Shepherd 是一種技術(shù)，它使用CSS Grid 而不是JavaScript 來幫助您將項目定位和排序到您想要的位置。

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

讓我們深入了解。

使用JavaScript 排序

我們將從迭代一個無序的農(nóng)場動物數(shù)組開始。想像一下，奶牛和綿羊快樂地在田野裡吃草。它們可以使用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即可對數(shù)據(jù)進行排序。相反，我們依靠CSS Grid 來為我們完成這項工作。

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

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

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

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

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

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

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

高級牧羊

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

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

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

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

現(xiàn)在我們可以訪問我們的自定義元素類型了。當綿羊或奶牛的數(shù)量等於或小於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;
}

此外，計數(shù)器可以通過在父元素上使用counter-reset: countsheep countcow;並使用before選擇器來定位每個元素並向上計數(shù)來簡單地實現(xiàn)。

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

在這裡，我們將使用Vue 來動態(tài)添加和刪除動物，使用Vue 過渡和兩個不同的排序選項。觀察動物如何自然地佔據(jù)正確的列，即使添加更多動物並刪除一些動物也是如此：

Grid Shepherd 也可以用於任何無序數(shù)據(jù)來：

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

管理和可訪問性

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

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

收尾！

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

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