2019年度前端知識點總結

本文旨在整理和記錄 2019年度 從事前端工作的過程中遇到的問題以及解決問題的思路。內容偏新手且敘述不深，整理的目的是為了方便以後快速查閱之前遇到過的問題。

Vue或者React框架使用過程中的筆記

改變父組件標簽上屬性綁定值的方式

• 方式一 普遍做法，通過在標簽上綁定一個事件，在子組件上調用$emit觸發該事件進而改變屬性值
• 方式二 藉助.sync修飾符 這種方式無需再綁定事件
  • 父組件 :msg.sync = "msg"
  • 子組件 this.$emit('update:msg', '傳遞的值')
  • 不能接受表達式和字面量對象

v-model 幾個實用的修飾符

• lazy 將雙向綁定的input事件變成change事件
• trim 自動過濾首位空白字元
• number 將輸入值轉為數值類型

插槽用法

• <slot>後備內容</slot>
• 具名插槽 用 v-slot:default 綁定，必須用在 <template> 上，如果只有default則可以用在其他標簽上
• 作用域插槽（讓插槽內部訪問子組件數據）

  子組件：<slot :user="user"></slot>
  父組件：<template v-slot:default="slotProps"/> 通過 slotProps.user 獲取，
  也可以使用 ES6 解構語法 {user} / {user: 別名}
  

動態的綁定標簽特性

<a v-bind:[dataAttr]="url"></a>
...
data: {
    dataAttr: 'href'
}

ES6常用語法

Promise的基本用法

var p = new Promise((resolve, reject) => {
    //new 後立即執行的操作
    resolve() //非同步執行成功後要進行的操作，在then中進行
    reject()//非同步執行失敗後要進行的操作，在catch中進行
})
p.then().catch().finally()
Promise.all([p1, p2, p3]).then().catch() //全部拿到結果後再執行
Promise.race([p1, p2, p3]).then().catch() //有一個拿到結果就執行

export 與 export default

• 參考這個

js技巧

對象拷貝

• 深拷貝
  • JSON.parse(JSON.stringify(obj)) 對象包含可序列化值並且沒有迴圈引用時有效
• 淺拷貝
  • {...obj}
  • Object.assign({}, obj) 拷貝的僅為對象的指針

對URI編碼和解碼

• encodeURI()、decodeURI()
• encodeURIComponent()、decodeURIComponent() 可對特殊字元如#，/，￥等起作用
• 註意當使用瀏覽器地址傳參數時（如路由跳轉時），如果參數中有中文，需要使用 encodeURIComponent() 編碼，因為瀏覽器url會自動解碼一次所以需要編碼兩次才能生效：encodeURIComponent(encodeURIComponent(url))

toFixed 出現無限迴圈小數

• Math.floor(xx * 100) / 100
• xx.toString().match(/^\d+(?:\.\d{0, 2})?/)[0]

CSS技巧

flex流佈局

• 項目開發中經常用到的佈局，推薦參考 阮一峰老師的教程，非常詳細。

選擇器優先順序

• 參考

文本內容超出容器顯示省略號

• 單行文本

  #content{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  

• 多行文本（背景顏色設為transparent）

  #content{
      position: relative;
      overflow: hidden;
  }
  #content::after{
      content: '...';
      position: absolute;
      bottom: 0;
      right: 0;
  }
  

消除img標簽中的圖片為空時的邊框

img[src=""], img:not([src]){
    opacity: 0;
}

製作一個表頭固定 表體滾動的表格（需設置高、寬）

• thead, tr 設置 display: table; table-layout: fixed;
• tbody 設置 display: block; overflow-y: scroll;

子元素設置浮動後父元素設置 height: auto 無效

.parent::after{
    content: "";
    display: table;
    clear: both;
}

BFC（塊格式化上下文）

• 參考這篇文章 什麼是BFC？看這一篇就夠了
• 上面這個例子(子元素設置浮動後父元素設置 height: auto 無效)就是創造了BFC
• 如何創建BFC
  • float的值不是none
  • position的值不是static或者relative
  • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow的值不是visible

設置圖片寬高為相對百分比的情況下讓寬高相等

