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