前端程式員容易忽視的一些基礎知識，前端程式員忽視

前端程式員容易忽視的一些基礎知識，前端程式員忽視
基礎資料結構與演算法

現在有兩個不同的JSON，比較複雜，可以參考這裡的DEMO中返回的JSON。要比較它們的差異，除了用現成的工具如beyond compare以外，如果我們的機器上沒有安裝這個工具，能如何較快解決？作為一個程式員，一個個對比是不可行的，對比完也不會有什麼收穫。我會把之放進Excel中（如果你機器連這個都沒有，那忽視我），先排序，再用二分法去快速定位找到有差異的JSON屬性，即使是1024個欄位的大資料，也最多10次的定位即可找到。其實演算法這東西，並不是給你一道題目然後把死記下來的內容背出來，而是當你遇到相應的情景時，能想到用這個方法去解決。

HTML/CSSDOCTYPE

曾經項目中遇到這樣一個問題，用其他瀏覽器開啟頁面是好的，唯獨是IE8開啟時出奇地慢。我注意到IE8開啟時慢但CPU消耗並不高，只是網頁空白很久沒渲染出來，可以排除JS演算法上的問題。經過細心研讀代碼發現，有人把一部分script、 link等標籤放到了DOCTYPE的前面。DOCTYPE是用來告訴瀏覽器解釋整個文檔的一套法則的，一定要放在HTML部分的最前面，先有script標籤，那就意味著瀏覽器已經開始解釋了，後面再有DOCTYPE也是沒有意義的了。把DOCTYPE放到HTML部分的最前面，一開始提及的問題就解決了。

塊狀元素/內嵌元素，盒子模型

HTML/CSS有一個特徵，不會報錯，只會有瀏覽器渲染出來的結果不符合設計的邏輯這個問題，所以遇到問題時也很難拿到網上去搜尋答案。所以要把HTML/CSS寫好，首先要自己理解當中的一些基礎原理，要說HTML布局，塊狀元素/內嵌元素之間的關係我認為是最基礎的，延伸出去，就是CSS盒子模型。另外，HTML中元素的嵌套組合關係也是十分重要的，CSS中很多屬性，如position，z-index，都是基於父物件而言的，撇開HTML去談CSS是無意義的。換而言之，要在結構（Structure）之下談論表現（Presentation）。充分理解HTML/CSS中的這些基礎，然後制定出適用的一套規範方案，絕對讓團隊的工作效率提高，事半功倍。

HTML/CSS就能做到的事情，無必要把它交給javascript去做

HTML5中一個較大的改進是表單項、多了很多實用屬性如required,date控制項等，但是表單的一些很基礎的用法，還是不能忘記的。曾經遇到過有人想要實現點擊radio旁邊的文字時也要選中radio，於是就用jQuery去選擇，寫事件。其實，這個功能，只需要用一個label標籤把input包含在裡面就可以實現了）。還有一些例子，如IE的條件注釋，CSS hack，這些功能我也見過去用javascript去實現

1. if(isIE() && IE.Verson == 7){//這些是人有封裝好的方法
2. $(".something").css({width:"700px"})
3. }

這樣的代碼只會白白耗費瀏覽器的效能。HTML/CSS就能做到的事情，無必要把它交給javascript去做。

HTTP協議

現在很多項目中都是用ajax去提交JSON到後台了，原始的那種HTTP提交已經比較少見（至少在我的項目中是這樣），但是我們也不能忘記設定form的method、action的原始提交方式，因為這個才是表單提交的原型，有助於我們理解HTTP協議，例如POST和GET的區別，理解資料是怎麼樣從前端到達後端的，又是怎麼樣從後端返回到前端。當你理解了這個，就可以更好地跟後端進行溝通，遇到資料上的問題也能較快地定位解決。

javascript範圍

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

JQuery選取器

在一個HTML DOM 樹中，我要進行一個比較複雜的元素選擇，不包含某些文字的帶有某某類名的元素的鄰居的父元素的……然後怎麼做？寫一個很複雜的jQuery選取器？打住。jquery選取器原理是用Regex去分解你的選取器字串（這一部分叫做Sizzle），然後再用內建的一些遍曆函數如prev,next等（其實這些函數也是基於DOM提供的方法），去找到你想要的元素。我會不去盲目地進行Sizzle的語義歧義測試，而是自己根據自己的邏輯去用prev,next等去找到自己的元素；而且退一萬步來說，我也會盡量避免使用複雜的選取器（之前的方案也有提及），單位個元素用ID，多個元素用類，絕對高效準確。

學習前端的同學們，歡迎加入前端學習交流群

前端學習交流QQ群：461593224