用Webpack从零搭建一个 Vue3 + TypeScript 开发环境

最新推荐文章于 2024-06-28 14:33:34 发布

梅花十三儿

最新推荐文章于 2024-06-28 14:33:34 发布

阅读量377

点赞数

文章标签： typescript webpack javascript

本文链接：https://blog.csdn.net/Android062005/article/details/127623552

版权

本文详细介绍了如何使用Webpack从零搭建Vue3和TypeScript的开发环境，并深入剖析了big.js库中的Big构造函数和plus方法的源码，揭示了其处理精度丢失问题的机制。通过构造函数的边界处理和入参检查，再到plus方法的步骤分析，展示了如何将小数转换为整数进行精确计算，然后再转换回小数，从而避免精度丢失问题。

摘要由CSDN通过智能技术生成

前言

想必大家日常开发中经常碰到小数相加结果不准确的坑，也都知道这是因为精度丢失导致的，更是知道能通过一些库，比如 big.js、decimal.js 等解决，但是你知道它们是怎么解决的吗？

今天我带大家一步步分析 big.js 部分源码，帮助大家理解这类库对精度丢失的处理方式。

初窥门径 —— 打开调试窗口

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src='https://cdn.jsdelivr.net/npm/big.js@6.2.1/big.min.js'></script>
</head>
<body><script> new Big(1.2).plus(120); </script>
</body>
</html>

我们可以通过 F12 或者 Ctrl+Shift+I 打开 Chrome DevTool。

在 Sources 标签的 Page 项里，找到未混淆的代码文件 big.js（xxx.min.js 文件一般是压缩混淆后的代码，可读性不高），这个就是我们要用到的完整源码了。

知根知底 —— Big 构造函数做的好事

我们先来看看 Big 构造函数做了什么事。

function _Big_() {function Big(n) {var x = this;// 可以通过函数调用的形式来创建 Big 对象if (!(x instanceof Big)) return n === UNDEFINED ? _Big_() : new Big(n);// 区分是否为 Big 示例.if (n instanceof Big) {x.s = n.s;x.e = n.e;x.c = n.c.slice();} else {// 边界处理if (typeof n !== 'string') {if (Big.strict === true && typeof n !== 'bigint') {throw TypeError(INVALID + 'value');}// Minus zero?n = n === 0 && 1 / n < 0 ? '-0' : String(n);}parse(x, n);}x.constructor = Big;}...return Big;
}

可以发现，一开始的时候，构造函数进行了 边界处理 以及 入参检查 ，随后通过 parse 函数处理，最后修正构造函数的指向。

我们先将 this 对象添加进 watches 里，接着 parse 函数后的位置打个断点然后刷新。