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

水杯中的大海發表於2019-02-16
在日常工作中，時常會碰到各種各樣的坑，有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠。學會時常總結，不斷提升自己。

本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對於該部分的理解，另一方面希望能夠分享給大家，知識在於分享，當然踩過的坑也不例外（滑稽）。

目錄

  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

相關文章