.parent{
    position: relative;
    height: 0;
    padding-bottom: 100%;
}
.child{
    width: 100%;
    height: 100%;
    position: absolute;
}

設置圖片的填充方式和位置

• object-fit: fill/cover.contain/scale-down 參考
• object-position: 值或者方向詞 參考

在less/scss中使用calc()無效

//less中加上~轉譯符號
height: calc(~"100vh-200px")
//scss中使用插值#{}
height: calc(100% - #{$var})

常用庫問題集錦

ElementUI

AntDesign

Echarts

Axios

• 利用 qs 庫序列化請求參數

qs.stringify({ids: [1, 2, 3]}, { indices: false })
 //形式： ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'indices'})
 //形式： ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'brackets'})
 //形式：ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'repeat'}) 
//形式： ids=1&ids=2&id=3

• 參考封裝：

import axios from 'axios'
import qs from 'qs'
import {message} from 'antd'

axios.defaults.baseURL = 'http://XXX/'

axios.defaults.withCredentials = true //設置為true 可以讓請求帶上cookie中的值，用於獲取登錄狀態的SESSION

axios.interceptors.request.use(function (config) {
    // 判斷請求的類型
    // 如果是post請求就把預設參數拼到data裡面
    // 如果是get請求就拼到params裡面
    if (config.method === 'post' || config.method === 'put') {
        let data = qs.parse(config.data)
        config.params = {
            ...config.params
        }
        config.data = qs.stringify({
            ...data
        }, {
            arrayFormat: 'brackets'
        })
    }
    return config
}, function (error) {
    return Promise.reject(error)
})

axios.interceptors.response.use((res) => {
    //對響應數據做些事
    // if (res.config.method === 'get') {
    //     return res
    // }
    if (res.data.code === '0000') {
        // if (res.config.method === 'post') {
            return res.data.data
        // }
    } else if (res.data.statusCode === 304) {
        window.location.href = '/#/login'
    } else {
        return Promise.reject(res.data.message)
    }
}, (error) => {
    return Promise.reject('請求異常')
})

function request(params){
    return new Promise((resolve, reject) => {
        axios({
            url: params.url || '',
            method: params.method || 'post',
            params: params.params || {},
            data: params.data || {},
            headers: {
                'Content-Type': params.contentType || 'application/x-www-form-urlencoded'
            },
            paramsSerializer: function (param) {
                return qs.stringify(param, {
                    arrayFormat: 'repeat'
                })
            },
        }).then(res => {
            resolve(res)
        }).catch(err => {
            console.log(err)
            message.error(err || '出問題')
            reject(err)
        })
    })
}

export default request

操作DOM

• DOM.getBoundingClientRect().bottom 獲取DOM元素相對於可視頁面底部的距離
• 註意：元素的 offsetTop、offsetLeft 的值是根據css定位來的，預設是相對 body，出現 relative 會改變這種行為，利用 offsetParent 可查看父元素
• DOMid.scrollTop = DOMid.scrollHeight 可以讓元素滾動到最底部
• 一個高度自適應內容且高度有最大值的的textarea

<textarea rows="1" className="input-msg" value={currentContent} type="text" onChange={(e) => setCurrentContent(e.target.value)} onInput={autoTextAreaHeight} onBlur={handleBlur}></textarea>

const autoTextAreaHeight = (e) => {
    if (e.target.scrollHeight <= 90) {
        e.target.style.height = 'auto'
        e.target.style.height = e.target.scrollHeight + "px"
    }
}
const handleBlur = () => {
    //解決IOS失焦事件先於click事件導致click事件無效
    setTimeout(() => {
        window.scroll(0, 0)
    }, 0)
}
//css
// resize: none;

web端與移動端的相容性

其他

• localStorage 只能存儲字元串，存儲數組對象需要用JSON轉換
• momentJS 配置成中文 moment.locale('zh-cn', xxx) xxx是中文配置
• ['a']=='a' 為true
• typeof([]) = 'object'
• 跳過ESlint檢測

/*eslint-disable*/
...
/*eslint-enable*/

結束語

暫時就這麼點了，有什麼遺漏的以後再補充。