在前端开发中，常常需要对用户的操作进行评分，考虑到复杂性和可复用性，我们可以使用 npm 包提供的评分工具 score.min.js。本篇文章将带你详细了解该工具的使用方法及其核心原理。
安装
第一步是安装该 npm 包，在终端中输入以下命令即可：
npm install score.min.js
npm 包 score.min.js 将被安装在项目目录的 node_modules 文件夹中。
使用
在安装完成后，就可以在代码中以 import 或 require 的方式使用该 npm 包：
import Score from 'score.min.js'
// or
const Score = require('score.min.js')接下来我们就可以创建评分对象并配置其选项，最终渲染出一个评分组件：
const scoreContainer = document.getElementById('score-container')
const score = new Score(scoreContainer, {
defaultValue: 3,
maxScore: 5,
onChange: (value) => {
console.log(`当前评分为 ${value}`)
}
})上述代码中，我们首先通过 document.getElementById 获取一个 HTML 元素，然后通过 new Score 创建了一个评分对象，并传入了两个参数：
- 第一个参数是该评分组件所要放置的 HTML 元素，即 scoreContainer。
- 第二个参数是一个对象，包含了各种选项配置：
- defaultValue：表示默认的评分值，即渲染时初始选中的分数。
- maxScore：表示评分的最大值。
- onChange：是一个回调函数，在用户对评分进行操作时会触发，会将用户操作后的分数值传入，我们可以在其中加入一些有用的操作。
核心原理
在学习使用 npm 包 score.min.js 之前，我们先来了解一下它的核心原理。
每个评分组件由多个评分项组成（通常是五个），用户在评分组件中选择其中一个评分项就会触发 onChange 事件，并将当前选择的评分项的值作为参数传递给回调函数。
评分项通常是由若干个 star（星形图案）组成的，当用户选中某个评分项时，该评分项之前的所有 star 都会变成实心，之后的所有 star 都会变成空心。
在代码中，每个评分项是一个 HTML 元素，用户点击时触发其 click 事件，并把当前选中的评分值传到最外层的评分组件中，同时更新每个评分项的状态（空心或实心）。
示例代码
我们来看看一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
----- ---------------- ---------------------
-------
------
---- ---------------------------
------- ----------------------------
--------
----- -------------- - ------------------------------------------
----- ----- - --- --------------------- -
------------- --
--------- --
--------- ------- -- -
------------------ ----------
-
--
---------
-------
-------在这个示例中，我们首先引入了样式文件 score.min.css，然后创建了一个 ID 为 score-container 的空 div 元素，接着引入了脚本文件 score.min.js，并在该脚本文件中创建了一个评分对象，设定初始评分为 3 分，最大评分为 5 分，当用户评分后则会将评分值通过回调函数输出到控制台。
通过上述示例代码，我们可以清楚地学习使用 npm 包 score.min.js 的方法及其核心原理。使用 npm 包轻松实现并重用评分组件，无疑能够提升前端开发效率与品质。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244b59