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

基礎數據結構與算法 如今有兩個不一樣的JSON，比較複雜，能夠參考這裏的DEMO中返回的JSON。要比較它們的差別，除了用現成的工具如

beyond compare

之外，若是咱們的機器上沒有安裝這個工具，能如何較快解決？做爲一個程序員，一個個對比是不可行的，對比完也不會有什麼收穫。我會把之放進Excel中（若是你機器連這個都沒有，那忽視我），先排序，再用

二分法

去快速定位找到有差別的JSON屬性，即便是1024個字段的大數據，也最多10次的定位便可找到。其實算法這東西，並非給你一道題目而後把死記下來的內容背出來，而是當你遇到相應的情景時，能想到用這個方法去解決。
HTML/CSS DOCTYPE 曾經項目中遇到這樣一個問題，用其餘瀏覽器打開頁面是好的，惟獨是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去實現

if(isIE() && IE.Verson == 7){//這些是人有封裝好的方法

$(".something").css({width:"700px"})

}

這樣的代碼只會白白耗費瀏覽器的性能。

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

。
HTTP協議 如今不少項目中都是用ajax去提交JSON到後臺了，原始的那種HTTP提交已經比較少見（至少在個人項目中是這樣），可是咱們也不能忘記設置form的method、action的原始提交方式，由於這個纔是表單提交的原型，有助於咱們理解HTTP協議，例如POST和GET的區別，理解數據是怎麼樣從前端到達後端的，又是怎麼樣從後端返回到前端。當你理解了這個，就能夠更好地跟後端進行溝通，遇到數據上的問題也能較快地定位解決。
javascript 做用域 學過好幾種的編程語言，做用域問題都是老生常談了。在javascript中更是有函數的做用域這一基礎知識。關於這個，推薦《javascript權威指南》。當時我是把中文的讀去再去讀英文，把英文的讀完去找圖解，才感受到把這一點理解清楚的。
JQuery 選擇器 在一個HTML DOM 樹中，我要進行一個比較複雜的元素選擇，不包含某些文字的帶有某某類名的元素的鄰居的父元素的……而後怎麼作？寫一個很複雜的

jQuery

選擇器？打住。jquery選擇器原理是用正則表達式去分解你的選擇器字符串（這一部分叫作

Sizzle

），而後再用內置的一些遍歷函數如prev,next等（其實這些函數也是基於DOM提供的方法），去找到你想要的元素。我會不去盲目地進行Sizzle的語義歧義測試，而是本身根據本身的邏輯去用prev,next等去找到本身的元素；並且退一萬步來講，我也會盡可能避免使用複雜的選擇器（以前的方案也有說起），單位個元素用ID，多個元素用類，絕對高效準確。
學習前端的同窗們，歡迎加入前端學習交流羣
前端學習交流QQ羣：461593224
轉載於猿2048:➱《前端程序員容易忽視的一些基礎知識》