平時收集的一些前端開發技巧總結

萬奎發表於2019-03-23
前端

JS篇

  1. 函式防抖

函式防抖是指頻繁觸發的情況下，只有足夠的空閒時間，才執行程式碼一次
函式防抖的要點，也是需要一個setTimeout來輔助實現。延遲執行需要跑的程式碼。
如果方法多次觸發，則把上次記錄的延遲執行程式碼用clearTimeout清掉，重新開始。
如果計時完畢，沒有方法進來訪問觸發，則執行程式碼。

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

複製程式碼
  1. 函式節流

函式節流是指一定時間內js方法只跑一次
函式節流的要點是，宣告一個變數當標誌位，記錄當前程式碼是否在執行。
如果空閒，則可以正常觸發方法執行。 如果程式碼正在執行，則取消這次方法執行，直接return。

//函式節流
var canScroll = true;
document.getElementById('throttle').onScroll = function() {
    if (!canScroll) {
        return;
    }
    canScroll = false;
    setTimeout(function(){
       console.log('函式節流');
       canScroll = true;
    },300)       
}
複製程式碼
  1. 使用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 ]

複製程式碼
  1. 雙位運算子~~ 可以使用雙位操作符來替代 Math.floor( )
  2. 資料型別更優雅的強制轉換
//加法和減法運算子也可進行型別轉換。
var  str="87";+str;//隱式轉換為  number型別  87

//使用一次邏輯非運算子，流程是將值轉成布林值然後取反。而使用兩次邏輯非運算子就 是將值轉成成布林值取反再取反，相當於對值進行 Boolean()轉型函式處理。
var box = !!0; //false
複製程式碼
  1. 獲取制定範圍內的隨機數
var x = Math.floor(Math.random() * (max - min + 1)) + min;
複製程式碼
  1. 打亂數字陣列的順序
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function() { 
    return Math.random() - 0.5
});
複製程式碼
  1. 獲取陣列中的最大值和最小值
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;
}
複製程式碼
  1. 換行
//不換行
white-space:nowrap;

//自動換行
word-wrap: break-word; 
word-break: normal; 

//強制換行
word-break:break-all;
複製程式碼
  1. 使用 :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;
}
複製程式碼

持續更新~ 歡迎同行的小夥伴們留言補充~

相關文章