前端 web 已支持 randomUUID 方法

蚊子前端博客
发布于 2021-08-05 15:13
从 Chome92 版本开始,crypto 模块已经支持randomUUID() 方法了。

从 Chome92 版本开始,crypto 模块已经支持randomUUID()方法了。

沉迷工作-蚊子的前端博客

1. 以前的方式

在前端 web 中,我们在生成 uuid 时,通常都会使用时间戳或 Math.random()。例如在 stackoverflow 上,有段很出名的代码:How to create a GUID / UUID,就是Math.random()来生成的:

COPYJAVASCRIPT

function uuidv4() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8; return v.toString(16); }); } console.log(uuidv4()); // "f94adc58-89b7-4c70-bc92-2935ea6fb5d2" 格式一样,但每次都不一样

每个位置都调用一次 random()方法。

2. randomUUID

现在,Chrome 从 92 版本开始,已经原生支持 uuId 方法了,即crypto.randomUUID()

COPYJAVASCRIPT

crypto.randomUUID();

crypto.randomUUID-蚊子的前端博客

以后想获取一个随机值,或者用来标识设备(要求不高的前提下)的时候,就可以用这个randomUUID()方法。

3. 总结

randomUUID()这个浏览器提供的原生确实很好用,而且符合 v4 版本的格式。

但就是有一个缺点:兼容性太差。不止其他浏览器不支持,即使在 Chrome 浏览器,也只有从 92 版本开始,才能使用。

小细节-蚊子的前端博客

不过相信不久的将来,其他浏览器也会支持这个方法的。

我们来写一个前端获取uuid的方法。

  1. 优先使用crypto.randomUUID;

  2. 没有的话,使用优先使用crypto.getRandomValues;

  3. 使用Math.random()进行兜底;

COPYJAVASCRIPT

const generateUUID = () => { if (typeof crypto === 'object') { if (typeof crypto.randomUUID === 'function') { // https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID return crypto.randomUUID(); } if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') { // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid const callback = (c) => { const num = Number(c); return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16); }; return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback); } } let timestamp = new Date().getTime(); let perforNow = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { let random = Math.random() * 16; if (timestamp > 0) { random = (timestamp + random) % 16 | 0; timestamp = Math.floor(timestamp / 16); } else { random = (perforNow + random) % 16 | 0; perforNow = Math.floor(perforNow / 16); } return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16); }); };
标签:
阅读(435) 评论(3)

公众号:

qrcode

微信公众号:前端小茶馆