在前端开发过程中，我们经常需要对用户进行各种评分操作，为了方便我们的开发，有许多优秀的评分插件出现，如 Star Rating 和 RateYo，但这些评分插件往往功能较为繁琐，引入量也比较大，如果只需要简单的评分功能，就显得过于臃肿。而今天我们要介绍的是一个轻量级的评分插件—— pre-rating。
简介
pre-rating 是一个使用纯 JavaScript 编写的前端评分插件，它简单易用，功能完备，可以满足大部分的评分需求。它的特点如下：
- 功能完备：支持多种评分形式，如星级、百分比等。
- 灵活配置：可以通过简单的配置选项来控制评分的样式和行为。
- 易于使用：可以通过简单的 HTML 标签来完成评分。
安装
pre-rating 是一个 Node.js 模块，可以通过 npm 下载安装：
npm install pre-rating
使用
使用 pre-rating 非常简单，我们只需要在 HTML 代码中插入特定的标签即可：
<div class="pre-rating"></div>
然后，在 JavaScript 中引入 pre-rating，并使用以下代码初始化评分器：
import preRating from 'pre-rating';
const preRatingObject = new preRating('.pre-rating');
preRatingObject.setRating(3.5);以上代码将在 <div class="pre-rating"></div> 元素上初始化一个评分器，初始评分为 3.5。我们可以通过 setRating() 方法来设定评分的初始值。
preRating 可以通过以下方式来配置：
-- -------------------- ---- -------
-
-- --------- ------ --
------------------- ------
-- --------
----------- -
-- -------- --- - --- ------
---- -
---- --
---- -
--
-- --------- ------- ----
-------- --
--
-- ----------- --- ---------- --- ----- - ---- --- -------
------------ ----- --- -------
-- ----
------- -
-- ------
-------- ----------
-- ------
--------------- ----------- ---------- ---------- ---------- -----------
-- -----
------ -------
------- -------
-- ----
------ ------
-
-以上为 pre-rating 内置的默认配置选项，我们可以根据自己的需求来进行相应的配置。
示例代码
下面是一个使用 pre-rating 的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
-------
------
---- -------------------------
------- ------------------------------------------------------------------------------
--------
----- --------------- - --- ------------------------ -
----------- -
-------- --
--
------- -
-------- ----------
--------------- ----------- ---------- ---------- ---------- -----------
------ -------
------- ------
-
---
-------------------------------
---------
-------
-------总结
pre-rating 是一个轻量级、易用的评分插件，可以快速地添加评分功能到我们的网站中。它提供了多种评分形式和灵活的配置选项，可以满足各种评分需求，并且引入量非常小。如果你正在寻找一个好用的评分插件，不妨给 pre-rating 一试！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa481e8991b448d81c0