前端bug集

你别睡这么晚2024-10-032024-10-03

时间对象的处理方法

前两天自己写了一个时间格式化的方法，将时间戳格式化为yy-dd-mm 的格式，我用的是 date 对象的 toJSON()方法，加一些正则替换实现的时间格式化。在测试的过程中，发现一个奇怪的 bug，发现在一些同事的手机上会出现时间少一天的情况，一些同事的时间显示格式不一样，我猜测可能是 date 对象的原因，于是想起几个月前了解的Intl.DateTimeFormat()方法，这是一个js 内置的国际化时间格式方法，果然用了他就标准了，

1 2	var options={year: 'numeric', month: '2-digit', day: '2-digit' }; let mydate = new Intl.DateTimeFormat('zh-CN',options).format(value)

浏览器记住密码的自动填充

这个确实挺烦的，而且经常遇到，自己做的时候也花了蛮多时间的，百度上说了各种解决办法，有多写了个输入框，然后隐藏的，有有的说在input上加autocomplet=”on”等等，但是我亲测，好像都没有效果的哑子，头大，一天偶然发现，还是要多写一个输入框，然后设置position="fixed",bottom="-999999px",嗯，好像可以了，哈哈哈，这里提供一个修改浏览器填充颜色的 css:

input::-webkit-autofill {
	box-shadow: 0 0 0px 1000px #fff inset !important;
	-webkit-text-fill-color: #fff !important;
}

关于 axios 请求的

对于接口请求，传参的方式有好多，就看后台以什么方式接收，
*后台以表单的方式接收
前端在请求的时候要设置
Content-Type'='application/x-www-form-urlencoded;charset=utf-8

如果你用的是 axios 进行的请求那么你还将额外设置:

var qs = require(‘qs’);
data: qs.stringify(data)//在发请求的的时候你要将 axios 里的 data 数据用qs.stringify()处理一下

如果你并没有设置，且没有引用 qs，那么你还可以通过改 post 请求参数提交的方式，将请求参数放在 params提交，

后台一样可以接受到这个参数，缺点就是URL请求地址过长时，请求会失败，且信息暴露，

如果你在用 params提交参数的时候,提交了一个复杂的数据例如数组嵌套对象的这种，那么你应该用 encodeURL(JSON.stringify())处理一下。

*后台以json 的方式接收

前端在请求的时候要设置:

Content-Type'='application/json;charset=utf-8'

注意:当你的请求参数过长，且是数组和对象时，你的请求参数可能会被浏览器做一些细节调整，
例如:你写的参数是 arr:[{.….}]，但浏览器发请求的时候为 arr[0]:{..},这种方式咋一看是没问题的，
但有些后台可能会报错，这时，你要对请求参数进行JSON.parse(JSON.stringify(arr))就可以了

*后台在 URL地址中获取参数
遇到这种的话，一般请求的时候自己按后台的要求自己拼接就可以了还有一种跨域问题

service.interceptors.request.use()会造成跨域，当你在请求路径写全路径时。
解决办法，不要对 axios 进行请求的封装，或是写proxy代理。

判断一个对象是否有某一个属性

之前我经常用的是 obj[‘key”]是否存在，但后来有一种情况就是，这种属性是存在的，但其值刚好是 undefined，这就很尴尬了，我的这个逻辑就不行了,你应该用 obj.hasOwnProperty,他返回一个布尔类型,如果为 true,即代表有这个属性。

关于mock js

由于项目启动的时候，后台写的比较慢，就用到了 mockjs，然后一切都没问题，最后项目要上线的时候去掉 mockis的时候，却发现，去掉之后所有的 axios 请求都跨域了，解决办法，配置 proxy 代理。
toFixed(n)方法:
该方法是 number 的方法，但需要注意的是，该方法return 的是一个字符串，不是 number。。。eg:1.注意n的取值为 1~20，超过时就会报错，2.v8号擎采用银行家舍入算法:四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。也可以加上 1e-14 之后再进行取舍，(高精度不建议用此法)

ios 小程序识别程序码:

i0s上图片长按不会出现打开小程序，需要调用微信的图片预览 SDK

null/100=0,0/100=0

v-show:

不支持 template 元素，也不支持 v-else

popstate:

当活动历史记录条目更改时，将触发popstate 事件。如果被激活的历史记录条目是通过对 history.pushState()的调用创建的，或者受到对history.replaceState()的调用的影响，popstate 事件的 state 属性包含历史

条目的状态对象的副本。需要注意的是调用 history.pushState(null,null,url)或 history.replaceState()不会触发 popstate 事件。只有在做出浏览器动作时才会触发该事件，如用户点击浏览器的回退按钮(或者在 Javascript 代码中调用 history.back()或者 history.forward()方法)
不同的浏览器在加载页面时处理 popstate 事件的形式存在差异。页面加载时Chrome和 Safari通常会触发(emit)popstate 事件，但 Firefox 则不会。

0.1+0.2!=0.3

关于浮点数值计算会产生舍入误差的问题，这是基于IEEE754 数值的浮点计算的通病。引用来自红宝书。如果非要比较的话，可以先加上1e-14 在进行 tofixed比较。

display:inline-block

某些浏览器在渲染 display: inline-block;元素的时候,默认元素的样式不一样，可能会造成该元素的上移或下移,你可以设置 line-height:1 试试,或者在父级元素上使用 display:flex

表单为单项时，enter 会刷新页面

这简直是天坑啊，在给的土就可以把我给埋了，今天突然发现我的 el-form 表单只有一个input 的时候，你在输入的时候，按了enter 会剧新页面，起初我以为是我在 input 框上绑定了 enter 事件导致的，结果我去掉了这个事件，还是会刷新页面，发现这原来是form 的原生事件，当提交的表单只有一个表单元素时，按下回车，会自动刷新页面，即出发form的onsubmit 事件，解决:如果你是原生 form，则加 onsubmit=”false”或是在写一个input，然后 display:none如果是别的U组件则加@submit.native.prevent 即可

template:

在 vue3 中，需要带条件语句，不然渲染不出来

关于 div

在子 div(设置一定高度,目前发现的是只有高度为 50 的倍数则不会有间隙)里设置了背景图片，或者里面放img，子div和子div会产生1px的边距，marginpadding 都无法消除。