又是一波前端知識點總結

時間 2019-11-10

標籤又是前端知識總結简体版

原文原文鏈接

總結的點都雜七雜八，希望能找到對你有所幫助的，沒有的也不要緊嘛！😄

1. vue強制渲染某個組件

$forceupdate 使 Vue 實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。

因爲某些場景 $forceupdate 不起做用，因此用下面的hack方法。通常來講，這種強制渲染某個組件的狀況很少，在組件內部應該處理好內部的渲染。
這個例子仍是由於使用某個庫後發現了一個bug，後面纔想到如下hack方法的。css

<my-comp v-if="show"></my-comp>
<script>
data() {
    return {
        show: true
    }
},
methods: {
    reRender() {
        this.show = false
        this.$nextTick(() => {
            this.show = true
        })
    }
}
</script>

必須用v-if，v-show不行
在$nextTick回調中從新賦值，不然vue會忽略show的第一次賦值

2. vue裏的ref和v-for一塊兒使用時，獲得的引用將會是一個包含了對應數據源的這些子組件的數組

當 ref 和 v-for 一塊兒使用的時候，你獲得的引用將會是一個包含了對應數據源的這些子組件的數組。

<div v-for="item in list" :ref="item.code" @click="handleClick(item.code)">{{item.title}}</div>

handleClick(code) {
   ~~let dom = this.$refs[code]~~ // 錯誤的寫法
    let dom = this.$refs[code][0]
}

vue的一些api在特殊狀況下會出現不一致的狀況，這點比較蛋疼，須要對文檔比較熟悉。html

3. Gitlab不只僅能夠做爲代碼倉庫，還能夠做爲項目管理工具，經過標籤，里程碑，提交歷史，代碼審覈流程等。

之後在公司裏，若是作項目管理或者code review均可以用gitlab來作。前端

4. css 背景圖片background-size的幾種適用範圍

css 背景圖片background-size的幾種適用範圍vue

5. 做爲TL，安排工做計劃，協調各類資源也是須要花費時間的，這些時間須要考慮在內，必然會減小編寫代碼的時間。這一點要清楚。

6. 怎麼評估工期

需求很是明確並且常常這樣作：本身評估時間 * 1.5
需求不夠清晰，有可能變，可是代碼和技術方案熟悉：本身評估的時間 * 2
需求不夠清晰，代碼和技術方案也是新的，須要探索：本身評估的時間 * 2.5 or 3

本身評估的時間通常會留點 buffer，自我感受應該沒問題，實際上開發過程可能會有各類會議、需求和技術方案變動或者突發事件。因此多留一點 buffer 會更好，由於這個時間點多是下游運營活動上線時間點，評估後業務方以爲太長能夠砍需求拆成兩期或者調整上線預期，但一旦設置了時間點，不該該跳票。若是你比預期早完成上線，皆大歡喜，若是你一次次的告知業務方還須要延期一兩天，效果正好相反。

7. 無縫滾動組件

無縫滾動組件git

8. 前端的工做要緊密結合產品和ui，整個前端展示出來的效果是三者相互合做創造出來的，而不是某一方。前端的一部分價值不只僅體如今寫代碼上面，還體如今和ui，產品共同創造好的界面和交互效果。

9. 軟件具備熵增的特性（體系老是自發地像混亂度增大的方向變化），長期維護的項目總會遇到可維護性逐漸下降的問題。

10. 代碼風格統一工具

使用 editorconfig 協助兼容開發工具的代碼格式化。
使用 eslint 檢查代碼。
使用 prettier 格式化代碼。（能夠理解爲prettier是 eslint —fix 的增強版，用 prettier 來代替 eslint-fix）
手動修改剩下的有問題的地方，或者有些地方很難用規則來判斷的時候，就須要手動修改。

11. 使用husky和prettier統一代碼風格

npm install --save-dev prettier pretty-quick husky

package.json裏配置github

"husky": {
    "hooks": {
        "pre-commit": "pretty-quick --staged"
    }
},

須要注意的事，安裝包以後，package-lock.json也須要提交commit，不然hooks不會執行（不知道爲何）!vue-cli

12. 使用.editorconfig，必定要用indent_style = space，若是用tab，無論怎麼設置編輯器，tab都爲4

13. 提升團隊代碼質量的想法

code review 要更加仔細，保證每一個人的代碼質量，哪怕進度慢一點（同時，本身寫代碼的時間減小了，可是這樣是值得的，若是隻是本身寫代碼，只能保證本身的代碼，可是code review能幫你們的代碼都提升，團隊共同提升的效益確定比本身一我的要大）
在code review 發現的問題，在會議上提出來，讓你們商量解決辦法，同時避免之後出現相同的問題，這樣你們的代碼質量都能提升
目前的問題：

