做前端陸陸續(xù)續(xù)也有4年的時(shí)間，在這里就跟大家談?wù)剛€(gè)人對(duì)前端開(kāi)發(fā)的一些經(jīng)驗(yàn)，這就算是做一次總結(jié)吧，如果有錯(cuò)誤的地方還需要大家諒解和指正。

說(shuō)起前端開(kāi)發(fā)，我們就從一些讓人打瞌睡的概念說(shuō)起吧。

WEB標(biāo)準(zhǔn)

什么是WEB標(biāo)準(zhǔn)？也許很多人會(huì)認(rèn)為是DIV+CSS。其實(shí)這是一個(gè)錯(cuò)誤的說(shuō)法，WEB標(biāo)準(zhǔn)時(shí)一系列的技術(shù)規(guī)范，而目前主要包括XHTML1.0、CSS2.1、DOM1.0和ECMAJavaScript。當(dāng)然了，WEB標(biāo)準(zhǔn)也不僅僅是一個(gè)規(guī)范，而是一系列規(guī)范的總稱。而上面說(shuō)的DIV+CSS是XHTML1.1結(jié)合CSS2.0的一種制作方法，嚴(yán)格來(lái)應(yīng)該說(shuō)是XHTML+CSS。

而WEB標(biāo)準(zhǔn)是由三大塊組成的。首先是結(jié)構(gòu)，主要是對(duì)網(wǎng)頁(yè)的數(shù)據(jù)對(duì)象進(jìn)行整理分類，技術(shù)體現(xiàn)分別是HTML，XML，XHTML。（在這里大家可能會(huì)問(wèn)，HTM不也是網(wǎng)頁(yè)的一種嗎？是的，實(shí)際上HTM與HTML沒(méi)有本質(zhì)意義的區(qū)別，原因是為了兼容一些不能識(shí)別四位擴(kuò)展名的老系統(tǒng)（win32），開(kāi)發(fā)者為了滿足DOS僅能識(shí)別8+3的文件名而已。）；其次就是表現(xiàn)，用于沒(méi)有結(jié)構(gòu)化的信息顯示以及視覺(jué)上的處理，分別包含為樣式，顏色，大小等等，主要應(yīng)用于CSS上。最后一個(gè)就是行為，用于文檔對(duì)象模型定義與交互的體現(xiàn)，分別是DOM與MAScript來(lái)完成。

說(shuō)了這么多，那么采用WEB標(biāo)準(zhǔn)做前端開(kāi)發(fā)會(huì)有哪些優(yōu)勢(shì)呢？

節(jié)約成本，提升速度。

在這個(gè)問(wèn)題之前，我先跟大家談?wù)勔粋€(gè)故人，那就是“table”，table也就是表格。早期的網(wǎng)站大部分都是用table來(lái)布局的，準(zhǔn)確來(lái)說(shuō)應(yīng)該是用表格來(lái)布局。因?yàn)槿绻胻able來(lái)布局，這時(shí)我們就不能叫table了，因?yàn)樗鼛缀跄芡瓿伤薪Y(jié)構(gòu)上的事情。那為什么不用table來(lái)布局呢？這就是我們要談的節(jié)約成本，提升速度了。

首先，table的可維護(hù)性低，太多的table屬性要修改起來(lái)讓人眼花繚亂，比如border=”0”,align=”left”等等，要修改得每個(gè)頁(yè)面都要更改。第二，嵌套太過(guò)復(fù)雜，tr td會(huì)讓你找到吐。第三，不能重用。第四，添加交互效果太難。第五，加載速度過(guò)慢。等等，每個(gè)問(wèn)題都無(wú)不牽扯到成本和速度的問(wèn)題。

如果采用WEB標(biāo)準(zhǔn)來(lái)制作，上面的幾種問(wèn)題完全可以解決。因?yàn)槲覀兛梢宰龅酵鯛敱憩F(xiàn)與內(nèi)容分離，也就是用XHTML來(lái)作為數(shù)據(jù)的表現(xiàn)，而所有的樣式表現(xiàn)將由CSS來(lái)全部控制。這樣不僅結(jié)構(gòu)清晰，頁(yè)面體積也會(huì)大大的減小，瀏覽器兼容性更好。當(dāng)然還有很多好處，比如有利于SEO優(yōu)化，更容易被搜索引擎收錄，樣式重用，維護(hù)方便，錯(cuò)誤修改頁(yè)面調(diào)整更加快捷等等。所以W3C推薦使用WEB標(biāo)準(zhǔn)開(kāi)發(fā)的原因相信大家也很清楚了。