總結開發過程踩到的坑（一）

在平常工做中，時常會碰到各類各樣的坑，有時真的以爲不少時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，但願本身可以跨越重重阻礙，越走越遠。學會時常總結，不斷提高本身。

---

本文章旨在總結開發過程當中碰到的容易忘記或者比較重要的坑，一方面加深本身對於該部分的理解，另外一方面但願可以分享給你們，知識在於分享，固然踩過的坑也不例外（滑稽）。

目錄

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