在前端开发中，排序算法是非常常见的问题。不过，对于开发者来说，重复造轮子可不是明智的选择。那么，使用一些已有的 npm 包就可以解决这个问题。这就是本文介绍的 npm 包 barsort 了。
简介
barsort 是一个基于 jQuery 的排序动画插件。它可以呈现一系列的条形图，并且通过不同颜色和高度来表示数据的不同值。该插件不仅实现了排序算法，还可以根据需求自定义动画效果和样式。
安装
barsort 可以通过 npm 进行安装，以下是安装命令：
npm install barsort
安装完成之后，你就可以在你的项目中引入 barsort 了，方法如下：
import 'barsort';
现在你就可以在你的项目中使用 barsort 了。
使用
barsort 可以很轻松地对数组进行排序。以下是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ---------------
------- -----------------------------------------------------------
------- --------------------------------------
--------
------------ -
--- ---- - --- -- -- -- -- -- -- -- ---
--- ------- - --- --------------- -
----- -----
--------- ---------
------ ---
---
---------------
---
---------
-------
------
---- -----------------------
-------
-------在上面的例子中，我们创建了一个数组 data，该数组包含 9 个数据。我们使用 barsort 对这个数组进行排序。然后我们在页面中创建一个空的 div，用于呈现动画效果。
在初始化 barsort 的时候，我们设置了以下参数：
- axis：是否呈现轴线，默认为 true；
- sortType：排序算法的类型，包括 bubble、selection、insertion、quick、merge、heap，默认为 bubble；
- delay：动画的延迟时间，单位为毫秒，默认为 100。
最后调用 sort() 方法就可以将数组 data 按照我们设置的方式进行排序并呈现动画效果了。
自定义
如果您想要个性化的效果，barsort 也支持自定义设置。以下是自定义的一个例子：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ---------------
------- -----------------------------------------------------------
------- --------------------------------------
--------
------------ -
--- ---- - --- -- -- -- -- -- -- -- ---
--- ------- - --- --------------- -
--------- -------
---
--------------------
----- ------
----------- ----------
------- ----------- ---------- -----------
------------- -
---- ---
---- ---
--
------ ---
---
---------------
---
---------
-------
------
---- -----------------------
-------
-------在这个例子中，我们创建了一个 barsort 实例，并设置了默认的 sortType 为 quick。然后，我们调用 setOptions() 方法，对 barsort 实例进行更多的自定义配置。这个例子中，我们修改了以下参数：
- axis：将轴线设置为 false；
- background：将背景颜色设置为灰色；
- colors：将柱状图的颜色分别设置为黄色、橙色、红色；
- heightsRange：将高度范围设置在 50 到 250 之间；
- delay：将动画延迟时间设置为了 100 毫秒。
通过自定义，你就可以得到不同于默认设置的更多样化的动画效果。
总结
barsort 是一个非常好用且方便的 npm 包，可以很容易地实现排序算法并呈现动画效果。我们希望这篇文章能给你提供一些帮助，让你不必浪费时间去造轮子，专注于更多有意义的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de182