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

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗

🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数,欢迎多多交流。👍

文章目录

写在前面的话

雪花 ID 是一种分布式唯一 ID 生成算法,通常由 Twitter 提出的。它的结构通常包括时间戳、机器 ID 和序列号等部分。

如果你想在 Vue.js 中实现雪花 ID 的生成,可以选择自己实现算法,或者使用现成的库。

利用现有库

Step1、下载依赖snowflake-id

shell 复制代码
npm install snowflake-id

Step2、直接使用

javascript 复制代码
import Snowflake from 'snowflake-id';

const snowflake = new Snowflake();
const id = snowflake.generate();
console.log(id);

自定义实现

javascript 复制代码
class Snowflake {
    constructor(workerId, datacenterId) {
        this.workerId = workerId; // 机器 ID
        this.datacenterId = datacenterId; // 数据中心 ID
        this.sequence = 0; // 序列号
        this.lastTimestamp = -1; // 上次生成 ID 的时间戳

        // 位移配置
        this.workerIdBits = 5; // 机器 ID占用的位数
        this.datacenterIdBits = 5; // 数据中心 ID占用的位数
        this.sequenceBits = 12; // 序列号占用的位数

        // 最大值
        this.maxWorkerId = -1 ^ (-1 << this.workerIdBits); // 31
        this.maxDatacenterId = -1 ^ (-1 << this.datacenterIdBits); // 31
        this.sequenceMask = -1 ^ (-1 << this.sequenceBits); // 4095

        // 时间戳偏移
        this.timestampLeftShift = this.sequenceBits + this.datacenterIdBits + this.workerIdBits; // 22
        this.datacenterIdShift = this.sequenceBits + this.workerIdBits; // 17
        this.workerIdShift = this.sequenceBits; // 12

        this.epoch = 1609459200000; // 自定义纪元(2021-01-01 00:00:00)
    }

    // 获取当前时间戳
    getCurrentTimestamp() {
        return new Date().getTime();
    }

    // 生成 ID
    nextId() {
        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;

        // 生成 ID
        return ((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 生成方式取决于具体的应用需求和场景。

总结陈词

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

相关推荐
阳树阳树11 分钟前
signal-新的状态管理模式
前端·javascript
双叶83611 分钟前
(C语言)单链表(1.0)(单链表教程)(数据结构,指针)
c语言·开发语言·数据结构·算法·游戏
fakaifa12 分钟前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
木木黄木木27 分钟前
HTML5手写签名板项目实战教程
前端·html·html5
uhakadotcom34 分钟前
OpenAI 的 PaperBench:AI 研究复现基准测试工具
算法·面试·github
凯强同学40 分钟前
第十四届蓝桥杯大赛软件赛省赛Python 大学 C 组:6.棋盘
python·算法·蓝桥杯
姑苏洛言1 小时前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家1 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya1 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me1 小时前
react使用eventBus在不同模块间进行通信
前端·react.js