做前端陸陸續(xù)續(xù)也有4年的時間,在這里就跟大家談?wù)剛€人對前端開發(fā)的一些經(jīng)驗,這就算是做一次總結(jié)吧,如果有錯誤的地方還需要大家諒解和指正。
說起前端開發(fā),我們就從一些讓人打瞌睡的概念說起吧。
WEB標準
什么是WEB標準?也許很多人會認為是DIV+CSS。其實這是一個錯誤的說法,WEB標準時一系列的技術(shù)規(guī)范,而目前主要包括XHTML1.0、CSS2.1、DOM1.0和ECMAJavaScript。當(dāng)然了,WEB標準也不僅僅是一個規(guī)范,而是一系列規(guī)范的總稱。而上面說的DIV+CSS是XHTML1.1結(jié)合CSS2.0的一種制作方法,嚴格來應(yīng)該說是XHTML+CSS。
而WEB標準是由三大塊組成的。首先是結(jié)構(gòu),主要是對網(wǎng)頁的數(shù)據(jù)對象進行整理分類,技術(shù)體現(xiàn)分別是HTML,XML,XHTML。(在這里大家可能會問,HTM不也是網(wǎng)頁的一種嗎?是的,實際上HTM與HTML沒有本質(zhì)意義的區(qū)別,原因是為了兼容一些不能識別四位擴展名的老系統(tǒng)(win32),開發(fā)者為了滿足DOS僅能識別8+3的文件名而已。);其次就是表現(xiàn),用于沒有結(jié)構(gòu)化的信息顯示以及視覺上的處理,分別包含為樣式,顏色,大小等等,主要應(yīng)用于CSS上。最后一個就是行為,用于文檔對象模型定義與交互的體現(xiàn),分別是DOM與MAScript來完成。
說了這么多,那么采用WEB標準做前端開發(fā)會有哪些優(yōu)勢呢?
節(jié)約成本,提升速度。
在這個問題之前,我先跟大家談?wù)勔粋€故人,那就是“table”,table也就是表格。早期的網(wǎng)站大部分都是用table來布局的,準確來說應(yīng)該是用表格來布局。因為如果用table來布局,這時我們就不能叫table了,因為它幾乎能完成所有結(jié)構(gòu)上的事情。那為什么不用table來布局呢?這就是我們要談的節(jié)約成本,提升速度了。
首先,table的可維護性低,太多的table屬性要修改起來讓人眼花繚亂,比如border=”0”,align=”left”等等,要修改得每個頁面都要更改。第二,嵌套太過復(fù)雜,tr td會讓你找到吐。第三,不能重用。第四,添加交互效果太難。第五,加載速度過慢。等等,每個問題都無不牽扯到成本和速度的問題。
如果采用WEB標準來制作,上面的幾種問題完全可以解決。因為我們可以做到王爺表現(xiàn)與內(nèi)容分離,也就是用XHTML來作為數(shù)據(jù)的表現(xiàn),而所有的樣式表現(xiàn)將由CSS來全部控制。這樣不僅結(jié)構(gòu)清晰,頁面體積也會大大的減小,瀏覽器兼容性更好。當(dāng)然還有很多好處,比如有利于SEO優(yōu)化,更容易被搜索引擎收錄,樣式重用,維護方便,錯誤修改頁面調(diào)整更加快捷等等。所以W3C推薦使用WEB標準開發(fā)的原因相信大家也很清楚了。