分享 30+ 個常用的前端技術(shù)知識點
前端要會打組合拳，復(fù)盤30+技術(shù)點打出的功能
一、前言
tips：總結(jié)。
①會用才算學(xué)到，能靈活運(yùn)用打組合拳是學(xué)會的標(biāo)志之一。
②每一個技術(shù)點都值得優(yōu)寫優(yōu)學(xué)，當(dāng)他們組合在一起可能會有驚喜。
③要用的時候能想到，想到的時候會用，用的時候能優(yōu)雅，就是精通了。這也是我堅持寫“每個技術(shù)點都值得優(yōu)學(xué)優(yōu)寫系列”的初衷。
④寫到后面有點疲憊，其實可以算是50+的知識技術(shù)點，組合一起偷懶了。
⑤前端是真的知識點廣啊啊啊，更新迭代還快，不總結(jié)沒發(fā)現(xiàn)，一總結(jié)嚇一跳，我不想說前端卷，看看下面這張圖。
原創(chuàng)的手寫進(jìn)階圖，前文已經(jīng)開發(fā)完，今天總結(jié)一下，涉及到的前端知識技術(shù)點，看看開發(fā)一個這樣的進(jìn)階圖，需要用到哪些知識和技術(shù)點。
會用的知識技術(shù)才算學(xué)到的，進(jìn)階圖的每一步都是作者原創(chuàng)，市面上并沒有發(fā)現(xiàn)參考庫，雖說難度不大，但這其中也涉及到不少的前端知識技術(shù)點，最重要的是涉及到的思維組織，邏輯設(shè)計，技術(shù)點的靈活配套運(yùn)用，知道該用什么技術(shù)點實現(xiàn)什么，在什么時候用。
我一共總結(jié)了涉及到的30+知識技術(shù)點，也有更可能不止，歡迎評論區(qū)分享。
二、30+前端技術(shù)點
這些知識技術(shù)點被分為下面幾個系列：
1. Vue 系列
1. props
進(jìn)階圖用到 props 主要是用來接收父組件傳遞而來的主面板數(shù)據(jù)，例如 hasScale 用于在父組件調(diào)用面板組件時，傳遞一個 Boolean 值告訴面板組件是否支持縮放。而 progressData 則是用來接收渲染面板的數(shù)據(jù)，要注意的是，父組件中的傳遞名稱應(yīng)該和子組件中的 props 中定義的名稱一致。如下是關(guān)于 props 在進(jìn)階圖中的應(yīng)用。
props 可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)。props 可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設(shè)置默認(rèn)值。支持配置屬性 type：數(shù)據(jù)類型，default 設(shè)置默認(rèn)值，required 是否必須，validator 自定義驗證函數(shù)。
??"list"></main-panel>
復(fù)制代碼
props:?{
????//?是否支持縮放
????hasScale:?{
??????type:?Boolean,
??????default:?false
????},
????//?類型：只讀（detail）或?編輯（默認(rèn)）
????type:?{
??????type:?String,
??????default:?''
????},
????//?主面板數(shù)據(jù)
????progressData:?{
??????type:?Array,
??????default:?function?()?{
????????return?[]
??????}
????}
},
復(fù)制代碼
2. $emit
$emit 用于向上派發(fā)事件并傳遞參數(shù)，通常配合 props 使用，以達(dá)到父子組件通信的目的。進(jìn)階圖中是于父組件派發(fā)change事件，并傳遞 this.bodyWidth, this.list 兩個參數(shù)。注意父組件在接收事件時應(yīng)保持名稱一致。
watch:?{
??'list':?{
????deep:?true,
????handler?(newVal,?oldVal)?{
??????this.bodyWidth?=?this.list.length?*?392?+?60?+?'px'
??????//?派發(fā)事件
??????this.$emit('change',?this.bodyWidth,?this.list)
????}
??},
},
復(fù)制代碼
<--?接收?change?事件?-->
<main-panel?@change="change">main-panel>
復(fù)制代碼
3. ref
ref 在 Vue 中用于綁定組件，可以通過 this.refs[綁定名稱]或this.refs[綁定名稱] 或 this.refs[綁定名稱]或this.refs.綁定名稱 來獲取組件實例對象，這有時非常有用。例如，當(dāng)我們想要在一個組件中調(diào)用其子組件的某個方法或?qū)傩詴r，可通過這種方式調(diào)用。
<--?使用?ref?綁定面板組件?-->
<main-panel?ref="mainPanel">main-panel>
復(fù)制代碼
4. watch
watch 是 vue 中被常用的 api 之一，用于監(jiān)聽數(shù)據(jù)，可以監(jiān)聽 data 中的數(shù)據(jù)，也可以監(jiān)聽 props 中的數(shù)據(jù)。
watch 觀察 Vue 實例上的一個表達(dá)式或者一個函數(shù)計算結(jié)果的變化。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受簡單的鍵路徑。對于更復(fù)雜的表達(dá)式，用一個函數(shù)取代。
進(jìn)階圖中使用 watch 監(jiān)聽 data 中的面板數(shù)據(jù) list 和 props 中的 父組件傳遞下來的面板數(shù)據(jù) progressData。其中使用到了 deep 屬性，表示是否進(jìn)行深層次的內(nèi)部值得監(jiān)聽。根據(jù)官網(wǎng)的提示，數(shù)組其實不需要使用 deep:true 去監(jiān)聽數(shù)組內(nèi)部值得變化。
watch:?{
??'list':?{
????deep:?true,
????handler?(newVal,?oldVal)?{
??????this.bodyWidth?=?this.list.length?*?392?+?60?+?'px'
??????this.$emit('change',?this.bodyWidth,?this.list)
????}
??},
??'progressData':?{
????handler?(newVal,?oldVal)?{
??????this.list?=?newVal
????}
??}
},
復(fù)制代碼
5. computed
computed 是計算屬性，對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性，這就是它的應(yīng)用場景，雖然通過 methods 或 watch 也能完成，但是 computed 在處理復(fù)雜邏輯時更有優(yōu)勢：計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。
進(jìn)階圖的實現(xiàn)多次用到了 computed
6. created
created 聲明周期鉤子函數(shù)之一，如果你想盡早獲取接口數(shù)據(jù)，那么在這里做很合適。
在實例創(chuàng)建完成后被立即同步調(diào)用。在這一步中，實例已完成對選項的處理， 意味著以下內(nèi)容已被配置完畢：數(shù)據(jù)偵聽、計算屬性、方法、事件/偵聽器的回調(diào)函數(shù)。然而，掛載階段還沒開始，且 $el property 目前尚不可用。
進(jìn)階圖中就是在 created 中獲取可提供的關(guān)聯(lián)數(shù)據(jù)。
created?()?{
???//?獲取可供關(guān)聯(lián)的關(guān)聯(lián)數(shù)據(jù)
??//?this.searchList()
},
復(fù)制代碼
7. mounted
mounted 是一個 vue 生命周期鉤子函數(shù)，此時 dom 這時 el 被新創(chuàng)建的 vm.$el 替換了，我們可以在 mounted 中進(jìn)行 dom 操作， 這也是最早可以較好進(jìn)行 dom 操作的鉤子函數(shù)。
注意 mounted 不會保證所有的子組件也都被掛載完成。如果你希望等到整個視圖都渲染完畢再執(zhí)行某些操作，
可以在 mounted 內(nèi)部使用 vm.$nextTick
進(jìn)階圖中使用 mounted 鉤子，在里面做了兩件事，第一件是監(jiān)聽文檔上的 click 事件。第二件事是調(diào)用 init() 函數(shù)，初始化進(jìn)階圖
??mounted?()?{
????//?監(jiān)聽?click?事件
????document.addEventListener('click',?this.clickListener)
????//?初始化進(jìn)階圖
????this.init()
??},
復(fù)制代碼
8. beforeDestroy
我們通常在 beforeDestroy 中做一些解綁和移除操作。beforeDestroy 發(fā)生在實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。要注意的是，該鉤子在服務(wù)器端渲染期間不被調(diào)用。
進(jìn)階圖中在 beforeDestroy 中做的是 移除 click 監(jiān)聽，例如一些定時器也可以在這是移除，還一些解綁操作。
beforeDestroy?()?{
???//?在實例被銷毀前移除?click?監(jiān)聽
???document.removeEventListener('click',?this.clickListener)
},
復(fù)制代碼
9. 指令 v-if
v-if 指令的應(yīng)用場景可以是判斷是否展示（是否渲染）某一個元素，一種條件判斷指令。非常常用的指令之一，常被隨之提起來是 v-show。他們都都可以做同樣的事情， 所以常被比較，什么時候應(yīng)該用哪個？
v-show 是通過改變 css display 屬性值實現(xiàn)切換效果， v-if是真正的條件渲染， 當(dāng)一開始的值為true時才會編譯渲染，而v-show不管怎樣都會編譯，只是簡單地css屬性切換 v-if適合條件不經(jīng)常改變的場景，因為他的切換會重新編譯渲染，消耗較大。v-show適合切換較為頻繁的場景，開銷較小。
進(jìn)階圖中使用 v-if 指令來判斷是否支持縮放，即是否展示縮放工具欄，如下
10. v-for
用于遍歷循環(huán)生成系列元素，這也是常用指令，key 屬性應(yīng)該被注意，如果你希望你的元素（組件）保持足夠的獨(dú)立性。
tips1：v-for 的默認(rèn)行為會嘗試原地修改元素而不是移動它們。要強(qiáng)制其重新排序元素，
你需要用特殊 attribute key 來提供一個排序提示。
tips2：v-if 和 v-for 當(dāng)它們處于同一節(jié)點，v-for 的優(yōu)先級比 v-if 更高， 這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)中。
當(dāng)你只想為部分項渲染節(jié)點時，這種優(yōu)先級的機(jī)制會十分有用。如果不是這可能會造成不必要的消耗。
進(jìn)階圖中使用 v-for 遍歷生成系列階梯節(jié)點和文本行節(jié)點，這系列節(jié)點構(gòu)成了進(jìn)階圖的主面板，如下
11. v-bind
v-bind最被常用，但通常我們使用它的簡寫“:”,它的用法是動態(tài)地綁定一個或多個 attribute， 或一個組件 prop 到表達(dá)式。
tips:修飾符：
.prop - 作為一個 DOM property 綁定而不是作為 attribute 綁定。(差別在哪里？)
.camel - (2.1.0+) 將 kebab-case attribute 名轉(zhuǎn)換為 camelCase。(從 2.1.0 開始支持)
.sync (2.3.0+) 語法糖，會擴(kuò)展成一個更新父組件綁定值的 v-on 偵聽器。
進(jìn)階圖中，例如 key，disabled 和 style 的動態(tài)綁定，如下
12. v-on
v-on 用于綁定事件，我們更常用的是它的縮寫 “@”，結(jié)合一些修飾符使用，有時會非常有用，例如 click.stop 可以阻止冒泡。
tips 一些修飾符：
.stop - 調(diào)用 event.stopPropagation()。
.prevent - 調(diào)用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。
.{keyCode | keyAlias} - 只當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)。
.native - 監(jiān)聽組件根元素的原生事件。
.once - 只觸發(fā)一次回調(diào)。
.left - (2.2.0) 只當(dāng)點擊鼠標(biāo)左鍵時觸發(fā)。
.right - (2.2.0) 只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)。
.middle - (2.2.0) 只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
tips 從 2.4.0 開始，v-on 同樣支持不帶參數(shù)綁定一個事件/監(jiān)聽器鍵值對的對象。注意當(dāng)使用對象語法時，是不支持任何修飾器的。
進(jìn)階圖中主要是用于綁定事件，并配合 .stop 使用阻止事件冒泡，如下所示
13. v-html
v-html 用于綁定 html 字符串，它的作用是更新元素的 innerHTML。
tips1：在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導(dǎo)致 XSS 攻擊。只在可信內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上。
tips2：在單文件組件里，scoped 的樣式不會應(yīng)用在 v-html 內(nèi)部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內(nèi)容設(shè)置帶作用域的 CSS，你可以替換為 CSS Modules 或用一個額外的全局 元素手動設(shè)置類似 BEM 的作用域策略。
進(jìn)階圖開發(fā)中，用 v-html 綁定可關(guān)聯(lián)數(shù)據(jù)的 title，如下
<span?v-html="item.title">span>
復(fù)制代碼
14. v-model
v-model 可用于綁定表單組件的值，實現(xiàn)雙向綁定。能使用 v-model 的元素包括四類：
<b id="afajh"><abbr id="afajh"></abbr></b>