web全棧是目前比較流行的語(yǔ)言，因?yàn)榍岸溯^其他語(yǔ)言相比，簡(jiǎn)單好學(xué)，而且現(xiàn)在的互聯(lián)網(wǎng)公司幾乎缺少不了web前端開發(fā)，行業(yè)的需求致使大量的人轉(zhuǎn)型前端，對(duì)于剛學(xué)前端的人來(lái)講，他們?nèi)狈﹂_發(fā)經(jīng)驗(yàn)，在項(xiàng)目開發(fā)中容易出錯(cuò)，為了使大家少走彎路，小編綜合一批前端程序員，收集了一些最常見的錯(cuò)誤，供大家學(xué)習(xí)，避免掉坑。

一、JQuery 選擇器

在一個(gè)HTML DOM 樹中，進(jìn)行一個(gè)比較復(fù)雜的元素選擇，不包含某些文字的帶有某某類名的元素的鄰居的父元素的……然后怎么做？寫一個(gè)很復(fù)雜的jQuery選擇器？打住！jquery選擇器原理是用正則表達(dá)式去分解你的選擇器字符串(這一部分叫做Sizzle)，然后再用內(nèi)置的一些遍歷函數(shù)如prev,next等(其實(shí)這些函數(shù)也是基于DOM提供的方法)，去找到你想要的元素。

我會(huì)不去盲目地進(jìn)行Sizzle的語(yǔ)義歧義測(cè)試，而是自己根據(jù)自己的邏輯去用prev，next等去找到自己的元素；而且退一萬(wàn)步來(lái)說(shuō)，我也會(huì)盡量避免使用復(fù)雜的選擇器(之前的方案也有提及)，單位個(gè)元素用ID，多個(gè)元素用類，絕對(duì)高效準(zhǔn)確。

二、基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)與算法

現(xiàn)在有兩個(gè)不同的JSON，比較復(fù)雜，可以參考這里的DEMO中返回的JSON。要比較它們的差異，除了用現(xiàn)成的工具如beyond compare以外，如果我們的機(jī)器上沒(méi)有安裝這個(gè)工具，能如何較快解決?

作為一個(gè)程序員，一個(gè)個(gè)對(duì)比是不可行的，對(duì)比完也不會(huì)有什么收獲。我會(huì)把之放進(jìn)Excel中(如果你機(jī)器連這個(gè)都沒(méi)有，那忽視我)，先排序，再用二分法去快速定位找到有差異的JSON屬性，即使是1024個(gè)字段的大數(shù)據(jù)，也最多10次的定位即可找到。

其實(shí)算法這東西，并不是給你一道題目然后把死記下來(lái)的內(nèi)容背出來(lái)，而是當(dāng)你遇到相應(yīng)的情景時(shí)，能想到用這個(gè)方法去解決。

三、HTTP協(xié)議

現(xiàn)在很多項(xiàng)目中都是用ajax去提交JSON到后臺(tái)了，原始的那種HTTP提交已經(jīng)比較少見(至少在我的項(xiàng)目中是這樣)，但是我們也不能忘記設(shè)置form的method、action的原始提交方式，因?yàn)檫@個(gè)才是表單提交的原型，有助于我們理解HTTP協(xié)議，例如POST和GET的區(qū)別，理解數(shù)據(jù)是怎么樣從前端到達(dá)后端的，又是怎么樣從后端返回到前端。

當(dāng)你理解了這個(gè)，就可以更好地跟后端進(jìn)行溝通，遇到數(shù)據(jù)上的問(wèn)題也能較快地定位解決。

四、javascript 作用域

學(xué)過(guò)好幾種的編程語(yǔ)言，作用域問(wèn)題都是老生常談了。在javascript中更是有函數(shù)的作用域這一基礎(chǔ)知識(shí)。關(guān)于這個(gè)，推薦《javascript權(quán)威指南》。當(dāng)時(shí)我是把中文的讀去再去讀英文，把英文的讀完去找圖解，才感覺到把這一點(diǎn)理解清楚的。
五、HTML/CSS DOCTYPE

曾經(jīng)項(xiàng)目中遇到這樣一個(gè)問(wèn)題，用其他瀏覽器打開頁(yè)面是好的，唯獨(dú)是IE8打開時(shí)出奇地慢。我注意到IE8打開時(shí)慢但CPU消耗并不高，只是網(wǎng)頁(yè)空白很久沒(méi)渲染出來(lái)，可以排除JS算法上的問(wèn)題。
經(jīng)過(guò)細(xì)心研讀代碼發(fā)現(xiàn)，有人把一部分script、 link等標(biāo)簽放到了DOCTYPE的前面。

DOCTYPE是用來(lái)告訴瀏覽器解釋整個(gè)文檔的一套法則的，一定要放在HTML部分的最前面，先有script標(biāo)簽，那就意味著瀏覽器已經(jīng)開始解釋了，后面再有DOCTYPE也是沒(méi)有意義的了。把DOCTYPE放到HTML部分的最前面，一開始提及的問(wèn)題就解決了。

馬上臨近2021年，在新的一年里學(xué)習(xí)一些新的知識(shí)來(lái)填充我們的空閑；臨近新春在春節(jié)之前努力一把，年后工資會(huì)刷刷長(zhǎng)！

在這里為大家提供一些關(guān)于【web前端】的學(xué)習(xí)規(guī)劃，一些以便我們學(xué)習(xí)。

特意在新春佳節(jié)之前為大家整理的一些學(xué)習(xí)資料：

如何獲取，動(dòng)一下手指點(diǎn)贊關(guān)注一下
狠狠在評(píng)論區(qū)輸入：【你厲害】 小編隨后為你 安排！