前端 id 生成：uuid 与 nanoid

有时需要前端 id 生成的场景，这里比较使用常用的 id 生成库 uuid 与 nanoid ，以及探讨 id 冲突问题的解决方法。

uuid

这个库安装量很大。

使用：

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

缺点：生成的 id 比较长。

import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

这个库可以指定生成 id 包含的字符与长度。

import { customAlphabet } from 'nanoid'
const nanoid = customAlphabet('1234567890abcdef', 10)
model.id = nanoid(5) //=> "f01a2"

按 uuid 官方 issue 的说法是不会产生哈希冲突的，但这是在 node.js 当次运行环境中的，按 issue 的反馈来看，在浏览器中执行还是有可能发生冲突。

nanoid 如果指定的长度少，就更容易冲突。

浏览器环境冲突，应该是无法避免的，如果前端能够获取到所有 id，可在生成后进行校验，如果冲突重新生成。