web前端開發(fā)技術(shù)與標(biāo)準(zhǔn)

web前端開發(fā)技術(shù)與標(biāo)準(zhǔn)

0從用戶體驗(yàn)方面2005年后，網(wǎng)絡(luò)進(jìn)入2.0時(shí)代。有很多類似于臺(tái)式軟件的web應(yīng)用程序，這讓網(wǎng)站的前端發(fā)生了徹底的變化。網(wǎng)頁不再只是承載單一的文字和圖片,各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng),網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn),這些都是基于前端技術(shù)實(shí)現(xiàn)的。Web前端開發(fā)技術(shù)是一個(gè)先易后難的過程,主要包括三個(gè)要素:HTML、CSS和JavaScript,這就要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù),網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí),而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí),包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級(jí)支持等。1前端文本代碼w整體隨著Web2.0概念的普及和W3C組織的推廣,網(wǎng)站重構(gòu)的影響力正以驚人的速度增長。XHTML+CSS布局、DHTML和AJAX像一陣旋風(fēng),鋪天蓋地席卷而來,包括新浪、搜狐、網(wǎng)易、騰訊、淘寶等在內(nèi)的各種規(guī)模的IT企業(yè)都對(duì)自己的網(wǎng)站進(jìn)行了重構(gòu)。●重構(gòu)的目的網(wǎng)站重構(gòu)的本質(zhì)是構(gòu)建一個(gè)前端靈活的MVC框架,即HTML作為信息模型(Model),CSS控制樣式(View),JavaScript負(fù)責(zé)調(diào)度數(shù)據(jù)和實(shí)現(xiàn)某種展現(xiàn)邏輯(Controller)。同時(shí),代碼需要具有很好的復(fù)用性和可維護(hù)性。這是高效率、高質(zhì)量開發(fā)以及協(xié)作開發(fā)的基礎(chǔ)。DHTML可以讓用戶的操作更炫,更吸引眼球;AJAX可以實(shí)現(xiàn)無刷新的數(shù)據(jù)交換,讓用戶的操作更流暢。對(duì)于普通用戶來說,一個(gè)網(wǎng)站是否專業(yè)、功能是否強(qiáng)大,服務(wù)器端是用J2EE+Oracle的強(qiáng)大組合,還是用ASP+Access的簡單組合,并沒有太明顯的區(qū)別。但是,前端的用戶體驗(yàn)卻給了用戶直觀的印象?！裰貥?gòu)的優(yōu)點(diǎn)(1)優(yōu)化,根據(jù)W3C標(biāo)準(zhǔn)進(jìn)行重構(gòu)后,可以讓前端的代碼組織更有序,顯著改善網(wǎng)站的性能,還能提高可維護(hù)性,對(duì)搜索引擎也更友好;(2)加速,重構(gòu)后的網(wǎng)站能帶來更好的用戶體驗(yàn),用XHTML+CSS重新布局后的頁面,文件更小,下載速度更快。2web頁面設(shè)計(jì)Web前端開發(fā)技術(shù)包括三個(gè)要素:HTML、CSS和JavaScript,但隨著RIA的流行和普及,Flash/Flex、Silverlight、XML和服務(wù)器端語言等也是Web前端開發(fā)工作需要掌握的知識(shí)及技術(shù)。(1)HTML5:超文本標(biāo)記語言(HTML)5第一次向HTML中引入了新的元素。新的結(jié)構(gòu)元素包括aside、figure和section。新的內(nèi)聯(lián)元素包括time、meter和progress。新的內(nèi)嵌元素有video和audio。新的交互元素有details、datagrid和command。(2)XHTML:XHTML是一種基于HTML的語言,但是用結(jié)構(gòu)良好的XML表示。不過,XHTML不僅僅是標(biāo)簽和字符的規(guī)范化,還可能改變Web設(shè)計(jì)的方式?！駥盈B樣式表(CascadingStyleSheets,CSS)層疊樣式表是一種將表示樣式應(yīng)用到標(biāo)記的系統(tǒng)。CSS以其對(duì)HTMLWeb頁面的樣式化而知名,但是它同樣適用于在Web和其他媒介上表示XML文檔。有效使用CSS對(duì)于分離內(nèi)容及其表示非常關(guān)鍵。頁面編寫者可以使用CSS更精確地控制內(nèi)容的外觀。CSS規(guī)則由一個(gè)選擇符和設(shè)置的屬性和值組成,其中的選擇符決定應(yīng)用這個(gè)規(guī)則的內(nèi)容?！裎臋n對(duì)象模型(DOM)讓W(xué)eb應(yīng)用程序沖破普遍存在的瘦客戶機(jī)架構(gòu)的桎梏。當(dāng)今的瀏覽器已經(jīng)能夠支持HTML文檔內(nèi)跨對(duì)象高級(jí)客戶端交互。由于文檔對(duì)象模型(DocumentObjectModel,DOM),UI設(shè)計(jì)人員現(xiàn)在可以創(chuàng)建用戶能夠?qū)崟r(shí)處理數(shù)據(jù)的界面,同時(shí)又提供了Web應(yīng)用程序的便利性。眾所周知文檔對(duì)象模型(DOM)是處理XML的基礎(chǔ),但隨著HTML瀏覽器的使用,這一模式發(fā)生改變。隨著新瀏覽器通過客戶端腳本(例如JavaScript)實(shí)現(xiàn)W3C文檔對(duì)象模型,DOM又經(jīng)歷了變革。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語言。同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言,常用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能,例如響應(yīng)用戶的各種操作。完整的JavaScript實(shí)現(xiàn)包含三個(gè)部分:ECMAScript、文檔對(duì)象模型、字節(jié)順序記號(hào)。JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系,使網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。JavaScript短小精悍,又是在客戶機(jī)上執(zhí)行的,大大提高了網(wǎng)頁的瀏覽速度和交互能力。它是專門為制作Web網(wǎng)頁而量身定做的一種簡單的編程語言?！窨鐬g覽器開發(fā)在不同的瀏覽器或具有不同設(shè)置的瀏覽器上,Web頁面的執(zhí)行方式不一樣。一直以來,“對(duì)多個(gè)瀏覽器進(jìn)行測試”像是一條難以解開的咒語,因?yàn)樾枰獙?duì)大量瀏覽器進(jìn)行測試。對(duì)所有瀏覽器進(jìn)行測試(尤其是目前)幾乎是不可能的。跨瀏覽器測試的技術(shù),既包括比較全面的技術(shù),也包括快速但不嚴(yán)謹(jǐn)?shù)募夹g(shù)。例如最優(yōu)化跨瀏覽器AJAX應(yīng)用程序?！馞irefox開發(fā)MozillaFirefox3是一個(gè)提供了大量增強(qiáng)的重要版本,其中一些增強(qiáng)針對(duì)用戶,而另一些則針對(duì)開發(fā)人員。其中一項(xiàng)最有趣的改進(jìn)使Web開發(fā)人員能夠構(gòu)建即使在用戶斷開Internet的時(shí)候仍然可以工作的Web應(yīng)用程序。Firefox3.0內(nèi)置了對(duì)微格式的支持,可通過Firefox擴(kuò)展訪問這種API?！馱eb站點(diǎn)設(shè)計(jì)與維護(hù)Web站點(diǎn)的設(shè)計(jì)是體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑,因此,必須明確設(shè)計(jì)站點(diǎn)的目的和用戶需求,從而做出切實(shí)可行的計(jì)劃。正如可以使用標(biāo)準(zhǔn)工具和技術(shù)來使得站點(diǎn)變得可維護(hù)(驗(yàn)證、分離CSS和HTML,組織樣式表)一樣,我們也可以執(zhí)行一些常規(guī)任務(wù)來進(jìn)一步改進(jìn)站點(diǎn)的組織和使用。其中一些任務(wù)將提高設(shè)計(jì)者和程序員維護(hù)站點(diǎn)的能力;一些任務(wù)將讓站點(diǎn)變得可以讓客戶更快地訪問;一些將讓站點(diǎn)變得讓人更容易而且更樂于使用它。3web前端開發(fā)技術(shù)隨著人們對(duì)用戶體驗(yàn)的要求越來越高,前端開發(fā)的技術(shù)難度越來越大,Web前端開發(fā)工程師這一職業(yè)終于從設(shè)計(jì)和制作不分的局面中獨(dú)立出來。Web前端開發(fā)工程師既要與上游的交互設(shè)計(jì)師、視覺設(shè)計(jì)師和產(chǎn)品經(jīng)理溝通,又要與下游的服務(wù)器端工程師溝通。這就從知識(shí)的廣度上對(duì)Web前端開發(fā)工程師提出了要求。前端開發(fā)的入門門檻其實(shí)非常低,與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比,前端開發(fā)的學(xué)習(xí)曲線是先快后慢。所以,對(duì)于從事IT工作的人來說,前端開發(fā)是個(gè)不錯(cuò)的切入點(diǎn)。但是后面的學(xué)習(xí)曲線越來越陡峭,每前進(jìn)一步都很難。另一方面,正如前面所說,前端開發(fā)是個(gè)非常新的職業(yè),對(duì)一些規(guī)范和最佳實(shí)踐的研究都處于探索階段?？傆行碌撵`感和技術(shù)不時(shí)閃現(xiàn)出來,例如CSSsprite、負(fù)邊距布局、柵格布局等;各種JavaScript框架層出不窮,為整個(gè)前端開發(fā)領(lǐng)域注入了巨大的活力;瀏覽器大戰(zhàn)也越來越白熱化,跨瀏覽器兼容方案依然是五花八門。為了滿足“高可維護(hù)性”的需要,需要更深入、更系統(tǒng)地去掌握前端知識(shí),這樣才可能創(chuàng)建一個(gè)好的前端架構(gòu),保證代碼的質(zhì)量。一位好的Web前端開發(fā)工程師在知識(shí)體系上既要有廣度,又要有深度,以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁,現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上,還是開發(fā)方式上,現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā),所以現(xiàn)在不再叫網(wǎng)頁制作,而是叫Web前端開發(fā)。Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要,而且需要專業(yè)的前端工程師才能做好,這方面的專業(yè)人才近兩年來備受青睞。Web前端開發(fā)工程師需要掌握的技術(shù):(1)前端開發(fā)技術(shù):其中包括:CSS、HTML、DOM、AJAX等,在掌握這些技術(shù)的同時(shí),還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。(2)優(yōu)化技術(shù):在一名合格的前端工程師的知識(shí)結(jié)構(gòu)中,網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)也是必須掌握的。(3)使用工具:必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)。(4)理論知識(shí):除了要掌握技術(shù)層面的知識(shí),還要掌握理論層面的知識(shí),包括代碼的可維護(hù)性、組件的易用性、分層語義模板和瀏覽器分級(jí)支持,等等。4web前端開發(fā)語言的特點(diǎn)看似簡單的網(wǎng)頁制作,要做得更好、更專業(yè),是需要潛心研究的。這就是前端開發(fā)的特點(diǎn)。代碼質(zhì)量是前端開發(fā)中應(yīng)該重點(diǎn)考慮的問題之一。例如,實(shí)現(xiàn)一個(gè)網(wǎng)站界面可能會(huì)有無數(shù)種方案,但有些方案的維護(hù)成本會(huì)比較高,有些方案會(huì)存在性能問題,而有些方案則更易于維護(hù),而且性能也比