基礎數據結構與演算法 現在有兩個不同的JSON，比較複雜，可以參考這裡的DEMO中返回的JSON。要比較它們的差異，除了用現成的工具如beyond compare以外，如果我們的機器上沒有安裝這個工具，能如何較快解決？作為一個程式員，一個個對比是不可行的，對比完也不會有什麼收穫。我會把之放進Excel ...
基礎數據結構與演算法
現在有兩個不同的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
