记录前端开发遇到的工作小细节

172 阅读3分钟

以下是我个人经验的累积,大多数情况下不影响工作的展开,但是了解这些东西对于优化有好处。

Number数据精度问题
  • 后端返回的数据,如果是Number类型,精度会被吞掉。

  • 如图,Response返回的数据是后端的原始数据,Preview是前端接收到的数据。

  • 如果业务要求精度到2位,就要前端在展示页用toFixed(2)函数去调整精度。 image.png

  • 原因(来源chatgpt

后端返回的数据,如果是Number类型,在传递到前端时可能会丢失精度,这是因为 JavaScript 中 Number 类型的表示方式导致的。JavaScript 中的 Number 类型是基于 IEEE 754 标准的浮点数实现,使用双精度浮点数来表示数字。

双精度浮点数的特点是具有固定的位数(64位),其中一部分用来表示整数部分,一部分用来表示小数部分,还有一部分用来表示指数部分。由于这种格式的固定位数,某些十进制数值可能无法精确地表示为二进制浮点数。

这种存储方式的结果是,在进行浮点数计算时可能会存在舍入误差。例如,一些看似简单的十进制数值,如0.1和0.2,在转换为二进制浮点数后会出现无限循环小数,因此在计算机中可能无法完全精确表示。

由于浮点数的不确定性和舍入误差,当从后端返回的数据是 Number 类型时,一些小数位数可能会被截断或溢出,从而导致精度丢失。

为了避免这个问题,可以考虑在后端将数字以字符串的形式返回,并在前端进行处理和展示。这样可以确保精度不会丢失,并且可以使用字符串处理方法来保持所需的小数位数。在需要进行计算时,可以使用专门的库(如 BigDecimal.js)来处理高精度的数值运算。

调用接口如何debug

如果是出现这种情况(如图),那么大概率是函数的配置写错了。

比如说method写成了methods,或者post方法写成了get方法之类的,优先检查前端代码,而不是去找后端检查接口情况。 2.png

正常情况的接口:有Query String Parameters 和 Request Payload 1.png

开发习惯记录(以下是个人的见解)
mixin尽量不嵌套,主要用作过滤器之类的功能(不需要仔细看代码就可以拿来用的东西),功能性的函数写在全局的js里面,按需引用。

我现在做的工作,遇到了之前的同事写的代码,好多代码都调用了mixin,但是mixin里面的函数都很杂乱,各种功能的都有,并且mixin里面还嵌套了mixin,所以除非是cv别人的代码,否则我都不想去mixin里面找代码,宁愿自己写新的函数。

这样的话,mixin的作用:“将多个组件或页面中公用的属性或方法抽取出来单独定义在 mixins 中”就失去意义了。即使一开始的开发者的初衷是符合mixin的设计理念的,多层的嵌套就是增加了后来开发者的维护难度。如果看mixin需要层层检索,那么还不如把这个时间精力用来写一个一定符合需求的函数。

mixin适合做过滤器之类的功能,大概就是不需要仔细看代码就可以用的内容。而功能性的函数写在全局js里面,在使用的时候,如果需要特定功能,就去引用js。