总结开发过程踩到的坑（一）

在平常工做中，时常会碰到各类各样的坑，有时真的以为不少时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，但愿本身可以跨越重重阻碍，越走越远。学会时常总结，不断提高本身。

---

本文章旨在总结开发过程当中碰到的容易忘记或者比较重要的坑，一方面加深本身对于该部分的理解，另外一方面但愿可以分享给你们，知识在于分享，固然踩过的坑也不例外（滑稽）。

目录

1. margin 重叠问题
2. placeholder 自定义样式
3. 伪类和伪元素
4. title 超出省略
5. scroll 自定义样式
6. sticky 定位
7. 配置 swiper
8. 移动端键盘遮挡问题
9. 异步回调解决方案

1. margin 重叠问题

这是一个比较常见的常常在开发中碰到的问题，这里就很少说了，常看法决办法：

1. 建立新的 BFC 如 overflow: hidden;
2. 使用 padding
3. 尽可能使用同一方向的 margin

2. placeholder 自定义样式

以前开发项目中碰到的需求，兼容写法以下：

/* IE 9 及如下版本不支持 */
input:-ms-input-placeholder {

}
input:-moz-placeholder {

}
input::-moz-placeholder {

}
input::-webkit-input-placeholder {

}

3. 伪类和伪元素

这二者很容易混淆，说的简单的一点，二者的区别在于：

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

4. title 超出省略

在移动端标题超出部分仍是比较常见的，兼容性也 ok：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

5. scroll 自定义样式

/* Chrome */
::-webkit-scrollbar    //滚动条总体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面能够拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

/* IE */
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;

Chrome 几乎能够完整修改 scrollbar 样式，可是 IE 比较有局限性，只能修改颜色，若是想要完美兼容，那么只能本身模拟实现一个 scrollbar 了。

6. sticky 定位

粘性定位，是一个比较有趣的 CSS3 属性，粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，以后为固定定位。

实例 demo : 粘性定位

7. 配置 Swiper

Swiper 是一个使用率很高的插件，这里说一些比较陌生的属性与方法：

//活动块居中
centeredSlides: true,
//触摸距离与 slide 滑动距离的比率
touchRatio: 0.5,
//当 swiper 样式或者子元素改变时，会自动初始化 swiper ，默认 false
observer: true,
//swiper从当前slide开始过渡到另外一个slide时执行。触摸状况下，若是释放slide时没有达到过渡条件而回弹时不会触发这个函数
onSlideChangeStart: function(swiper) {
    //获取当前索引
    console.log(swiper.realIndex);
},
//回调函数，当你轻触(tap)Swiper后执行。
onTap: function(swiper) {
    //获取 tap 索引
    mySwiper.slideTo(swiper.clickedIndex);
}

8. 移动端键盘遮挡问题

有些时候，如：须要将某一 button 固定到屏幕底部，这个时候若是弹出键盘，那么 button 则会跟着跑到键盘上面（不管是 absolute 仍是 fixed），因此能够在 focus 的时候，隐藏 button，而在 blur 的时候显示 button ，可是这时有一个问题：在安卓手机上没有问题，收起键盘能够出发 blur 事件，可是 IOS 端则没有触发，因此解决办法是，能够改用 resize 事件替代 blur 事件。

9. 异步回调解决方案

异步处理一直以来都是 js 极其重要的一部分，这里暂不提框架，原始的异步处理通常是：

建立异步对象XMLHttpRequest。
设置请求参数（请求方式，请求资源的相对路径，是否异步）。
设置回调函数，用来处理服务器响应，使用onreadystatechange。
获取异步对象的readyState属性，根据服务器返回状态信息判断是否请求成功。

若是存在多个请求，且数据相互有依赖关系的话，代码写起来会比较复杂，看起来杂乱无章，同时不利于后期维护。在 ES6 中，提出了 Promise 的概念，给出了异步回调的解决方案：

var task = new Promise(function(resolve, reject) {
 if (/* 异步操做成功 */){
     resolve(result);
 } else {
     reject(error);
 }
});

task.then(function(response) {
 // success
}, function(error) {
 // fail
});

能够看出，使用 Promise 能够经过链式调用避免了层层嵌套，同时便于代码阅读和理解。

参考文献

1. 详解 CSS 属性 - 伪类和伪元素的区别
2. CSS | MDN