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

#切身體會，從項目中小結出 前端程序員容易忽視的一些基礎知識 ##基礎數據結構與算法 現在有兩個不同的JSON，比較復雜，可以參考[這里](http://www.cnblogs.com/p2227/p/3546725.html)的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中的這些基礎，然后制定出適用的[一套規范方案](http://www.cnblogs.com/p2227/p/3541162.html)，絕對讓團隊的工作效率提高，事半功倍。 ###HTML/CSS就能做到的事情，無必要把它交給javascript去做 HTML5中一個較大的改進是表單項、多了很多實用屬性如required,date控件等，但是表單的一些很基礎的用法，還是不能忘記的。曾經遇到過有人想要實現點擊radio旁邊的文字時也要選中radio，於是就用jQuery去選擇，寫事件。其實，這個功能，只需要用一個label標簽把input包含在里面就可以實現了（[參考](http://www.cnblogs.com/p2227/p/3537537.html)）。還有一些例子，如IE的條件注釋，CSS hack，這些功能我也見過去用javascript去實現 ```javascript if(isIE() && IE.Verson == 7){//這些是人有封裝好的方法 $(".something").css({width:"700px"}) } ``` 這樣的代碼只會白白耗費瀏覽器的性能。`HTML/CSS就能做到的事情，無必要把它交給javascript去做`。 ##HTTP協議 現在很多項目中都是用ajax去提交JSON到后台了，原始的那種HTTP提交已經比較少見（至少在我的項目中是這樣），但是我們也不能忘記設置form的method、action的原始提交方式，因為這個才是表單提交的原型，有助於我們理解HTTP協議，例如[POST和GET的區別](http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html)，理解數據是怎么樣從前端到達后端的，又是怎么樣從后端返回到前端。當你理解了這個，就可以更好地跟后端進行溝通，遇到數據上的問題也能較快地定位解決。 ##javascript ###作用域 學過好幾種的編程語言，作用域問題都是老生常談了。在javascript中更是有函數的作用域這一基礎知識。關於這個，推薦《javascript權威指南》。當時我是把中文的讀去再去讀英文，把英文的讀完去找[圖解](http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html)，才感覺到把這一點理解清楚的。 ##JQuery ###選擇器 在一個HTML DOM 樹中，我要進行一個比較復雜的元素選擇，*不包含某些文字的帶有某某類名的元素的鄰居的父元素的……*然后怎么做？寫一個很復雜的`jQuery`選擇器？打住。jquery選擇器原理是用[正則表達式](http://www.cnblogs.com/p2227/p/3537160.html)去分解你的選擇器字符串（這一部分叫做`Sizzle`），然后再用內置的一些遍歷函數如prev,next等（其實這些函數也是基於DOM提供的方法），去找到你想要的元素。我會不去盲目地進行Sizzle的語義歧義測試，而是自己根據自己的邏輯去用prev,next等去找到自己的元素；而且退一萬步來說，我也會盡量避免使用復雜的選擇器（之前的[方案](http://www.cnblogs.com/p2227/p/3541162.html)也有提及），單位個元素用ID，多個元素用類，絕對高效准確。 以上是本人在實際項目中小結的部分容易忽視的基礎，還有更多的，還要在以后一步步積累，歸納基礎知識，避免這些問題。希望能幫助到大家，也能拋磚引玉。