国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

總結(jié)開發(fā)過程踩到的坑（一）

callmewhy / 2608人閱讀

摘要：觸摸情況下，如果釋放時(shí)沒有達(dá)到過渡條件而回彈時(shí)不會(huì)觸發(fā)這個(gè)函數(shù)獲取當(dāng)前索引回調(diào)函數(shù)，當(dāng)你輕觸后執(zhí)行。設(shè)置回調(diào)函數(shù)，用來處理服務(wù)器響應(yīng)，使用。

在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。

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

目錄

margin 重疊問題

placeholder 自定義樣式

偽類和偽元素

title 超出省略

scroll 自定義樣式

sticky 定位

配置 swiper

移動(dòng)端鍵盤遮擋問題

異步回調(diào)解決方案

1. margin 重疊問題

這是一個(gè)比較常見的經(jīng)常在開發(fā)中碰到的問題，這里就不多說了，常見解決辦法：

1. 創(chuàng)建新的 BFC 如 overflow: hidden;
2. 使用 padding
3. 盡量使用同一方向的 margin
2. placeholder 自定義樣式

之前開發(fā)項(xiàng)目中碰到的需求，兼容寫法如下：

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

}
input:-moz-placeholder {

}
input::-moz-placeholder {

}
input::-webkit-input-placeholder {

}
3. 偽類和偽元素

這兩者很容易混淆，說的簡(jiǎn)單的一點(diǎn)，兩者的區(qū)別在于：

CSS 偽類用于向某些選擇器添加特殊的效果。
CSS 偽元素用于將特殊的效果添加到某些選擇器。
4. title 超出省略

在移動(dòng)端標(biāo)題超出部分還是比較常見的，兼容性也 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    //滾動(dòng)條整體部分
::-webkit-scrollbar-button   //滾動(dòng)條兩端的按鈕
::-webkit-scrollbar-track   // 外層軌道
::-webkit-scrollbar-track-piece    //內(nèi)層軌道，滾動(dòng)條中間部分（除去）
::-webkit-scrollbar-thumb //滾動(dòng)條里面可以拖動(dòng)的那個(gè)
::-webkit-scrollbar-corner   //邊角
::-webkit-resizer   ///定義右下角拖動(dòng)塊的樣式

/* 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 比較有局限性，只能修改顏色，如果想要完美兼容，那么只能自己模擬實(shí)現(xiàn)一個(gè) scrollbar 了。

6. sticky 定位

粘性定位，是一個(gè)比較有趣的 CSS3 屬性，粘性定位是相對(duì)定位和固定定位的混合。元素在跨越特定閾值前為相對(duì)定位，之后為固定定位。

實(shí)例 demo : 粘性定位

7. 配置 Swiper

Swiper 是一個(gè)使用率很高的插件，這里說一些比較陌生的屬性與方法：

//活動(dòng)塊居中
centeredSlides: true,
//觸摸距離與 slide 滑動(dòng)距離的比率
touchRatio: 0.5,
//當(dāng) swiper 樣式或者子元素改變時(shí)，會(huì)自動(dòng)初始化 swiper ，默認(rèn) false
observer: true,
//swiper從當(dāng)前slide開始過渡到另一個(gè)slide時(shí)執(zhí)行。觸摸情況下，如果釋放slide時(shí)沒有達(dá)到過渡條件而回彈時(shí)不會(huì)觸發(fā)這個(gè)函數(shù)
onSlideChangeStart: function(swiper) {
    //獲取當(dāng)前索引
    console.log(swiper.realIndex);
},
//回調(diào)函數(shù)，當(dāng)你輕觸(tap)Swiper后執(zhí)行。
onTap: function(swiper) {
    //獲取 tap 索引
    mySwiper.slideTo(swiper.clickedIndex);
}
8. 移動(dòng)端鍵盤遮擋問題

有些時(shí)候，如：需要將某一 button 固定到屏幕底部，這個(gè)時(shí)候如果彈出鍵盤，那么 button 則會(huì)跟著跑到鍵盤上面（無論是 absolute 還是 fixed），所以可以在 focus 的時(shí)候，隱藏 button，而在 blur 的時(shí)候顯示 button ，但是這時(shí)有一個(gè)問題：在安卓手機(jī)上沒有問題，收起鍵盤可以出發(fā) blur 事件，但是 IOS 端則沒有觸發(fā)，所以解決辦法是，可以改用 resize 事件替代 blur 事件。

9. 異步回調(diào)解決方案

異步處理一直以來都是 js 極其重要的一部分，這里暫不提框架，原始的異步處理一般是：

創(chuàng)建異步對(duì)象XMLHttpRequest。
設(shè)置請(qǐng)求參數(shù)（請(qǐng)求方式，請(qǐng)求資源的相對(duì)路徑，是否異步）。
設(shè)置回調(diào)函數(shù)，用來處理服務(wù)器響應(yīng)，使用onreadystatechange。
獲取異步對(duì)象的readyState屬性，根據(jù)服務(wù)器返回狀態(tài)信息判斷是否請(qǐng)求成功。

如果存在多個(gè)請(qǐng)求，且數(shù)據(jù)相互有依賴關(guān)系的話，代碼寫起來會(huì)比較復(fù)雜，看起來雜亂無章，同時(shí)不利于后期維護(hù)。在 ES6 中，提出了 Promise 的概念，給出了異步回調(diào)的解決方案：

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

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

可以看出，使用 Promise 可以通過鏈?zhǔn)秸{(diào)用避免了層層嵌套，同時(shí)便于代碼閱讀和理解。

參考文獻(xiàn)

詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

CSS | MDN

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92695.html

相關(guān)文章

  • 總結(jié)開發(fā)過程踩到的坑（二）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的...

    laznrbfe 評(píng)論0 收藏0

  • 總結(jié)開發(fā)過程踩到的坑（三）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

    April 評(píng)論0 收藏0

  • 總結(jié)開發(fā)過程踩到的坑（三）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

    daryl 評(píng)論0 收藏0

  • 總結(jié)開發(fā)過程踩到的坑（三）

    摘要：本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，一方面加深自己對(duì)于該部分的理解，另一方面希望能夠分享給大家，知識(shí)在于分享，當(dāng)然踩過的坑也不例外滑稽。 在日常工作中，時(shí)常會(huì)碰到各種各樣的坑，有時(shí)真的覺得很多時(shí)候開發(fā)的經(jīng)驗(yàn)都是踩坑踩出來的。在通往大牛的道路上，希望自己能夠跨越重重阻礙，越走越遠(yuǎn)。學(xué)會(huì)時(shí)常總結(jié)，不斷提升自己。 本文章旨在總結(jié)開發(fā)過程中碰到的容易忘記或者比較重要的坑，...

    youkede 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<