前端理论面试-遇到问题

vue开发中遇到的问题

1. 不要把 v-if 和 v-for 同时用在同一个元素上
   数据重复渲染，内容错乱。
   因为v-for指令的优先级高于v-if当它们处于同一节点。v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
   2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。
   3.x 版本中 v-if 总是优先于 v-for 生效。=（3.x修复 v-if 和 v-for 同时用在同一个元素的问题）

个人经验记录，无需阅读。

一.说一说项目遇到的问题，然后怎么解决？

1. 小程序，微信端嵌入HTML网页跳转链接URL参数丢失问题。解决方法：对URL进行encodeURIComponent()处理。

2. 请求服务：资源加载无效资源
   上传视频资源，后台转码，有时候转码成功，有时候转码失败，
   各种转码失败，后台转码脚本异步，导致转码成功，而视频为空。
   小程序：
   问题：图片验证码问题。
   描述：图片验证码登录，后端判断验证不成功。
   很多开发这都是用小程序的授权登录，而我这项目中需要用账号密码登录，同时使用图片验证码去校验，后端是PHP返回的图片流，直接插入到wxml中的image.src里面直接显示，图片能清楚显示，无怎么提交后端都返回验证码错误，狗血的是我用postman测试一直能成功登录，放到小程序怎么样都不行。
   和后端交流问题，他就截图postman，表示后台系统程序没有问题，直接把锅丢给前端。
   小程序端，请求正常，请求数据格式正常，验证码输入正确，后台能返回校验情况，我也真找不到问题。我这边只好测试请求数据的格式，json，form什么的格式都测试了一遍，都不行。图片放到最大，确保验证输入一定正确，无奈，页面上的操作无法解决请求的问题。
   再和后端沟通，后端确实有点不耐烦，我叫他返回base64图片试试看，他却说postman请求成功，还用PC端后台登录也是这样用都可以，就不给我返回base64了。
   我只好自己瞎搞一下了，拿着请求格式，图片验证码不能成功的问题，去百度，谷歌，360，知乎，博客，前端的群，一起开发的朋友同事，问了一边，翻了一遍，然而都没有对应的问题解决情况，又回头看了小程序请求文档，最终懂没有在这个方向解决这个问题。
   为了不影响开发进度，这些纠结解决不了的问题也只好放在一边了。
   利用晚上，周末的时间再去找问题解决方法。
   解决问题要点：转换问题的思路，了解实现的根本原理。
   PC端提交验证图片验证码无误，这个验证码的校验过程是怎么样的？作为前端，很多人都用图片验证码，但估计都不知道这个直接插入html中的验证码，到底是怎么样跟后台校验的。原来这个验证码获取的时候，浏览器会主动保持['Set-Cookie']里面的值PHPSESSID，这个值就是后端加密的图片验证码数字的字符串，在cookie本地，然后提交数据验证的时候后端再取cookie的PHPSESSID解密，校验提交的验证码。是这样的流程。然后上小程序论坛，发现小程序根本不会主动储存['Set-Cookie']，所以后端一直都应该拿不到PHPSESSID，然后的校验肯定是不能成功的。
   然后我要手动存储['Set-Cookie']，url就是图片路径，我前端怎么能手动存储['Set-Cookie']？下载图片，去请求中的取header['Set-Cookie']，然后保存起来，提交登录验证把保存的header带上，然后验证成功，问题解决了。
   花了好几天的时间
   总结：
   1.错误思路，方向错误，怎么改都是错。
   2.后端不配合，postman请求成功，就不帮忙调试问题了，帮忙调试一下，就知道没有PHPSESSID,那就可以直接知道问题的根处，解决问题的时间可以缩短90%；
   3.转换思路，了解原理，配合调试。
   4.一般情况，叫后端都可以打印日志看看就好，像我这样搞，都是逼的。

二，你会用笔记本打开网页文件吗？

千万不要使用Windows自带的记事本编辑任何文本文件。原因是Microsoft开发记事本的团队使用了一个非常弱智的行为来保存UTF-8编码的文件，他们自作聪明地在每个文件开头添加了0xefbbbf（十六进制）的字符，你会遇到很多不可思议的问题，比如，网页第一行可能会显示一个“?”，明明正确的程序一编译就报语法错误，等等，都是由记事本的弱智行为带来的。

三，火狐上多行文本超出显示省略号

多行文本超出显示省略号

p{
  overflow:hidden;  // 超出部分隐藏 
  text-overflow:ellipsis;  // 超出部分显示省略号 
  display:-webkit-box;  // 将对象作为弹性伸缩盒子模型显示 
  -webkit-box-orient:vertical;  // 规定框的子元素应该被水平或垂直排列 
  -webkit-box-clamp:2  // 为不规范属性，表示展示几行 
}

补充：white-space，它主要是用来处理元素内文本的空白符、换行符以及是否允许折行。可选值包括normal（默认）、pre、nowrap、pre-wrap、pre-line。
word-wrap，是用来标明是否允许浏览器在单词内进行断句，为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。可选值break-word
word-break，用来标明怎样进行单词内的断句。默认值normal，可选值为break-all，keep-all。

---

在火狐上，-webkit-box-clamp:2不生效

@-moz-documentc url-prefix(){ 
p{ 
position: relative; 
line-height: 20px; 
max-height: 40px;//设置最大高度，加上overflowhidden，正好是两行，使超出部分隐藏 
overflow: hidden;
 }
 p::after{ 
content: "..."; 
position: absolute; 
bottom: 0; right: 0; 
padding-left: 40px;//以上三个属性，可以后续调整，看要把...放在哪个位置 
background: -webkit-linear-gradient(left, transparent, #fff 55%); 
background: -o-linear-gradient(right, transparent, #fff 55%); 
background: -moz-linear-gradient(right, transparent, #fff 55%); 
background: linear-gradient(to right, transparent, #fff 55%);//背景色可写成渐变也可写成一样的颜色 
} 
}

原理是自己写一个… 放在最后一行的末尾。

四，在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

-webkit-appearance: none;

禁止保存或拷贝图像

img{-webkit-touch-callout: none;}

设置input里面placeholder字体的大小

::-webkit-input-placeholder{ font-size:10pt;}

快速回弹滚动，ios,overflow:auto，时系统效果

-webkit-overflow-scrolling: touch;

五，实际开发中也经常碰到 行高不精确的问题

设置line-height属性让文字垂直居中，发现在PC端肉眼观察是居中的，但是在移动端（Android）上总是发现文字偏上，
说是line-height对一部分Android手机不起作用，有自己默认的行高，默认行高为22px

line-height:normal; 
padding:10px 0; 

改用padding，为好。