2019年-前端日记
文档摘要
2019-04-02 Vue屏幕宽度自适应： 2019-04-07 控制iframe中的页面只显示一部分： 2019-04-09 上方代码转换的结果，单位是 ，不是秒。 2019-04-23 上方代码的打印结果均为true。 具体解释，可以看我在 这篇文章里讲到的转换为Boolean。 所以，我们平时在写业务代码的时候，“判断是否为空对象/空数组”，不能直接写成 或者 ，会踩坑。 判断是否为空数组，可以用： 判断是否为空对象，可以用 ： 2019-04-26 我们知道，在移动端页面尅发时，单位一般是采用 rem。 设计稿如果是750px宽，那么，默认换算的单位如下：16px = 1rem。但是这种换算比较麻烦。
2019-04-02
Vue屏幕宽度自适应：
https://blog.csdn.net/qq_25386583/article/details/77161478
https://blog.csdn.net/xuaner8786/article/details/81565219
2019-04-07
- 控制iframe中的页面只显示一部分：https://blog.csdn.net/iteye_18722/article/details/81918563
2019-04-09
Date.parse("2019/04/20 18:14:00")
上方代码转换的结果，单位是毫秒，不是秒。
2019-04-23
const a = []; const b = {}; console.log(Boolean(a)); console.log(Boolean(b));
上方代码的打印结果均为true。 具体解释，可以看我在 03-JavaScript基础/03-变量的强制类型转换.md这篇文章里讲到的转换为Boolean。
所以，我们平时在写业务代码的时候，“判断是否为空对象/空数组”，不能直接写成 if (myObj)或者if(myArray)，会踩坑。
判断是否为空数组，可以用：
if (myArray.length)
判断是否为空对象，可以用 ：
if (JSON.stringify(myObj) !== '{}')
2019-04-26
我们知道，在移动端页面尅发时，单位一般是采用 rem。
设计稿如果是750px宽，那么，默认换算的单位如下：16px = 1rem。但是这种换算比较麻烦。我们可以在 html里加上如下代码：
<style> html { font-size: 20px; font-size: 5.3333333vw; } </style>
这样的话，换算单位就变成了：20px = 1rem。
2019-05-16
最佳的打乱算法是Fisher-Yates算法。
2019-05-16
Vue的全局变量空间：this.$root.data，我们可以在这里面存放数据。比如this.$root.data.skuIdList。
2019-05-17
2019-05-20-css3动画水平/镜像翻转
参考链接1：https://www.oschina.net/question/2443483_247744
代码实现举例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style> @keyframes featuresicon { 0% { transform: scaleX(1); } 20% { transform: scaleX(1); } 50% { transform: scaleX(0); } 80% { transform: scaleX(1); } 100% { transform: scaleX(1); } } .cube { width: 40px; height: 40px; background: url(https://www.aiknowledge.cn/images/千古前端图文教程/bg2.png) left 0 no-repeat; animation: featuresicon 1.3s linear alternate none infinite; } body { background-color: cornflowerblue; } </style> </head> <body> <div class="cube"></div> </body> </html>
参考链接2：https://blog.csdn.net/wjnf012/article/details/78679131
代码实现：（立体感更强一点）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .cube{ display: block; color: #ffffff; text-align: center; width: 40px; height: 40px; border-radius: 4px; /* background-color: #9a6ad8 */ background: url(https://www.aiknowledge.cn/images/千古前端图文教程/bg.png) left 0 no-repeat; animation: proRotate 1.3s ease-in-out 500ms alternate none infinite; } @keyframes proRotate { 0%{transform:perspective(200px) rotateY(180deg);} 100%{transform:perspective(200px) rotateY(0deg);} } </style> </head> <body> <div class="test_wrap"> <div class="cube"></div> </div> <body> </html>
2019-05-22-判断字符串是否为纯中文
参考链接：https://blog.csdn.net/wozaixiaoximen/article/details/48340061
2019-05-24
- VScode代码格式化后不符合ESLint风格问题处理：https://blog.csdn.net/SilenceJude/article/details/81589784
2019-05-27-针对 text 文本的属性举例
&_promote { margin-left: 10px; display: inline-block; height: 20px; padding: 4px; line-height: 20px; background: #fff0f0; border-radius: 4px; font-size: 20px; color: #ff4142; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }
尤其要研究一下 vertical-align: middle;这个属性。
2019-06-11
已知某背景图片的尺寸是：586 * 931。现只截图图片的上面一部分区域（586 * 810）做展示。代码实现如下：
标签部分：
<div class="img"> </div>
css部分：（重点是 background 属性的写法）
.img{ width: 586rpx; height: 810rpx; background: url('https://img11.360buyimg.com/jdphoto/s586x931_jfs/t1/27766/15/3237/102443/5c258955Ee307620e/21a744b0d2e065b3.png') 0 0/cover no-repeat; margin: 0 auto; }
2019-08-25
使用hover为div添加边框时，页面布局发生错位的解决办法：https://blog.csdn.net/u014033756/article/details/51049574