GUID(全局唯一标识符)或(UUID)通用唯一标识符是一个 16 字节的二进制值,是旨在提供某些唯一性保证的标识符。
Math.Random
Javascript 中使用 Math.Random() 生成 GUID
uuidv4: function () {
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);
}
);
},
由于上面创建的 GUID 高度依赖Math.Random(),可以创建 GUID 的简单写法,但不能将其视为高质量的随机数生成器。因此,该方法的GUID 可能会发生冲突,但可以用于少量生成。
优化方案:加入日期和时间,确保它是唯一的。
generateUUIDUsingMathRandom: function () {
var d = new Date().getTime(); //Timestamp
var d2 =
(performance && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
/[xy]/g,
function (c) {
var r = Math.random() * 16; //random number between 0 and 16
if (d > 0) {
//Use timestamp until depleted
r = (d + r) % 16 | 0;
d = Math.floor(d / 16);
} else {
//Use microseconds since page-load if supported
r = (d2 + r) % 16 | 0;
d2 = Math.floor(d2 / 16);
}
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
}
);
},
Crypto API
Crypto接口提供当前上下文中可用的基本加密功能。它允许访问加密的强随机数生成器和加密原语。
cryptoUuidv4: function () {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
},
Pseudo-Random Number
使用伪随机数
PseudoUUID: function () {
var s = [];
var hexDigits = '0123456789abcdef';
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = '-';
var uuid = s.join('');
return uuid;
},
基于Vue Cli 2.0 模板示例如下:
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="https://vuejs.org/images/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import Crypto from 'crypto';
export default {
name: 'App',
components: {
HelloWorld,
},
mounted() {
this.init();
},
methods: {
init: function () {
const uuid_1 = this.uuidv4();
console.log(uuid_1); // 5b3e9636-88ec-4dd7-8ba2-a8e511a36139
const uuid_2 = this.generateUUIDUsingMathRandom();
console.log(uuid_2); // 41a605ef-1dff-4a69-bece-342104892733
const uuid_3 = this.cryptoUuidv4();
console.log(uuid_3); // 8db33e79-0a18-4563-95a0-e1b13ba80f68
const uuid_4 = this.PseudoUUID();
console.log(uuid_4); // 20e44d2b-2e96-4eb1-b457-7d274a497468
},
//1: Math.random Simple
uuidv4: function () {
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);
}
);
},
//2: Math.random High
generateUUIDUsingMathRandom: function () {
var d = new Date().getTime(); //Timestamp
var d2 =
(performance && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
/[xy]/g,
function (c) {
var r = Math.random() * 16; //random number between 0 and 16
if (d > 0) {
//Use timestamp until depleted
r = (d + r) % 16 | 0;
d = Math.floor(d / 16);
} else {
//Use microseconds since page-load if supported
r = (d2 + r) % 16 | 0;
d2 = Math.floor(d2 / 16);
}
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
}
);
},
//3. Crypto API
cryptoUuidv4: function () {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
},
//4. Pseudo-Random Number
PseudoUUID: function () {
var s = [];
var hexDigits = '0123456789abcdef';
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = '-';
var uuid = s.join('');
return uuid;
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>