介绍
在前端开发中，有时候需要给某些元素添加唯一的 ID，例如用于表单的 label 与 input 进行关联。此时可以使用 @aykutay/unique-id-generator npm 包生成唯一 ID。
@aykutay/unique-id-generator 是一个轻量级的 npm 包，可以轻松地生成唯一的 ID。
安装
安装 @aykutay/unique-id-generator 包的命令如下：
npm install @aykutay/unique-id-generator --save
使用方法
在需要生成 ID 的地方，我们需要先引入 @aykutay/unique-id-generator：
import { generateUniqueId } from "@aykutay/unique-id-generator";然后，我们可以调用 generateUniqueId 方法生成一个唯一 ID：
const uniqueId = generateUniqueId(); console.log(uniqueId); // 输出形如: "id-1", "id-2", "id-3" ...
我们也可以传入一个前缀作为参数，让生成的 ID 带有指定的前缀：
const uniqueId = generateUniqueId("prefix");
console.log(uniqueId); // 输出形如: "prefix-1", "prefix-2", "prefix-3" ...使用起来十分简单。
示例代码
下面是一个使用 @aykutay/unique-id-generator 包的例子：
<label for="<%= uniqueId %>">Name:</label> <input type="text" id="<%= uniqueId %>" name="name">
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------------------- ----- -------- - ------------------- ---------------------- -- ----- ------- ------- ------ --- ----- ----- - -------------------------------- ------------------------- ---------- ----- ----- - -------------------------------- ------------------------ ----------
此例中，我们使用了 generateUniqueId 方法生成了一个唯一的 ID，然后通过 DOM 操作将其分别设置为 label 的 for 属性和 input 的 id 属性。
总之，使用 @aykutay/unique-id-generator 可以帮助我们轻松生成唯一的 ID，使得我们的前端开发更加便捷高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5c51ab1864dac670cd