Web/20-前端综合/2018年-前端日记.md
2018-12-20 21:08:55 +08:00

387 lines
10 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 2018年4月份
### 2018-04-25
- userAgent相关[判断微信内置浏览器的UserAgent](http://www.cnblogs.com/7z7chn/p/5370352.html)
### 2018-04-26
**前端相关**
- 流程图制作工具:[ProcessOn](https://www.processon.com/)
- api方法的浏览器兼容性问题可以在这个网站上看<https://caniuse.com/>
- CSS3的兼容性问题不一定要使用-webkit-, -moz-, -o-, -ms-等私有前缀。可以使用 PostCSS。[知乎](https://www.zhihu.com/question/20597072)
- 浏览器常见的内核有V8、WebKit。另外腾讯还有个[X5](http://x5.tencent.com/)。
- 要查一下display none 和 visibility hidden的区别。
- ES 的各个版本在 Node 环境下的支持情况,可以查看这个网站:<http://node.green/>
- promise的实现关键词Promises/A、Promises/B、[bluebird](https://github.com/petkaantonov/bluebird)
**综合**
- whistle安装证书后可以拦截 https 请求。但是,我现在又不想拦截了,该怎么卸载证书呢?
### 2018-04-27
- [strider](https://github.com/Strider-CD/strider):可以用来部署项目。
- 有必要了解一下电商1.0、电商2.0、电商3.0的概念。
### 2018-05-02
- `location.pathname`:获取 url 的后半部分。参考链接:[#](http://www.cnblogs.com/itjeff/p/4645262.html)
- 代码解读:`callback && callback()`的含义
### 2018-05-03
- 各种框架实现的todo项目<http://todomvc.com/>
- 对比 sass、less、stylus 这三个css预处理器zqc说后面两个已经不怎么用了。sass 比 less强大stylus的书写方式比较奇怪。
- npm命令中--save 和 --save-dev的区别。参考链接<http://pwcong.me/2017/01/05/npm%E5%BC%95%E5%85%A5%E6%A8%A1%E5%9D%97%E6%97%B6--save-%E4%B8%8E--save-dev-%E7%9A%84%E5%8C%BA%E5%88%AB/>
### 2018-05-07
- Vue组件的注册
有一种组件注册的方式是 Vue+jQuery
```javascript
Vue.component('my-div', $.extend({
props:[],
methods:{
},
filters:{
}
}), vueTpl.subs.myDiv)
```
根据 zqc 的建议,不一定要使用`$.extend()`,还可以使用`object.assign()`。
### 2018-05-08
- sku、spu的概念
### 2018-05-09
- 输入框正则的匹配
让输入框仅支持输入单个id且为字符串。如果输入多个id或者非数字的字符则自动删除
```javascript
v-on:keyup="querysku = querysku.replace(/\D/,'')"
```
### 2018-05-10
- 如果在控制台看到网络请求陈功数据也获取成功但是在ajax里走的是 error数据获取失败说明是 ajax代码的判断逻辑有问题。
- 服务器返回的json数据到底是对象还是字符串
- josn数据里的字段有顺序吗比如下面这段
```jsonn
{
"1492948848": {
"3": "1",
"spec": "",
"imagePath": "hehe.jpg",
"color": "橘色 ",
"name": "【多色可选】丽装铺园纯色百搭简约打底T恤女 橘色 M",
"size": "M"
},
"1492948847": {
"3": "1",
"spec": "",
"imagePath": "lala.jpg",
"color": "灰色 ",
"name": "【多色可选】丽装铺园纯色百搭简约打底T恤女 灰色 S",
"size": "S "
}
}
```
答案:顺序不重要。
- Vue开发中在其他地方用到Vue实例中的数据时一定要用this或者是`vm.$data.myName`之类的。
- 疑问下面的src路径的前面为何要加`//`
```
<img v-bind:src="'//img14.smyhvae.com/evalpic/s240x240_'+value.imagePath" />
```
我发现控制台看到的输出src中会自动加上http。如果前面不加`//`则表示相对路径。
### 2018-05-11
- 将逗号分隔的字符串,转换为数组: `str.split(",")`。即使数组中只有一个元素,也可以这样用。参考链接:[#](https://blog.csdn.net/erlian1992/article/details/50561452)
### 2018-05-14
- ajax发的是post请求但是后台却只收到了部分数据怎么办答案前端的post请求记得加content-type字段否则会被识别成 get 请求。
- 获取jsonp的数据只能用get请求。如果要用post请求那就传json数据另外可能还要解决跨域的问题。跨域需要在后台配置三行代码即可。
- p标签里的文字溢出怎么办
- whistle该怎样mock数据
### 2018-05-16
- 在控制台看标签的样式,发现有些样式是出现在`element.style`中的(比如图片的尺寸),但是在代码里并没有找到。那是因为,这些样式是在 js 代码中**计算**出来的。
- 图片自适应显示
- [视区相关单位vw, vh..简介以及可实际应用场景](http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/)
- jingwen推荐的iconMoon图标网站。网址<https://icomoon.io/>
### 2018-06-01
- `PingFangSC`字体是iOS独有的字体。`PingFangSC-Regular`是常规字体,`PingFangSC-Semibold`是加粗字体。如果我在代码里设置了这个字体那么ios上可以看到效果但是Android上看不到效果仍然会采用Android系统默认的字体。
### 2018-06-04
**1、git相关**
把 branch1 中的某条记录(比如myLog),提交到 branch2中。做法如下
先切换到branch2中然后输入如下命令
```
git cherry-pick myLog
```
### 2018-06-05
**1、font-size**
`font-size`的最小值为12。
也就是说浏览器的最小字体为12要是再小于这个值是不生效的。如果想要小于12需要在浏览器的高级设置里去修改。
**2、git 多分支同时开发**
现在有这样一个场景我要同时开发一个项目里的两个功能。今天上午开发功能1下午开发功能2。明天上午改功能1的bug明天下午改功能2的bug。
相当于是,我现在是**并行**开发两个功能了要怎么通过git来进行协作呢
目前考虑到的姣好的方式是:
- 从master拉分支`branch1`此分支专门用来开发功能1改功能1的bug。
- 再从master拉分支`branch2`此分支专门用来开发功能2改功能2的bug。
以后需要上线哪个功能就从那个分支merge代码到master。
**3、其他**
- 两个span之间默认有5px的 margin
- **shadow-root**:下一代。
### 2018-06-07
- [原生js实现淡入淡出效果](https://www.teakki.com/p/57dfb44cd3a7507f975e91e4)
- 通过 jQuery 获取Dom的时候比如`$('#topNavTop').css('background','red')`记得要指明是 id 还是 class。
- 每次开发一个新的需求记得要问清楚“H5和小程序”都要做吗要做的话工作量基本乘以2。
### 2018-06-14
- pv、uv的概念
### 2018-06-21
- 今天学会了 iPhone上WebApp的真机调试感觉很高端呀。具体可以看我在本文件夹中写的《前端开发积累》这篇文章。
### 2018-06-27
没想到,`''`和`' '`竟然还有区别。
### 2018-06-30
**并列条件**
来看下面这段代码:
```javascript
var num = 80;
console.log(50 < num <= 70);
```
上面的代码,你认为打印的结果是什么?其实,它打印的结果是 true。
如果我们要实现并列条件,千万不要使用 `if(50 < num < 70)`,而是要使用`if(num > 50 && num <=70)`。
### 2018-07-16
**FAQ问答系统**
FAQ是英文`Frequently Asked Questions`的缩写,中文意思就是“经常问到的问题”,或者更通俗地叫做“常见问题解答”。
### 2018-08-03
```javascript
let temp = 0.123;
let temp2 = temp.toFixed(2);
```
上方代码中,`temp2`的结果是0.12,但是请注意,`temp`的类型Number型而`temp2`的类型却是String型。
### 2018-08-15
flex布局常用的三行代码
```
display: flex;
justify-content: center; // 子元素在横轴的对齐方式 (左右居中)
align-items: center; // 子元素在竖轴的对齐方式(上下居中)
```
### 2018-08-16
用CSS3 transition属性实现淡入淡出轮播图<https://segmentfault.com/a/1190000007648070>
### 2018-08-20
**小程序问题**
用小程序调试时如果出现故障比如item点击无响应可能是微信开发者工具IDE的版本太低了。注意IDE上上虽然提示是最新版但不一定是官网的最新版。所以要去官网下载最新版。
如果还是不行,看看是不是自己的代码写错了。有时候,代码写错了,不一定会有报错提示哦。
**css问题**
- css3实现的switch开关按钮<https://codepen.io/chutou/pen/qdGZQr>
### 2018-08-22
**两个span之间去空格**
- html+css如何删除行内元素之间的空白/空隙:<http://www.manongjc.com/article/2171.html>
方法二亲测有效让父亲的font-size为0然后具体设置子元素的font-size
- 去除inline-block元素间间距的N种方法<https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/>
### 2018-08-28-修改用户的cookie
```
document.cookie="visitkey=98"
```
### 2018-09-20
需求:当导航条滚动到屏幕顶部时(举例顶部的距离 < 0时就设置导航条为fixed
实现如果要设置为导航条为fixed正确的做法应该是给导航条这个父亲一个高度进行占位然后让导航条的儿子为fixed而不是让父亲为 fixed
### 2018-09-27
如何让微信小程序禁止下拉_解决小程序下拉出现空白的情况http://www.fly63.com/article/detial/1069
我遇到问题的原因是背景图太大超出了视图
### 2018-10-12
小程序代码中如果我这样写view的度样式
```
height: 60rpx;
line-height: 1.5rem;
```
上面的这种写法并不会让里面的文字上下居中我在 iPhone 7 plus 中看到的结果是文字偏上移
正确的做法是单位一致用rpx不要把两个单位混用
```
height: 60rpx;
line-height: 60rpx;
```
### 2018-10-21
时间戳和年月日的转换<https://blog.csdn.net/qq_26747571/article/details/53289120?locationNum=10&fps=1>
### 2018-11-28
css实现圆环进度条<https://blog.csdn.net/wanglei1991gao/article/details/80009252>
### 2018-12-13
对象数组通过对象的属性进行排序:<https://blog.csdn.net/xiaobing_hope/article/details/68638706>