前端问题汇总

本文主要整理前端兼容性和处理问题的一些解决方案，持续更新；（很早之前开发移动端页面碰到很多的兼容问题，也不知道从哪儿开始整理了）。

一、知识点备忘

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 就好了，本来也没用到