update
This commit is contained in:
qianguyihao
@@ -42,6 +42,14 @@
|
||||
|
||||
非常详细和贴心，你值得star。
|
||||
|
||||
## 学习交流
|
||||
|
||||
我建了一个“前端学习”的微信交流群，目前来看，学习氛围很不错。加我微信（bootmei），拉你进群：
|
||||
|
||||
- 进群暗号：前端学习。
|
||||
|
||||
- 进群要求：少提问、少闲聊、多分享（长期潜水的，就不必了）。
|
||||
|
||||
## 推荐的技术博客
|
||||
|
||||
- [阮一峰](http://www.ruanyifeng.com/blog/)
|
||||
|
||||
@@ -56,7 +56,9 @@
|
||||
|
||||
- GitHub 全球排名：<https://gitstar-ranking.com/>
|
||||
|
||||
- GitHub trending（官网推荐—）：<https://github.com/trending>
|
||||
这个排名很权威。如果你的项目超过 10k star，就能上榜，跻身全球 GitHub 项目前1000名。
|
||||
|
||||
- GitHub trending（官网推荐）：<https://github.com/trending>
|
||||
|
||||
你的项目要是能上 GitHub trending，绝对火得一塌糊涂。
|
||||
|
||||
|
||||
@@ -66,11 +66,178 @@ if (JSON.stringify(myObj) !== '{}')
|
||||
|
||||
|
||||
|
||||
### 2019-05-16
|
||||
|
||||
- 数组随机打乱顺序：<https://www.zhihu.com/question/68330851/answer/262111061>
|
||||
|
||||
最佳的打乱算法是Fisher-Yates算法。
|
||||
|
||||
|
||||
### 2019-05-16
|
||||
|
||||
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)` 和
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user