Web/17-前端综合/2019年-前端日记.md

244 lines
4.6 KiB
Markdown
Raw Normal View History

2019-04-05 14:32:05 +08:00
### 2019-04-02
Vue屏幕宽度自适应
<https://blog.csdn.net/qq_25386583/article/details/77161478>
<https://blog.csdn.net/xuaner8786/article/details/81565219>
2019-04-12 22:45:11 +08:00
### 2019-04-07
- 控制iframe中的页面只显示一部分<https://blog.csdn.net/iteye_18722/article/details/81918563>
### 2019-04-09
```javascript
Date.parse("2019/04/20 18:14:00")
```
上方代码转换的结果,单位是`毫秒`,不是秒。
2019-04-25 11:23:17 +08:00
### 2019-04-23
2019-04-12 22:45:11 +08:00
2019-04-25 11:23:17 +08:00
```javascript
const a = [];
const b = {};
console.log(Boolean(a));
console.log(Boolean(b));
```
上方代码的打印结果均为true。 具体解释,可以看我在 `03-JavaScript基础/03-变量的强制类型转换.md`这篇文章里讲到的**转换为Boolean**。
2019-04-05 14:32:05 +08:00
2019-04-25 11:23:17 +08:00
所以,我们平时在写业务代码的时候,“判断是否为空对象/空数组”,不能直接写成 `if (myObj)`或者`if(myArray)`,会踩坑。
2019-04-05 14:32:05 +08:00
2019-04-25 11:23:17 +08:00
判断不否为空数组,可以用:
2019-04-05 14:32:05 +08:00
2019-04-25 11:23:17 +08:00
```javascript
if (myArray.length)
```
2019-04-05 14:32:05 +08:00
2019-04-25 11:23:17 +08:00
判断不为空对象,可以用
```javascript
if (JSON.stringify(myObj) !== '{}')
2019-04-28 12:52:06 +08:00
```
### 2019-04-26
我们知道,在移动端页面尅发时,单位一般是采用 rem。
设计稿如果是750px宽那么默认换算的单位如下**16px = 1rem**。但是这种换算比较麻烦。我们可以在 html里加上如下代码
```html
<style>
html {
font-size: 20px;
font-size: 5.3333333vw;
}
</style>
```
这样的话,换算单位就变成了:**20px = 1rem**。
2019-06-01 19:04:38 +08:00
### 2019-05-16
2019-04-28 12:52:06 +08:00
2019-06-01 19:04:38 +08:00
- 数组随机打乱顺序:<https://www.zhihu.com/question/68330851/answer/262111061>
2019-04-28 12:52:06 +08:00
2019-06-01 19:04:38 +08:00
最佳的打乱算法是Fisher-Yates算法。
2019-04-28 12:52:06 +08:00
2019-06-01 19:04:38 +08:00
### 2019-05-16
2019-04-28 12:52:06 +08:00
2019-06-01 19:04:38 +08:00
Vue的全局变量空间`this.$root.data`,我们可以在这里面存放数据。比如`this.$root.data.skuIdList`。
### 2019-05-17
- css 动画实现闪烁效果:<https://blog.csdn.net/wangxiuyan0228/article/details/80701523>
### 2019-05-20
**数组赋值的正确写法**
```javascript
this.todayList.splice(0, 0, ...dataList);
```
**对象赋值的正确写法**
```javascript
Object.assign(this.dataObj, dataObj);
```
上方代码中,是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同,会被覆盖。
### 2019-05-20-css3动画水平/镜像翻转
参考链接1<https://www.oschina.net/question/2443483_247744>
代码实现举例:
```html
<!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(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>
代码实现:(立体感更强一点)
```html
<!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(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 文本的属性举例
```css
&_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-05-30
`arr1.push(arr2)`
2019-04-28 12:52:06 +08:00