web前端開發(fā)技術(shù)與標準

web前端開發(fā)技術(shù)與標準

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