前端工程化必备,语义化版本号扫盲,支持任意版本号位数的比较方法

简介: 因为最近在做 Node 相关的项目,涉及到版本号的处理,根据版本号大小做升级 js 处理的,而因为多加了一位数,导致线上的 js 不能升级。所以只能重写一个支持任意位数的版本号对比方法。顺便先来一个语义化版本号的扫盲吧。

为什么需要语义化版本号?


在软件管理的领域里存在着被称作“依赖地狱”的死亡之谷,系统规模越大,加入的套件越多,你就越有可能在未来的某一天发现自己已深陷绝望之中。


在依赖高的系统中发布新版本套件可能很快会成为恶梦。


如果依赖关系过高,可能面临版本控制被锁死的风险(必须对每一个相依套件改版才能完成某次升级)。


而如果依赖关系过于松散,又将无法避免版本的混乱(假设兼容于未来的多个版本已超出了合理数量)。


当你专案的进展因为版本相依被锁死或版本混乱变得不够简便和可靠,就意味着你正处于依赖地狱之中。


作为这个问题的解决方案之一,就是用一组简单的规则及条件来约束版本号的配置和增长,也就是 语义化版本号


语义化版本号


一般语义化版本号通常定义是这样的:


js 代码:
Major_Version_Number.Minor_Version_Number[.Revision_Number[.Build_Number]]
主版本号            .子版本号              [.修正版本号       [.编译版本号  ]]


定界符一般使用 .


版本格式:主版本号.次版本号.修订号,版本号递增规则如下:


  • 主版本号(major):当你做了不兼容的 API 修改
  • 次版本号(minor):当你做了向下兼容的功能性新增,可以理解为 Feature 版本
  • 修订号(patch):当你做了向下兼容的问题修正,可以理解为 Bug fix 版本


先行版本号及版本编译信息可以加到 “主版本号.次版本号.修订号” 的后面,作为延伸。


而且版本号都是递增的,在相同的位上递增、或者更高位递增,比如:'1.2.5.1' => '1.2.5.2'、'1.2.5.1' => '1.2.6.1'、'1.9.9.9' => '2.0.0.0'。


更详细的版本解释请看这里 语义化版本 2.0.0


比较方法


这样我们可以做版本号比较,这里提供一个我们项目中使用的方法,支持任意版本号位数的比较哦,比如 3 位的、4 位的。


// 3 位
Major_Version_Number.Minor_Version_Number[.Revision_Number]
主版本号            .子版本号              [.修正版本号]
// 4 位
Major_Version_Number.Minor_Version_Number[.Revision_Number[.Build_Number]]
主版本号            .子版本号              [.修正版本号       [.编译版本号  ]]


之所以支持任意版本号位数的比较,是因为版本号都是递增的,而以下的方法是从左到右,一位一位的比较的。


js 代码:
/**
 * 版本比较 VersionCompare
 * @param {String} curVersion 当前版本
 * @param {String} supportVersion 比较版本
 * @return {Boolean} false 当前版本小于比较版本返回 true
 */
const versionCompare = (curVersion, supportVersion) => {
    if (!curVersion) {
        return false;
    }
    if (!supportVersion) {
        return false;
    }
    // 相等 也是比较关键的一步
    if (curVersion === supportVersion) {
        return true;
    }
    const curArr = curVersion.split('.');
    const supportArr = supportVersion.split('.');
    for (let i = 0; i < curArr.length; i += 1) {
        // 只有当两个版本号不相等才比较
        if (+curArr[i] !== +supportArr[i]) { 
            // 直接返回 结果,中止循环
            return +curArr[i] > +supportArr[i]; 
        }
    }
    return false;
};


使用也很简单:


js 代码:


// 3 位比较
versionCompare('1.3.3', '1.2.5'); // true
versionCompare('1.1.3', '1.2.5'); // false
versionCompare('1.2.5', '1.2.5'); // true
// 4 位比较
versionCompare('1.2.5.1', '1.2.5.1'); // true
versionCompare('1.2.3.4', '1.2.3.5'); // false
versionCompare('1.2.3.6', '1.2.3.5'); // true
versionCompare('1.3.3.4', '1.2.3.5'); // true
// 单 位上大于 10 的位进行比较
versionCompare('1.2.15.1', '1.2.5.1'); // true
versionCompare('1.2.15.1', '1.2.16.1'); // false


这里需要注意的是根据我自己的业务逻辑 当前版本小于比较版本返回 false,当前版本等于比较版本返回 true。


你可以根据自己的业务逻辑修改代码。

相关文章
|
11天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
18天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
2月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
44 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
2月前
|
前端开发
前端基础(十四)_隐藏元素的方法
本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。
62 1
前端基础(十四)_隐藏元素的方法
|
30天前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
18天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
93 0
|
18天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
71 0
|
2月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
69 3
|
22天前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
21 0
|
30天前
|
前端开发
开发指南047-前端模块版本
平台前端框架内置了一个文件version.vue