高效前端編程實踐

時間 2019-11-22

標籤高效前端編程實踐简体版

原文原文鏈接

最近在閱讀《高效前端：Web高效編程與優化實踐》這本書，書中介紹了前端高效編程的優化實踐和前端基礎。本文將結合我的的理解介紹部分高效編程的例子。css

能用HTML/CSS解決的問題就不要用JS

自定義radio/checkbox的樣式

表單中原生的radio/checkbox的樣式各個瀏覽器都不太一致。要想統同樣式，一種作法是本身div/span去畫，而後去監聽單擊事件。這種作法就是邏輯控制徹底要本身寫，還有原生事件change也沒法使用。html

這裏能夠經過CSS提供僞類checked來實現自定義樣式。原理是把一個checkbox和一個用來自定義樣式的span寫在一個label裏面，checkbox始終隱藏。前端

<style> input[type=checkbox]{ display: none; } /*未選中的checkbox的樣式*/ .checkbox{ /* 實現略 */ } input[type=checkbox]:checked + .checkbox{ /* 實現略 */ } </style>
<label for="apple">
    <input type="checkbox" id="apple">
    <span class="checkbox"></span>
</label>
複製代碼

須要根據個數顯示不一樣樣式

有1~3個items要顯示在同一行，可是item的個數不必定，就一個的話item佔寬100%，兩個時各佔50%，三個時各佔33%。顯然你能夠用js來計算，可是這樣有點繁瑣。編程

咱們能夠經過CSS3的first-child和nth-last-child來實現個數的區分數組

<style> li { width: 100% } li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li{ width: 50% } li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li{ width: 33% } </style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
複製代碼

用CSS畫一個三角形

這個技巧應該是比較常見，經過把寬高設置爲0，同時只設置一個邊的border來畫三角形。下面提供一些其餘三角形畫法：瀏覽器

// 斜邊在左邊的三角形
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #000;

// 直角三角形
border-left: 60px solid transparent;
border-right: 0 solid transparent;
border-bottom: 40px solid #000;

// 等邊三角形
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-bottom: 40px solid #000;
複製代碼

減小前端代碼耦合

JS/CSS/HTML的耦合

不推薦直接在JS裏面更改樣式屬性，應該經過增刪類來控制樣式，除了scroll和mousemove緩存

策略模式

// common
function popCallback(popType){
    switch(popType){
        case: "favHouse":
            favHouse();
            break;
        case: "saveSearch":
            saveSearch();
            break;
    }
}
// strategy
var popCallback = {
    favHouse: function(){ /*do sth.*/ },
    saveSearch: function(){ /*do sth.*/ }
}
if(typeof popCallback[popType] === "function"){
    popCallback[popType]();
}
複製代碼

JS書寫優化

按強類型風格寫代碼

這邊其實也能夠在項目中靜態類型檢查器（Flow、TypeScript）來優化代碼。書中有介紹幾點還不錯建議：antd

定義變量的時候要指明類型

var num = 0,
    str = '',
    obj = null;
複製代碼

不要隨意改變變量的類型

// bad
var num = 5;
num = "-" + num;
// good 
var num = 5;
var sign = "-" + num;
複製代碼

函數的返回類型應該是肯定的

// bad
function getPrice(count){
    if(count < 0) return "";
    else return count * 100;
}
// good
function getPrice(count){
    if(count < 0) return -1;
    else return count * 100;
}
複製代碼

減小做用域查找

全局做用域比較複雜，因此查找屬性比較慢。局部做用的查找是很快的app

// bad
var url = "";
if(window.location.protocal === "https:"){
    url = "wss://xxx.com" + window.location.pathname + window.location.search;
}

// good 緩存成局部變量
var url = "";
var location = window.location;
if(location.protocal === "https:"){
    url = "wss://xxx.com" + location.pathname + location.search;
}
複製代碼

避免==的使用

咱們的代碼中應該避免==的使用，應該使用===，這樣能夠避免js類型轉換帶來的一些意外的結果。函數

==建議的使用場景是判斷變量是否爲空的時候，即if(obj == null)

使用ES6簡化代碼

使用箭頭函數取代小函數

var nums = [4, 8, 1, 9, 0];
nums.sort((a, b) => b - a);
複製代碼

字符串拼接

var tpl =
` <div> <span>1</span> </div> `;

var url = `/list?page=${page}&type=${type}`;
複製代碼

塊級做用域變量

var tasks = [];
for(let i = 0; i <= 4; i++){
    tasks.push(function(){
        console.log("i is " + i);
    });
}
for(var j = 0; j < tasks.length; j++){
    tasks[j]();
}
複製代碼