| title | date | tags | categories |
|---|---|---|---|
记录一些有意思的问题（2） |
2020-07-01 08:32:39 -0700 |
前端 |
前端 |
另开一篇文章来记录学习和开发中遇到的需要注意和比较有意思的问题
#app {
height: calc(100vh - 40px);
}经过 Less 的编译，最后呈现出来的样式是
#app {
height: calc(60vh);
}Less 帮我们进行了数值计算，并保留了前者的单位 vh
涉及到数值计算的都会产生这个问题，比如书写媒体选择器viewport的宽高比等
官方提供了 Escaping 的特性，将属性当字符串用引号括起来，并在前面加上波浪符 ~，修改后的写法如下：
#app {
height: ~"calc(100vh - 40px)";
}
当我们处理多个promise时，尤其是当它们相互依赖时，记录每个事件在调试中发生的错误可能很有用。使用Promise.allSettled，它会创建一个新的promise，在所有promise完成后返回一个包含每个promise结果的数组
let a = new Promise((resolve,reject)=>{
//异步操作...
resolve({ code: 200,msg:"请求成功"})
})
let b = new Promise((resolve,reject)=>{
//异步操作...
resolve({ code: 200,msg:"请求成功"})
})
let c = new Promise((resolve,reject)=>{
//异步操作...
reject({ code: 500,msg:"服务器出现异常"})
})
//使用进行并发请求
Promise.allSettled([a, b, c]).then((data=>{
console.log(data,"data")
}))
// 返回的数据中 ，status: "fulfilled" 表示请求成功，status: "rejected" 表示请求失败Promise.allSettled跟Promise.all类似 都是进行并发请求，但是，我们在上面的两个例子中，显然是已经看到了他们的一些区别，在使用Promise.all进行并发请求的时候，只要有一个请求出现问题（异常），所有的请求正常的也都不能拿到数据，但是在我们的业务的开发中，我们需要保障我们业务的最大的可访问性，就是在我们执行并发任务中，不管我这个并发任务中的一任何个任务是正常还是异常，我们都需要拿到返回的对应的状态，在ES11中Promise.allSettled就为我们解决了这个问题，它和Promise.all类似,参数接受一个Promise的数组,返回一个新的Promise,也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。我们可以在then里面通过filter来过滤出想要的业务逻辑结果，这样就解决了Promise.all 的缺陷
虽然兼容性不咋地，但是在图森二面中被问到过
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)。例如：
#one { position: sticky; top: 10px; }在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
word-break:break-all
例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为congra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-wrap:break-word
例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
Android端是兼容以下两种日期格式的（yyyy-MM-dd HH:mm:ss、yyyy/MM/dd HH:mm:ss），所以在Android上允许以上代码是没有问题的。但是在iOS上只兼容（yyyy/MM/dd HH:mm:ss）格式，所以需要把yyyy-MM-dd HH:mm:ss转换为yyyy/MM/dd HH:mm:ss
可以使用.replace(/-/g,'/')进行处理
