vue.js js 雪花算法ID生成 vue.js之snowFlake算法

随着前端业务越来越复杂,自定义表单数据量比较大,每条数据的id生成则至关重要。想到前期IOS中实现的雪花算法ID,照着其实现JS版本,供大家学习参考。

一、库的建立引入

在你项目中创建一个snowFlake.js的文件:拷贝以下内容进去。

import bigInt from 'big-integer'

export default class SnowFlake {
    constructor(_workerId=1, _dataCenterId=1, _sequence=0) {
        // 开始时间截 (2012-01-01),这个可以设置开始使⽤该系统的时间,可往后使⽤69年
        this.twepoch = 1325347200000;
        this.workerIdBits = 5;
        this.dataCenterIdBits = 5;
        this.maxWorkerId = -1 ^ (-1 << this.workerIdBits) //值为31
        this.maxDataCenterId = -1 ^ (-1 << this.dataCenterIdBits) //值为31
        this.sequenceBits = 12;
        this.workerIdShift = this.sequenceBits; //值为12
        this.dataCenterIdShift = this.sequenceBits + this.workerIdBits; //17
        this.timestampLeftShift = this.sequenceBits + this.workerIdBits + this.dataCenterIdBits;//22
        this.sequenceMask = -1 ^ (-1 << this.sequenceBits);//4095
        this.lastTimestamp = -1;
        //设置默认值
        this.workdId = 1;
        this.dataCenterId = 1;
        this.sequence = 0;

        if (this.workdId > this.maxDataCenterId || this.workdId < 0) {
            throw new Error('config.worker_id must max than 0 and small than maxWrokerId-[' + this.maxWrokerId + ']');
        }

        if (this.dataCenterId > this.maxDataCenterId || this.dataCenterId < 0) {
            throw new Error('config.data_center_id must max than 0 and small than maxDataCenterId-[' + this.maxDataCenterId + ']');
        }

        this.workerId = _workerId;
        this.dataCenterId = _dataCenterId;
        this.sequence = _sequence;
    }

    tilNextMillis(lastTimestamp) {
        var timestamp = this.timeGen();
        while (timestamp <= lastTimestamp) {
            timestamp = this.timeGen();
        }
        return timestamp;
    }

    timeGen() {
        return Date.now();
    }

    nextId() {
        var timestamp = this.timeGen();
        if (timestamp < this.lastTimestamp) {
            throw new Error('Clock moved backwards. Refusing to generate id for ' + (this.lastTimestamp - timestamp));
        }

        if (this.lastTimestamp === timestamp) {
            this.sequence = (this.sequence + 1) & this.sequenceMask;
            if (this.sequence === 0) {
                timestamp = this.tilNextMillis(this.lastTimestamp);
            }
            else {
                this.sequence = 0;
            }
        }

        this.lastTimestamp = timestamp;
        var shiftNum = (this.dataCenterId << this.dataCenterIdShift) | (this.workerId << this.workerIdShift) | this.sequence; // dataCenterId:1,workerId:1,sequence:0  shiftNum:135168
        var nfirst = new bigInt(String(timestamp - this.twepoch), 10);
        nfirst = nfirst.shiftLeft(this.timestampLeftShift);
        var nnextId = nfirst.or(new bigInt(String(shiftNum), 10)).toString(10);
        return nnextId;
    }
    /**
      * 获取更安全的随机ID(解决连续输出id会出现重复的问题)
      * 尽可能的避免重复
      * @param {int} repeatRate 重复率默认值100(注释:最⼩是1,最⼤值越⼤,重复的概率越低,不过还需要考虑性能的问题,并不是越⼤越好,只是相对⽽⾔)   */
    flakeId(repeatRate = 1) {
        let arr = []
        let ranNum = Math.floor(window.crypto.getRandomValues(new Uint8Array(1)) * 0.001 * repeatRate)
        for (let index = 0; index < repeatRate; index++) {
            arr[index] = this.nextId()
        }

        return arr[ranNum]
    }
}


const snowflake = new SnowFlake();

export function snowFlakeId(val) {
    return snowflake.flakeId();
}

因为生成的id比较大,普通的int类型无法保持精度,故而引入了big-integer这个类库。完成以上粘贴事宜后,进入你的项目,安装依赖:

如果你使用的是npm来管理依赖库则运行:

npm install big-integer --save

如果你使用的是yarn(较旧版本)来管理依赖库则运行:

 

yarn install big-integer --save

如果你使用的是yarn(新版本)来管理依赖则运行:

yarn add big-integer --save

后面为什么跟着--save自行查询文档,这里不做说明。

 二、库的使用

        我项目使用生成的页面比较多,为了使用方便,我直接将添加到Vue的扩展方法中。

三、运行验证

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/337153.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

『MySQL快速上手』-⑩-索引特性

文章目录 1.索引的作用2.索引的理解建立测试表插入多条记录查看结果 2.1 MySQL与磁盘交互的基本单位2.1 为何IO交互要是 Page2.3 理解单个Page2.4 理解多个Page2.5 页目录2.6 单页情况2.7 多页情况2.8 B vs B2.9 聚簇索引 vs 非聚簇索引非聚簇索引聚簇索引 3.索引操作3.1 创建主…

webpack 核心武器:loader 和 plugin 的使用指南(下)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

c++函数重载(同名函数)功能,区别于c语言

c可以使用同名函数&#xff0c;实现功能类似的多个功能 规则&#xff1a; ①函数名相同&#xff0c;但是函数的参数&#xff08;形参&#xff09;绝不相同 ②参数个数不同 ③参数个数相同&#xff0c;参数类型不同 只有返回值类型不同&#xff0c;不可以&#xff1b;只有形…

Unity中ShaderGraph下获取主灯

