mirror of
https://github.com/qianguyihao/Web.git
synced 2024-11-01 21:44:45 +08:00
385 lines
10 KiB
JavaScript
385 lines
10 KiB
JavaScript
|
|
|||
|
|
## 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>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|