前端開發最容易出錯的基礎知識，面試常問！

JavaScript 是目前比較流行的語言，因為前端開發較其他語言相比，簡單好學，門檻低，而且現在的網際網路公司幾乎缺少不了web前端開發，行業的需求致使大量的人轉型前端，對於剛學前端的人來講，他們缺乏開發經驗，在專案開發中容易出錯，為了使大家少走彎路，綜合最近各大廠面試題，收集了一些最常見的錯誤，供大家學習，避免掉坑。

一、JQuery 選擇器

在一個HTML DOM 樹中，進行一個比較複雜的元素選擇，不包含某些文字的帶有某某類名的元素的鄰居的父元素的……然後怎麼做？寫一個很複雜的jQuery選擇器？打住。

jquery選擇器原理是用正規表示式去分解你的選擇器字串（這一部分叫做Sizzle），然後再用內建的一些遍歷函式如prev,next等（其實這些函式也是基於DOM提供的方法），去找到你想要的元素。

我會不去盲目地進行Sizzle的語義歧義測試，而是自己根據自己的邏輯去用prev,next等去找到自己的元素；而且退一萬步來說，我也會盡量避免使用複雜的選擇器（之前的方案也有提及），單位個元素用ID，多個元素用類，絕對高效準確。

二、基礎資料結構與演算法

現在有兩個不同的JSON，比較複雜，可以參考這裡的DEMO中返回的JSON。要比較它們的差異，除了用現成的工具如beyond compare以外，如果我們的機器上沒有安裝這個工具，能如何較快解決？

作為一個程式設計師，一個個對比是不可行的，對比完也不會有什麼收穫。我會把之放進Excel中（如果你機器連這個都沒有，那忽視我），先排序，再用二分法去快速定位找到有差異的JSON屬性，即使是1024個欄位的大資料，也最多10次的定位即可找到。

其實演算法這東西，並不是給你一道題目然後把死記下來的內容背出來，而是當你遇到相應的情景時，能想到用這個方法去解決。

三、HTTP協議

現在很多專案中都是用ajax去提交JSON到後臺了，原始的那種HTTP提交已經比較少見（至少在我的專案中是這樣），但是我們也不能忘記設定form的method、action的原始提交方式，因為這個才是表單提交的原型，有助於我們理解HTTP協議，例如POST和GET的區別，理解資料是怎麼樣從前端到達後端的，又是怎麼樣從後端返回到前端。

當你理解了這個，就可以更好地跟後端進行溝通，遇到資料上的問題也能較快地定位解決。

四、javascript 作用域

學過好幾種的程式語言，作用域問題都是老生常談了。在javascript中更是有函式的作用域這一基礎知識。關於這個，推薦《javascript權威指南》。當時我是把中文的讀去再去讀英文，把英文的讀完去找圖解，才感覺到把這一點理解清楚的。

五、HTML/CSS DOCTYPE

曾經專案中遇到這樣一個問題，用其他瀏覽器開啟頁面是好的，唯獨是IE8開啟時出奇地慢。我注意到IE8開啟時慢但CPU消耗並不高，只是網頁空白很久沒渲染出來，可以排除JS演算法上的問題。

經過細心研讀程式碼發現，有人把一部分script、 link等標籤放到了DOCTYPE的前面。

DOCTYPE是用來告訴瀏覽器解釋整個文件的一套法則的，一定要放在HTML部分的最前面，先有script標籤，那就意味著瀏覽器已經開始解釋了，後面再有DOCTYPE也是沒有意義的了。把DOCTYPE放到HTML部分的最前面，一開始提及的問題就解決了。

如果你是前端新手，在學習前端的時候，一定要把基礎學好！ 並且，以Javascript／HTML，css為例，許多從業新人覺得自己使足了勁都攆不上前端科技的發展，因為各種庫／工具／框架乃至於Javascript語言本身都在高速進化。知道你為什麼攆不上麼？在你學習的過程中，你只會按部就班，依舊沒有解決問題的能力，當工具本身發生變化的時候，你也就無法適應了。你得學會自己開始動手做專案

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的朋友。

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645767/，如需轉載，請註明出處，否則將追究法律責任。