文章目录

  • Intro
  • 浏览器控制台
  • NodeJS环境
  • 纯JavaScript函数实现

Intro

后端Java可以调用java.util.UUID.randomUUID() 生成一个随机的UUID。
可是前端JavaScript有没有自带的API用于生成UUID/GUID呢?

以下分三种情况。

  • 仅用于浏览器控制台Console Crypto.randomUUID()
  • NodeJS开发环境(可以自由使用各类开源的package) mockjs uuid
  • 任意JS环境,自己封装一个简单的JavaScript函数。

浏览器控制台

var currentUUID = window.crypto.randomUUID();
console.log(currentUUID);

其本质是利用了 Crypto 这个类。
MDN Crypto.randomUUID()

但是要注意:这是一个Web API,它依赖于浏览器环境。
也就是说,你可以在不同种类的浏览器的控制台/Console上自由使用该API来生成UUID。
要有浏览器环境!

注意浏览器兼容情况:只有IE不支持该API(又是IE)。
不过别担心,在2022-06-15以后做前端开发你都不用再担心IE浏览器的兼容性问题了:IE即将停止支持/退役

NodeJS环境

在node环境下开发,有海量的node package可以使用。这些包都可以在 https://www.npmjs.com/ 找到。
官方开源的/个人上传的,都有。比如说我就曾经上传过勇于获取随机的 useragent HTTP请求头的工具包:
https://www.npmjs.com/package/useragent-tool

我们现在的需求是:有一个方法可以返回随机的UUID/GUID。
先在 npmjs 中去找。
我就找到了两个: modejsuuid

  • mockjs
// npm install mockjsvar Mock = require("mockjs");
var Random = Mock.Random;var currGuid = Random.guid()
console.log(currGuid);

  • uuid https://www.npmjs.com/package/uuid

// npm i uuidconst { v4: uuidv4 } = require('uuid');
console.log(uuidv4());

纯JavaScript函数实现

如果没有现成的轮子,那就自己造一个轮子出来用!

function uuid() {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 0010s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01s[8] = s[13] = s[18] = s[23] = "-";var uuid = s.join("");return uuid;
}uuid();

javascript 生成 UUID GUID 浏览器环境 NodeJS环境 纯JavaScript函数相关推荐

  1. JavaScript生成uuid的四种方法

    在开发过程中,有时候需要js生成全局唯一标识符,在java中可以使用uuid,但是JS中没有现成的函数.总结了一下,JS生成唯一标识符的几种方法. 第一种 function guid() {retur ...

  2. 在nodejs环境里使用浏览器环境下的document对象

    我用nodejs写了一个简单的简书文章导出工具,将我本人的简书问题连同标题和超链接导出到本地. 我用nodejs向如下的url发起http请求,返回的响应是html格式的,每篇文章的明细包含在html ...

  3. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目 在上一篇<Vue2+VueRouter2+ ...

  4. Vue路由无痕浏览 - nodeJs环境搭建

    目录 一.Vue路由 1.1 路由的使用步骤 1.2 无痕浏览 二.nodeJs环境搭建 2.1 Node.js是什么 2.2 配置NodeJS环境 2.3 下载github的Vue项目 一.Vue路 ...

  5. 翻译 | 《JavaScript Everywhere》第1章 开发环境(^_^)

    翻译 | <JavaScript Everywhere>第1章 开发环境(^_^) 写在最前面 大家好呀,我是毛小悠,是一位前端开发工程师.正在翻译一本英文技术书籍. 为了提高大家的阅读体 ...

  6. vue路由无痕浏览nodeJS环境搭建

    目录 一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...

  7. Vue路由--无痕浏览 NodeJs环境搭建

                                                               文章目录 一.路由 二.SPA是什么 三.路由实现步骤 导入Vue.vue-rou ...

  8. vue路由无痕浏览nodeJS环境搭建ElementUI简介

    目录 一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...

  9. vue路由、无痕浏览和nodeJS环境搭建、ElementUI简介

    目录 1.vue路由和无痕浏览 1.1.SPA是什么 1.2.SPA实现思路和技术特点 1.2.1.技术特点 1.2.2.思路 1.3.通过vue的路由可实现多视图的单页Web应用 1.4.route ...

  10. Vue05之ElementUI入门+nodejs环境搭建+运行nodejs项目

    14天阅读挑战赛 努力是为了不平庸~ 目录 1. ElementUI入门 1.1 ElementUI简介 1.2 Vue+ElementUI安装 1.3 开发示例 2. 搭建nodejs环境 2.1 ...

最新文章

  1. B/S软件超越C/S软件的优势在哪里?
  2. 数据蒋堂 | 还原分组运算的本意
  3. [转载] 大道至简:软件工程实践者的思想——第四章 流于形式的沟通
  4. unity实现图片轮播效果_Unity3D实现列表拖拽轮播分页滚动功能
  5. OPENSSL的基础使用
  6. CSS语法和CSS优先级
  7. android 拨打多个电话,Android的第一个应用(拨打电话)
  8. python_str 字符串的所有方法
  9. android调用完自己写的app之后如何返回原来的android应用_App逆向篇 神器之 Frida...
  10. Java基础通信_Java网络通信基础编程(必看篇)
  11. 批量释放系统共享内存
  12. 【计算机系统结构】Micro-operation微操作
  13. python 多版本共存
  14. jshint详细说明【vscode插件】
  15. java enum compare_Java中枚举类型
  16. 如何在html中加锚定标记,给一个锚定标记多个功能 - HTML
  17. smallworld 下的magik module 的logger和service provider
  18. Xilinx FPGA资源解析与使用系列——CLB
  19. 【实战】RockMongo和RoboMongo初体验
  20. JAVA毕设项目评标专家管理信息系统(java+VUE+Mybatis+Maven+Mysql)

热门文章

  1. linux卸载intel驱动程序,删除Ubuntu Intel官方驱动包并添加pdadoka PPA
  2. 读书笔记——《灰度决策:如何处理复杂、棘手、高风险的难题》
  3. crontab 每周五_关于linux:如何在星期天每周运行crontab作业
  4. java冒泡排序代码详解
  5. 5分钟商学院-个人篇-高效能人士的思维习惯
  6. 计算机车牌识别的步骤,车牌识别流程图
  7. idea 类注释模板
  8. 程序员是否要考PMP认证?看这篇就够了
  9. R语言epiDisplay包的codebook函数计算dataframe中所有变量的基础描述统计信息和一维列联表(频数表)、连续变量(样本数、均值、中位数、标准差、最大值、最小值)、离散变量(列联表)
  10. MAX30102血氧模块的原理及编程