本文主要整理前端兼容性和处理问题的一些解决方案,持续更新;(很早之前开发移动端页面碰到很多的兼容问题,也不知道从哪儿开始整理了)。
一、知识点备忘
3、程序中的空格(2022-01-10)
程序中的空格有三种
- 半角空格:Unicode 编码为 32,十六进制写法为 \u0020;
- 全角空格:Unicode 编码为 12288,十六进制写法为 \u3000;
- 不间断空格:Unicode 编码为 160,十六进制写法为 \u00A0;
用这种空格连接的字符串作为一个整体,折行时不会被拆开,第一行显示不开,会整体移到下一行显示;
半角全角空格在这种情况下,会在空格处折行,空格前面的内容会在第一行显示,空格后面的内容会折到第二行显示;
html里的 就是这种空格;
// 三种空格的编码,半角空格、全角空格,不间断空格
let arr = [" ", " ", " "];
arr.forEach((n, i) => {
let code = n.charCodeAt();
let hex = code.toString(16).padStart(4, 0);
console.log(code, hex);
});
// \s+ 正则可替换所有空格
let str = arr.join("ab") + "ab";
let res = str.replace(/\s+/g, '');
console.log(res);
可复制上面的代码到浏览器的 Console 执行查看效果,三种空格都可以用正则 \s 匹配到;
起因:维护一个老的java项目,页面是用 velocity 写的,文件后缀是 .vm,里边写了正则替换空格,但是正则这块好像和 vm 语法冲突了,问后端也不知道怎么回事,搜也没搜到解决方案;就换成了替换空格,但是不起作用,通过一番调试发现空格编码不是32,后来才慢慢查到这个知识点;
2、折行
white-space
如何处理元素中的空白,具体可参考:MDN;
word-break
break-word 值已过期,用 overflow-wrap: break-word 来替代;
word-wrap
该属性原本属于微软的一个私有属性,但现在所有浏览器都做了支持,W3C改名为 overflow-wrap;
overflow-wrap
详情可参考:MDN;
1、FormData
FormData 中的同一 key 可以对应多个值;append 是累加值到 key 中,set 是覆盖 key 对应的所有值;
var fd = new FormData();
fd.append('name', 'a');
fd.set('name', 'b');
fd.append('name', 'c');
上面的代码中,name 对应了 b 和 c 两个值;
二、前端开发小技巧
说是小技巧,实际是一些效果的实现方法或者一些解决方案;
2、tab标签不定宽定间距,hover调大字号,整体会抖动
tab标签样式,间距固定,每一项宽度不定,要求hover时字号变大;
如果不做处理,第一次hover、tab标签切换、鼠标离开整个tab时,当前标签后的所有标签位置会发生变动,看起来就像整个tab在抖动;
一般tab标签的样式,会用 inline-block 或 flex 布局实现,不管哪一种,不做处理,都会发生抖动的现象;
解决这个问题可以在每一个tab中加一个标签,该标签样式和hover样式一致,但设置为不可见或透明度为0,tab的宽度就被撑开了,然后真正显示的标签就可以正常加hover效果了;比如下面的代码中,span是撑开宽度的元素,p是正常显示的元素:
<style type="text/css">
span {display: inline-block; height: 0; overflow: hidden;}
</style>
<ul>
<li><p>标题1</p><span>标题1</span></li>
<li><p>标题2</p><span>标题2</span></li>
<li><p>标题3</p><span>标题3</span></li>
<li><p>标题4</p><span>标题4</span></li>
<li><p>标题5</p><span>标题5</span></li>
</ul>
也可以点击这里查看在线demo来复现问题、查看解决方案;
1、放大小 icon 点击区域
背景:问题在移动端里比较明显,比如弹框的关闭按钮,设计太大了会不协调,太小了又会影响点击效果,导致一次点不中的情况;
为了提升操作体验,我一般都会把点击区域放大, 这里说两种实现方式:
- 正常切图,关闭按钮大小和设计稿保持一致,然后给它设置一个伪类 :before 或 :after,把伪类尺寸调大,盖在关闭按钮上面;
- 把按钮本身调大,内部的背景图片通过 background-size 来控制到设计稿中的尺寸;
三、兼容性
随着老版浏览器/手机的迅速淘汰,总的来说,前端兼容性问题越来越少,越来越好解决了;本文主要记录实际开发中,遇到的现代浏览器的兼容问题;
2、IE11 的缓存问题
IE11中,ajax 中的 GET/DELETE 这类请求,也会被缓存;
解决方案:需要在请求参数中加一个时间戳,保证每次直接请求到服务器,而不是从缓存中取;
1、input[type=file],文件上传框
IE11下,选择文件后,js 清空选中值,ele.value = null (ele表示文件选择框对象),会再次触发文件选择框的 onchange 事件;
实际应用是在 onchange 中清空了value,使文件框再上传同一个文件时,还会触发onchange事件;结果IE11中又触发了一次事件;
四、日常bug
1、element-ui 中 datepicker 组件bug
2.15.6版本中,datepicker组件,格式为日期+时间,pickerOptions 添加 selectableRange 设置 “00:00:00 – 23:59:59″,此时日期面板中的 ”此刻“ 按钮点不了;
看了源码,如果设置了 selectableRange,点击时走的是另一个逻辑,具体逻辑没看;
解决方案:注掉 selectableRange 就好了,本来也没用到