文章目录 前言一、ShaderGraph获取主灯1、创建ShaderGraph2、创建一个自定义方法&#xff08;Custom Function&#xff09;节点3、新建两个 Vector3 类型的输出变量4、选择自定义节点程序体为 string 类型5、编写程序体6、我们输出主光方向看看效果7、我们输出主光颜色看看效果…

JRP Version 1.4.120

使用Flask学习制作网页一个月后&#xff1a; 借用HTML书籍学习&#xff0c;自己做的NAS管理系统终于是长得好看了一些&#xff1a; 使用模版继承&#xff0c;最开始是引用人家的库 from flask_bootstrap import Bootstrap&#xff0c; 效果&#xff1a; 我准备进一步管理但是发…

Arduino开发实例-MTH02温湿度传感器驱动

MTH02温湿度传感器驱动 文章目录 MTH02温湿度传感器驱动1、MTH02温湿度传感器介绍2、硬件准备及接线3、代码实现1、MTH02温湿度传感器介绍 市场上的温湿度传感器在价格、精度和测量范围等方面种类繁多。 MTH02O 是这些传感器中最小的一种。 该传感器使用数字引脚传输温度和湿度…

C++中const和constexpr的区别:了解常量的不同用法

C中const和constexpr的区别 一、C中的常量概念二、const关键字的用法和特点三、constexpr关键字的用法和特点四、const和constexpr的区别对比4.1、编译时计算能力4.2、可以赋值的范围4.3、对类和对象的适用性4.4、对函数的适用性4.5、性能和效率的差异 五、使用示例六、总结 一…

k3s x GitLab Runner Operator,GitLab CI 云原生构建新体验

GitLab CI 是非常常用的一款 CI/CD 工具&#xff0c;只需要在 .gitlab-ci.yml 文件中用 YAML 语法编写 CI/CD 流水线即可。而 GitLab CI 能够运行的关键组件是 GitLab Runner。GitLab Runner 是一个轻量级、高扩展的代理&#xff0c;主要用来执行 GitLab CI/CD 流水线中的 Job&…

《PCI Express体系结构导读》随记 —— 第I篇 第2章 PCI总线的桥与配置(20)

接前一篇文章&#xff1a;《PCI Express体系结构导读》随记 —— 第I篇 第2章 PCI总线的桥与配置&#xff08;19&#xff09; 2.4 PCI总线的配置 PCI总线定义了两类配置请求&#xff0c;一个是Type 00h配置请求&#xff0c;另一个是Type 01h配置请求。PCI总线使用这些配置请求…

1432 - 走出迷宫的最少步数-广度优先搜索BFS

代码 #include<bits/stdc.h> using namespace std; char a[51][51]; int r,c; int fx[4]{0,0,1,-1}; int fy[4]{1,-1,0,0}; int tx,ty; struct Node{int x,y,step; }; int bfs(int x,int y){a[x][y]#;queue<Node> q;q.push({x,y,1});while(!q.empty()){Node Curre…

Maven error in opening zip file?maven源码debug定位问题jar包

文章目录 问题发现调试Maven1. 查看maven版本2. 下载对应版本的maven源码3. 打开maven源码&#xff0c;配置启动选项 启动maven debug模式进入maven 源码&#xff0c;打断点调试找jar包算账 已录制视频 视频连接 问题发现 最近使用maven分析jar包的时候遇到了一个很搞的问题。…

鸿蒙星河版启航,开发者驶入生态新征程

操作系统市场的气候已经不同以往。在鸿蒙决定不再兼容安卓之后&#xff0c;这里正欲长出一片全新的天地。 四年前&#xff0c;华为鸿蒙系统横空出世&#xff0c;彼时它还不完全与安卓和iOS的性质划等号&#xff0c;而是定义为物联网操作系统。而如今的华为鸿蒙要改写故事篇章&…

前端基础面试题大全

一、Vue 文章目录 一、Vue1、vue 修改数据页面不重新渲染**数组/对象的响应式 &#xff0c;vue 里面是怎么处理的&#xff1f;** 2、生命周期Vue 生命周期都有哪些&#xff1f;父子组件生命周期执行顺序 3、watch 和 computed 的区别4、组件通信&#xff08;组件间传值&#xf…

WordPress怎么去除jquery和CSS静态文件链接中的版本号?附2种方法

我们很多WordPress网站默认情况下所加载的jquery和CSS静态文件链接中都会带有相应的版本号&#xff0c;比如boke112百科使用的YIA主题&#xff0c;加载CSS文件时就会在链接地址后面加上?ver2.7&#xff0c;即是style.css?ver2.7 除了CSS文件会加上版本号外&#xff0c;加载主…

32 登录页组件

效果演示 实现了一个登录页面的样式&#xff0c;包括一个容器、左侧和右侧部分。左侧部分是一个背景图片&#xff0c;右侧部分是一个表单&#xff0c;包括输入框、复选框、按钮和忘记密码链接。整个页面的背景色为白色&#xff0c;容器为一个圆角矩形&#xff0c;表单为一个半透…

Python seaborn库的安装与图像的背景风格(Seaborn篇-01)

Python seaborn库的安装与图像的背景风格(Seaborn篇-01)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

2024美赛数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…

Broadcom交换芯片56620架构

文章目录 架构1.系统逻辑视图2.逻辑芯片视图3.芯片框图4.MIIM&#xff08;Medium Independent Interface Management&#xff09;5.交换结构6.CAP 架构 1.系统逻辑视图 Ingress Chip作用&#xff1a; 解析报文128字节的头部&#xff08;MMU&#xff08;Memory Management Uni…

微信小程序(九)轮播图

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.轮播容器的基本属性 2.轮播图片的尺寸处理 index.wxml <view class"navs"><text class"active">精选</text><text>手机</text><text>食品</text><…