你們會寫大量重複的代碼，不論是js仍是css，碰到兩處以上會調用的代碼，應該要封裝起來
變量命名不按照規範，而且不注意語義化。代碼不只僅是寫給計算機執行的，同時是寫給人看的，最要命的是給別人看。好的代碼，一看變量，就大概知道這個變量是幹嗎的，或者方法是幹什麼的，而很差的變量命名只會讓程序出現歧義
寫代碼不注意代碼量，一寫千里，一個單文件組件能寫到2000行，方法的行數也要注意。這裏建議：單文件組件行數不大於1000，超出應該要拆分出來；方法行數不能超出100行，超出拆分
多個if else 應該用switch，看起來更舒服，邏輯更清晰
拼接字符串儘可能用模版字符串語法
不要使用 var 定義變量（用eslint控制）
data 方法裏不要的變量定義儘可能精簡；若是是模板裏沒有使用，不須要在data裏定義，能夠直接掛在vue實例上，或者寫一個局部變量代替
學會使用計算屬性，ex:

data() {
    return {
        arr: [
            {status: true, foo: 1},
            {status: false, foo: 2}
        ]
    }
}
computed {
    // 用計算屬性代替，而不是每次手動計算一次
    activeArr() {
        return this.arr.filter(i => i.status)
    }
}

Prefer early exit

// bad
function someFunction(someCondition) {
  if (someCondition) {
    // Do Something
  }
}

// good 邏輯更清晰，避免過分else if
function someFunction(someCondition) {
  if (!someCondition) {
      return;
  }
  // Do Something
}

14. 精讀《爲何專家再也不關心技術細節》

技術細節學習難度不大，在須要深刻的時候再深刻了解最佳。
想要作成事，須要更宏觀的技術思惟，因此專家漸漸變得眼光寬闊，格局很大。
專家擁有快速學習技術細節的能力，只是這已不是其核心競爭力，因此與其寫技術細節的文章，好比寫方法論的思考帶來的價值更大。
指引方向比走路更重要，專家都要逐漸成爲引路人。
技術最終爲業務服務，懂技術細節和讓業務先贏沒有必然的關係，因此在深刻技術細節以前，要先理解業務，把握方向，防止技術細節出現路線問題。

15. rgba轉16進制函數

function hexify(color) {
  var values = color
    .replace(/rgba?\(/, '')
    .replace(/\)/, '')
    .replace(/[\s+]/g, '')
    .split(',');
  var a = parseFloat(values[3] || 1),
      r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
      g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
      b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
  return "#" +
    ("0" + r.toString(16)).slice(-2) +
    ("0" + g.toString(16)).slice(-2) +
    ("0" + b.toString(16)).slice(-2);
}

var myHex = hexify('rgba(255,232,186,0.4)'); // "#f5faf3"

16. material-design-icons-iconfont 包和 eslint 包有衝突，安裝了eslint後 material-design-icons-iconfont 就被刪除了，須要從新安裝一次。

17. eslint 檢查.vue文件

安裝eslint-plugin-vue
在.eslintrc.js里加上plugin
在lint里加上 --ext .js,.vue

plugins: [
    'vue'
]
eslint ./src --fix --ext .js,.vue

18. vue-cli3 建立的項目，將static文件夾移除了，靜態文件能夠放到public文件夾，能夠直接用localhost:8080/xxx.json訪問

19. 用ts的時候也不是說全部的變量都要加類型限制，只須要在自定義的變量，多方調用的地方加，而第三方的類型，若是有類型聲明能夠加，不加影響也不大。

20. $emit 加自定義參數

$emit 加自定義參數typescript

21. renderless component

renderless component
探索Vue高階組件npm

22. eslint 檢查如下代碼報錯解決方法

{ path: '/login', name: 'Login', component: () => import('@/views/login/Login'), hidden: false }

解決方法，在.eslintrc.js裏添加如下代碼，並安裝該插件json

parserOptions: {
    parser: "babel-eslint"
}

npm install babel-eslint --save-dev

23. iview裏validate找不到該屬性的ts報錯解決辦法

import {Form} from 'iview'
// iview 裏有比較全的 ts 類型定義，能夠用起來
type IForm = Form

(this.$refs.form as IForm).validate((valid: boolean | undefined): void => {
  if (valid) {
    this.$Message.success('Success!');
    const resp = login({username: '', password: ''})
  }
})

stackoverflow參考