脚本宝典收集整理的这篇文章主要介绍了

总结开发过程踩到的坑(一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远。学会时常总结,不断提升自己。


本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自己对于该部分的理解,另一方面希望能够分享给大家,知识在于分享,当然踩过的坑也不例外(滑稽)。

目录

  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

总结

以上是脚本宝典为你收集整理的

总结开发过程踩到的坑(一)

全部内容,希望文章能够帮你解决

总结开发过程踩到的坑(一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过