使用CSS网格排序数据ShepherdTechnique

牧羊人非常擅长照料他们的羊群，为牛群带来秩序和结构。即使有数百只毛茸茸的动物，牧羊人仍会在一天结束时将它们全部带回农场。对于程序员来说，我们在处理数据的时候，通常并不知道数据是否经过了正确的过滤或者排序。尤其是当你想按照稍微复杂一点的规则在页面上展示数据的时候，这个就比较痛苦了。GridShepherd是一种使用CSSGrid来帮助定位和排序的技术，完全不需要JavaScript的参与。这是本文要解决的问题。GridShepherd技术可以为我们的数据赋予我们需要的顺序和结构，让我们更好地理解它的使用方式和应用场景。让我们再深入一点。在JavaScript中排序我们首先对农场中动物的无序列表进行排序。想象牛羊在农场放松。我们可以使用Array.prototype.sort方法以编程方式对它们进行排序和分组，并将它们显示在页面上：'绵羊'},{name:'Fink',animal:'sheep'},{name:'Olga',animal:'cow'},]letsortedAnimals=animals.sort((a,b)=>{if(a.animalb.animal)return1return0})console.log(sortedAnimals)/*返回：[{name:'Elga',animal:'cow'},{name:'Olga',animal:'cow'},{name:'Liam',animal:'sheep'},{name:'Fink',animal:'sheep'}]*/认识GridShepherdGridShepherd方法可以不依赖JavaScript实现数据的排序，只依赖CSSGrid本身。下面的结构与上面的JavaScript对象数组完全相同，但以DOM节点表示。