平时收集的一些前端开发技巧总结

JS篇

1. 函数防抖

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次
函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
如果计时完毕，没有方法进来访问触发，则执行代码。

//函数防抖
var timer = false
document.getElementById("debounce").onScroll = function() {
    clearTimeout(timer)  
    timer = setTimeout(function(){
        console.log("函数防抖") 
    }, 300)     
}

复制代码

2. 函数节流

函数节流是指一定时间内js方法只跑一次
函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
如果空闲，则可以正常触发方法执行。 如果代码正在执行，则取消这次方法执行，直接return。

//函数节流
var canScroll = true;
document.getElementById('throttle').onScroll = function() {
    if (!canScroll) {
        return;
    }
    canScroll = false;
    setTimeout(function(){
       console.log('函数节流');
       canScroll = true;
    },300)       
}
复制代码

3. 使用Boolean过滤数组中的所有假值

const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])             // [ 1, 2, 3, 'a', 's', 34 ]

复制代码

4. 双位运算符~~ 可以使用双位操作符来替代 Math.floor( )
5. 数据类型更优雅的强制转换

//加法和减法运算符也可进行类型转换。
var  str="87";+str;//隐式转换为  number类型  87

//使用一次逻辑非运算符，流程是将值转成布尔值然后取反。而使用两次逻辑非运算符就 是将值转成成布尔值取反再取反，相当于对值进行 Boolean()转型函数处理。
var box = !!0; //false
复制代码

6. 获取制定范围内的随机数

var x = Math.floor(Math.random() * (max - min + 1)) + min;
复制代码

7. 打乱数字数组的顺序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function() { 
    return Math.random() - 0.5
});
复制代码

8. 获取数组中的最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);
复制代码

CSS篇

1. 清除浮动

.clearfix:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
复制代码

2. 换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;
复制代码

3. 使用 :not() 来精简css代码

// 不使用:not()
.nav li {
  border-right: 1px solid #666;
}
.nav li:last-child {
  border-right: none;
}

// 使用:not()
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

// 或者使用兄弟选择符~
.nav li:first-child ~ li {
  border-left: 1px solid #666;
}
复制代码

持续更新~ 欢迎同行的小伙伴们留言补充~