简介
tinysort 是一个快速轻量级的 JavaScript 排序库，它可以用于对 HTML 元素进行排序。使用 tinysort 可以让开发者快速实现各种排序需求，同时也能提高页面响应速度。
安装
在使用 tinysort 之前，需要先将其安装到项目中。可以通过 npm 安装：
npm install tinysort
或者通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/tinysort"></script>
使用方法
基本用法
假设有如下 HTML 结构：
<ul id="list"> <li>foo</li> <li>bar</li> <li>baz</li> </ul>
我们想要按字母顺序对这些 li 元素进行排序，可以使用 tinysort：
const list = document.getElementById('list');
tinysort(list.getElementsByTagName('li'));此时，li 元素就会按照字母顺序依次排列。
高级用法
除了基本用法外，tinysort 还提供了一些高级用法，例如自定义排序规则、多重排序等。下面是一些示例代码：
自定义排序规则
假如有如下 HTML 结构：
<ul id="list"> <li>1,000</li> <li>10,000</li> <li>100</li> </ul>
如果直接使用 tinysort 进行排序，会得到错误的结果。因为默认情况下，tinysort 将字符串转换为数字后进行比较，而这些字符串中有逗号，无法直接转换为数字。
为了解决这个问题，我们可以自定义排序规则：
-- -------------------- ---- -------
----- ---- - --------------------------------
---------
--------------------------------
-
----- ------------- -- -------
------------- ----------- -- -
----- ------ - ------------------------------------- ----- -- ---------
----- ------ - ------------------------------------- -----
------ ------ - -------
-
-
--在这个示例中，每个 li 元素都添加了一个 sort-value 属性，用于存储排序数据。当执行 tinysort 时，通过设置 data 参数指定使用该属性进行排序，同时通过设置 sortFunction 参数来自定义排序规则。在 sortFunction 中，将 sort-value 属性中的字符串转换为数字后进行比较，即可得到正确的排序结果。
多重排序
假如有如下 HTML 结构：
-- -------------------- ---- -------
------ -----------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------我们想要先按照性别进行排序，再按照年龄进行排序，最后按照姓名进行排序。可以使用 tinysort：
const table = document.getElementById('table');
tinysort(
table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'),
{
selector: 'td:nth-child(3), td:nth-child(2), td:nth-child(1)' // 指定多重排序规则
}
);在这个示例中，通过设置 selector 参数指定多重排序规则。selector 中的每一项都是一个 CSS 选择器，用于指定排序时参考的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36995