《前端攻城狮 · Snowflake 雪花算法》

2024-08-29 13:12

本文主要是介绍《前端攻城狮 · Snowflake 雪花算法》,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗
🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数,欢迎多多交流。👍

文章目录

    • 写在前面的话
    • 利用现有库
    • 自定义实现
    • 雪花ID和UUID
    • 总结陈词

CSDN.gif

写在前面的话

雪花 ID 是一种分布式唯一 ID 生成算法,通常由 Twitter 提出的。它的结构通常包括时间戳、机器 ID 和序列号等部分。
如果你想在 Vue.js 中实现雪花 ID 的生成,可以选择自己实现算法,或者使用现成的库。

利用现有库

Step1、下载依赖snowflake-id

npm install snowflake-id

Step2、直接使用

import Snowflake from 'snowflake-id';const snowflake = new Snowflake();
const id = snowflake.generate();
console.log(id);

自定义实现

class Snowflake {constructor(workerId, datacenterId) {this.workerId = workerId; // 机器 IDthis.datacenterId = datacenterId; // 数据中心 IDthis.sequence = 0; // 序列号this.lastTimestamp = -1; // 上次生成 ID 的时间戳// 位移配置this.workerIdBits = 5; // 机器 ID占用的位数this.datacenterIdBits = 5; // 数据中心 ID占用的位数this.sequenceBits = 12; // 序列号占用的位数// 最大值this.maxWorkerId = -1 ^ (-1 << this.workerIdBits); // 31this.maxDatacenterId = -1 ^ (-1 << this.datacenterIdBits); // 31this.sequenceMask = -1 ^ (-1 << this.sequenceBits); // 4095// 时间戳偏移this.timestampLeftShift = this.sequenceBits + this.datacenterIdBits + this.workerIdBits; // 22this.datacenterIdShift = this.sequenceBits + this.workerIdBits; // 17this.workerIdShift = this.sequenceBits; // 12this.epoch = 1609459200000; // 自定义纪元(2021-01-01 00:00:00)}// 获取当前时间戳getCurrentTimestamp() {return new Date().getTime();}// 生成 IDnextId() {let timestamp = this.getCurrentTimestamp();if (timestamp < this.lastTimestamp) {throw new Error("Clock moved backwards. Refusing to generate id for " + (this.lastTimestamp - timestamp) + " milliseconds");}if (this.lastTimestamp === timestamp) {this.sequence = (this.sequence + 1) & this.sequenceMask; // 序列号自增if (this.sequence === 0) {timestamp = this.waitNextMillis(this.lastTimestamp); // 等待下一毫秒}} else {this.sequence = 0; // 时间戳改变,序列号重置}this.lastTimestamp = timestamp;// 生成 IDreturn ((timestamp - this.epoch) << this.timestampLeftShift) |(this.datacenterId << this.datacenterIdShift) |(this.workerId << this.workerIdShift) |this.sequence;}// 等待下一毫秒waitNextMillis(lastTimestamp) {let timestamp = this.getCurrentTimestamp();while (timestamp <= lastTimestamp) {timestamp = this.getCurrentTimestamp();}return timestamp;}
}// 使用示例
const snowflake = new Snowflake(1, 1); // 机器 ID 和数据中心 ID
const id = snowflake.nextId();
console.log(id);

雪花ID和UUID

雪花 ID(Snowflake ID)和 UUID(通用唯一识别码)都是用于生成唯一标识符的技术,但它们在设计目标、结构和使用场景上有显著的区别。

1. 生成方式
雪花 ID:
由多个部分组成,包括时间戳、机器 ID、数据中心 ID 和序列号。
生成过程依赖于时间,通常是基于当前时间戳生成的。
适合分布式系统,可以在多个节点上生成唯一 ID。
UUID:
通常是随机生成的,或者基于时间戳和节点信息(如 MAC 地址)生成。
UUID 的生成不依赖于中心化的时间或机器 ID,具有更高的随机性。
适合需要唯一性但不需要排序的场景。

2. 长度和格式
雪花 ID:
通常是 64 位的整数,表现为一个长整型数字。
结构化,包含时间、机器 ID 和序列号等信息,便于解析。
UUID:
通常是 128 位(16 字节),表现为 32 个十六进制字符,通常以 8-4-4-4-12 的格式表示。
不易于解析,主要用于唯一性标识。

3. 可排序性
雪花 ID:
由于包含时间戳,雪花 ID 是有序的,生成的 ID 随时间递增。
适合需要排序的场景,如数据库主键。
UUID:
UUID 是随机生成的,通常没有顺序性。
不适合需要排序的场景。

4. 冲突概率
雪花 ID:
由于设计上考虑了机器 ID 和序列号,冲突概率非常低,尤其在分布式环境中。
UUID:
虽然 UUID 的设计目标是唯一性,但在极少数情况下(如使用随机生成算法时)仍可能发生冲突。

5. 使用场景
雪花 ID:
适合需要高性能、高并发的分布式系统,如微服务架构、数据库主键等。
适合需要生成有序 ID 的场景。
UUID:
适合需要唯一标识符的场景,如用户 ID、会话 ID 等。
适合不需要排序的场景,或在分布式系统中需要避免中心化生成的情况。

总结
雪花 ID 更适合需要高性能和有序性的分布式系统,而 UUID 更适合需要唯一性但不关心顺序的场景。选择哪种 ID 生成方式取决于具体的应用需求和场景。

总结陈词

💗 后续会逐步分享企业实际开发中的实战经验,有需要交流的可以联系博主。

CSDN_END.gif

这篇关于《前端攻城狮 · Snowflake 雪花算法》的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1117952

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口