前言
在前端开发中，我们常常需要为 HTML 元素设置 class 来进行样式控制，但是由于多人协作的项目中可能会出现 class 命名冲突的问题，会造成不必要的困扰。那么有没有一种简单的方法可以让我们快速为元素设置唯一的 class 呢？答案是肯定的，通过使用 npm 包 css-class-unique-id 就可以轻松地解决这个问题。
安装
在使用之前，我们需要先安装 css-class-unique-id 包。可以使用 npm 来进行安装：
npm install css-class-unique-id --save-dev
使用方法
基本用法
使用 css-class-unique-id 最简单的方式是直接引入其模块，在需要设置唯一 class 的元素上使用 addClass 方法即可。
首先，我们可以在 HTML 页面中引入该模块：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------- ---------- ------- ------ ---- --------------- ------- -------------------------- ------- -------
然后，在 JavaScript 文件中，我们可以使用以下代码来设置元素的唯一 class：
import { addClass } from 'css-class-unique-id';
const app = document.querySelector('#app');
addClass(app);此时，#app 元素上会新增一个类似于 uniq-xxxxxx 的 class，其中 xxxxxx 是一个随机生成的字符串。
自定义前缀
有时候，我们希望为生成的 class 添加一些前缀，以便更好地区分它们的用途和来源。此时可以通过传递 prefix 参数来实现。
import { addClass } from 'css-class-unique-id';
const app = document.querySelector('#app');
addClass(app, { prefix: 'my-prefix-' });这样，生成的 class 就会类似于 my-prefix-xxxxxx。
自定义随机字符长度
默认情况下，css-class-unique-id 会生成长度为 6 的随机字符串来作为后缀。如果需要生成其他长度的字符串，可以通过传递 length 参数来实现。
import { addClass } from 'css-class-unique-id';
const app = document.querySelector('#app');
addClass(app, { length: 8 });这样，生成的 class 就会类似于 uniq-xxxxxxxx 的形式，长度为 8。
指导意义
使用 css-class-unique-id 可以非常方便地解决 class 命名冲突的问题，方便了多人协作的项目开发。而且，该包的使用方法非常简单，只需要几行代码就可以实现。因此，它可以作为前端开发中常用的工具之一，为开发者提供便利。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------- ---------- ------- ------ ---- --------------- ------- -------------------------- ------- -------
import { addClass } from 'css-class-unique-id';
const app = document.querySelector('#app');
addClass(app, { prefix: 'my-prefix-', length: 8 });来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553db81e8991b448d128a