Web2.0時代網(wǎng)站前端開發(fā)大師研究分析

任 勇

（武漢職業(yè)技術(shù)學(xué)院，湖北 武漢 430074）

Web2.0時代網(wǎng)站前端開發(fā)大師研究分析

任 勇

（武漢職業(yè)技術(shù)學(xué)院，湖北 武漢 430074）

隨著Web 2.0時代的到來，互聯(lián)網(wǎng)進入千家萬戶，各種應(yīng)用以Web的形式展現(xiàn)在人們眼前，對網(wǎng)站前端設(shè)計師的需求也越來越多。文章闡述了網(wǎng)站前端的概念、發(fā)展現(xiàn)狀、發(fā)展趨勢以及如何成為一個好的前端設(shè)計師以及所需要的基本技能。

網(wǎng)站前端；前端開發(fā)；Web 2.0

1 網(wǎng)站前端的概念

所謂網(wǎng)站前端是一個綜合的概念，前端簡單來說就是來做網(wǎng)站前端的，具體就是采用Web標(biāo)準(zhǔn)化，根據(jù)需求設(shè)計出來的具有很強的美學(xué)意義頁面，以文字、圖片、多媒體等形式承載一定的信息提供給用戶。前端頁面文檔構(gòu)成在元素上可以分為行為、結(jié)構(gòu)和表現(xiàn)3個層次，元素行為主要是由DOM，Javascript等腳本語言來實現(xiàn)；結(jié)構(gòu)主要是由HTML，XHTML和XML語言來實現(xiàn)；表現(xiàn)主要是由CSS語言來實現(xiàn)。也就是Web用戶可以看得見碰得著的東西，如通過瀏覽器可以看頁面新聞，可以看視頻直播等。

2 網(wǎng)站前端的發(fā)展現(xiàn)狀

隨著網(wǎng)站在互聯(lián)網(wǎng)的的數(shù)量和規(guī)模方面的快速發(fā)展和網(wǎng)民數(shù)量的日益龐大，Web應(yīng)用已經(jīng)深入到人們生活和工作的每一個角落，成了必不可少的媒介，這樣也直接導(dǎo)致網(wǎng)民對網(wǎng)站前端的設(shè)計要求越來越多樣化，要求也越來越高，對設(shè)計師的技能要求也越來越高。

早期網(wǎng)站前端設(shè)計使用表格來定位和排版網(wǎng)頁風(fēng)靡一時，通過嵌套大量的表格保證網(wǎng)頁內(nèi)容不錯位，導(dǎo)致了維護和更新非常困難，工作量大，產(chǎn)生了大量冗余的代碼，不利于網(wǎng)站的優(yōu)化，因此表格制作網(wǎng)頁的時代逐漸消退。隨之而來的是CSS+DIV—當(dāng)前網(wǎng)頁布局的主流技術(shù)。CSS+DIV最核心的優(yōu)點是實現(xiàn)了網(wǎng)頁的內(nèi)容、表現(xiàn)和行為的分離，減少了冗余的代碼，提高了網(wǎng)頁訪問速度，使得頁面的改版更加靈活方便。從前端人才的數(shù)量跟結(jié)構(gòu)上來說也有很大的缺口，很多人把網(wǎng)頁設(shè)計師理解為前端開發(fā)，這個是不對的，前端開發(fā)需要更多的知識結(jié)構(gòu)與經(jīng)驗。

3 網(wǎng)站前端的發(fā)展趨勢

現(xiàn)在網(wǎng)站前端的開發(fā)越來越進步，以前一個可以全部設(shè)計開發(fā)出來慢慢地被取代，隨著JS，jQuery，SEO，Ajax等技術(shù)的不斷發(fā)展變革，用戶制作個性的網(wǎng)站跟頁面越來越多樣化。這就需要前端設(shè)計師充分考慮編碼的規(guī)范性、代碼的安全性、頁面性能優(yōu)化、SEO的優(yōu)化這些問題，以此來提高網(wǎng)站前端的性能。網(wǎng)站前端設(shè)計方面未來更趨向于HTML5和CSS3的結(jié)合。HTML5以HTML4為基礎(chǔ)，對HTML4進行了大量的修改，HTML5規(guī)范是基于用戶優(yōu)先原則編寫，宗旨是“用戶即上帝”。CSS3把以前很多需要圖片和JS結(jié)合才能實現(xiàn)的效果，用幾行代碼就實現(xiàn)了，不僅能簡化前端開發(fā)工作人員的設(shè)計過程，還能加快頁面載入速度。特別現(xiàn)在隨著智能手機、各種平板等終端的普及，網(wǎng)站前端的展示方式不僅僅是計算機的瀏覽器，各種移動終端都可以與用戶進行信息展示，需要考慮跨平臺兼容，注意與用戶的交互性和瀏覽的舒適性。這些用戶與終端的增加也給前端的發(fā)展帶來更多的機遇。

4 網(wǎng)站前端設(shè)計師需要的基本知識

想要成為一名前端工程師的大牛，必須有豐富的知識儲備并且掌握各種開發(fā)軟件的使用。

（1）計算機基礎(chǔ)知識儲備。編譯原理、計算機網(wǎng)絡(luò)、操作系統(tǒng)、算法原理、軟件工程、軟件測試原理。對這個課程知識有基本的了解掌握，是計算機入門的基礎(chǔ)。

（2）頁面切圖。所需要的知識H T M L，CSS和PhotoShop。HTML是超文本標(biāo)記語言，由很多的標(biāo)記組成，通過標(biāo)記來規(guī)范頁面元素，制作出的網(wǎng)頁文件可以在各種瀏覽器中打開，前端設(shè)計師需要掌握HTML基本網(wǎng)頁標(biāo)記的使用。CSS層疊新式表可以提供豐富的樣式，通過標(biāo)記的屬性可以控制標(biāo)記中的內(nèi)容按照指定的CSS樣式來表現(xiàn)。通過HTTML的DIV標(biāo)簽和CSS的結(jié)合使用進行頁面布局，可以使頁面內(nèi)容和行為分離，緩解Web服務(wù)器的壓力，減少頁面的冗余代碼，提高站點頁面的加載速度，實現(xiàn)頁面表現(xiàn)的多樣性，提升網(wǎng)站改版的便捷度和頁面的安全性，有了這個基礎(chǔ)可以通過PhotoShop切片功能，得到所需要的網(wǎng)頁布局素材，也可以通過PhotoShop進行個別素材的修改。

（3）掌握前端標(biāo)準(zhǔn)和規(guī)范。所涉及的知識包括：W3C，DOM，BOM，XHTML，XML，JSON，HTML5，CSS3，ECMAScript，CommonJS，HTTP1.1。其中W3C最重要的一項工作就是發(fā)展Web規(guī)范，規(guī)定Web的通信協(xié)議和一些構(gòu)建模塊，如HTML規(guī)范，HTML5的規(guī)范等，前端設(shè)計師必須掌握這些規(guī)范并按照規(guī)范來進行設(shè)計；DOM文檔對象模型，是W3C組織推薦的處理可擴展標(biāo)志語言的標(biāo)準(zhǔn)編程接口，DOM技術(shù)可以使頁面的交互性大大增強；BOM是瀏覽器的對象模型，可以用來獲取或設(shè)置瀏覽器的屬性、行為；XHTML是一種可擴展的標(biāo)記語言，主要是實現(xiàn)HTML向XML的過渡，Web標(biāo)準(zhǔn)就是基于XHTML的應(yīng)用；XML可擴展標(biāo)記語言主要用來傳輸和存儲數(shù)據(jù)。JSON （JavaScript Object Notation） 是一種輕量級的數(shù)據(jù)交換格式。它基于ECMAScript的一個子集，也是JavaScript 對象表示語法的子集；HTML5和CSS3未來前端發(fā)展的趨勢；CommonJS API定義很多普通應(yīng)用程序（主要指非瀏覽器的應(yīng)用）使用的API，從而填補了這個空白。它的終極目標(biāo)是提供一個類似Python，Ruby和Java標(biāo)準(zhǔn)庫；HTTP1.1超文本傳輸協(xié)議版本1.1，可以使瀏覽器更加高效，網(wǎng)絡(luò)傳輸減少YUI。

（4）前端框架和庫。所涉及的知識包括：jQuery，YUI3，Prototype，Mootools，ExtJS，Smart，Django，Zend，QUnit，Jasmine，前端MVC。其中掌握必須的JS框架如jQuery，YUI3，Prototype，Mootools，ExtJS等。JS框架主要是javaScript庫，能使用戶更方便地處理HTML documents，events，方便實現(xiàn)交互；Web開發(fā)框架Django；前端必須掌握MVC框架，MVC是一種使用模型、視圖和控制器設(shè)計創(chuàng)建Web應(yīng)用程序的模式，Model表示應(yīng)用程序核心如數(shù)據(jù)庫記錄表，View顯示數(shù)據(jù)，Controller處理輸入數(shù)據(jù)。

（5）移動終端的知識。所涉及的知識包括：jQueryMobile，HTML5，CSS3，iPhone，iPad，iOs，Android，responsive UI Design。其中jQuery Mobile是jQuery框架的一個組件（而非jQuery的移動版本）。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile可以讓開發(fā)人員開發(fā)出真正的移動Web網(wǎng)站。需要對移動終端iphone手機使用跟了解，iPad平板電腦的使用跟了解，對iOs系統(tǒng)的掌握，對Android系統(tǒng)的掌握，才能實現(xiàn)移動終端UI設(shè)計。

（6）編程語言。所涉及的知識JavaScript，PHP，Python，Perl，Ruby，BashShell，NodeJS，F(xiàn)lashAS。其中基本的JS，JS框架知識，PHP網(wǎng)站設(shè)計是最流行的通用開源腳本語言，它的語法兼顧了C語言、Java語言和Perl的優(yōu)點，上手快，使用廣泛，適合Web開發(fā)領(lǐng)HTML標(biāo)記的CI域，PHP將程序語言嵌入到HTML文檔中，執(zhí)行的效率要比生成HTML標(biāo)記的CGI高許多。

（7）瀏覽器的兼容性。所涉及的瀏覽器IE6，IE7，IE8，IE9，F(xiàn)irefox3.6，F(xiàn)irefox4，F(xiàn)irefox5，F(xiàn)irefox6，F(xiàn)irefox7，F(xiàn)irefox8，Chrome，Opera，Safari。在對頁面進行布局時必須掌握CSS的屬性值在各個瀏覽器中的效果，使用必要的CSShack來兼容不同的瀏覽器，避免同樣的布局在不同的瀏覽器中顯示混亂，這也是使用DIV+CSS布局必須考慮的內(nèi)容。

（8）頁面性能優(yōu)化。所涉及的知識包括：WebPageTest，ShowSlow，YSlow，34Rule，PageSpeed，HttpWatch，DynaTrace’s Ajax。通過http請求優(yōu)化，利用客戶端的緩存對網(wǎng)站進行優(yōu)化，使用壓縮技術(shù)加快頁面?zhèn)鬏敚瑢撁嬖剡M行優(yōu)化，在頁面中使用Ajax技術(shù)優(yōu)化應(yīng)用?？梢允褂闷渲械腟howSlow，YSlow工具搭建環(huán)境對頁面性能進行測試查看優(yōu)化的結(jié)果。

（9）調(diào)試工具。所涉及的知識包括：Firebug，F(xiàn)irebuglite，Web Inspector，YSlow，Smushit，IEDeveloperToolBar，IETester，SuperPreview，JsBeautifier，F(xiàn)iddler，WireShark，tcpdum。其中可以使用Web Inspector工具對網(wǎng)頁進行審查；使用Firebug檢查調(diào)試頁面的JavaScript；使用IETester測試頁面在各種版本瀏覽器下的運行情況，使用WireShark測試網(wǎng)絡(luò)封等。

5 結(jié)語

想要成一名網(wǎng)站前端大師并非短時間內(nèi)就可以練成，需要不斷地積累知識和實踐，當(dāng)然上面所提到的知識技能并不是要把所有的都掌握了才可以，同一類型的掌握一到兩個就行。在實際前端開發(fā)的時候并非將所有的知識都用上，有時只需要其中一部分，所以在這個大師之路上需要先掌握必須知識，再不斷擴充知識面，然后融會貫通、靈活運用、不斷學(xué)習(xí)，最后才能成為大師。

[1]鄭逸凡.高并發(fā)網(wǎng)站的前端優(yōu)化技術(shù)研究[J].通化師范學(xué)院學(xué)報，2015（8）：4-6.

[2]張曉紅.網(wǎng)站前端模塊化開發(fā)策略研究[J].計算機時代，2013（2）：38-39.

[3]周志堅.高職院校網(wǎng)站前端設(shè)計課程教學(xué)模塊的選擇思路[J].科技風(fēng)，2015（22）：245-254.

Study and analysis of the front end master in Web 2.0 era

Ren Yong
（Wuhan Polytechnic, Wuhan 430074, China）

With the arrival of the era of Web 2.0, the Internet has been popular with thousands of households, a variety of applications appears in front of people in the form of Web, there are more and more demands for website designer. This paper expounds the concept of Web front-end development status, development trend and how to become a good designer and basic skills required.

front end of the website; front end development; Web 2.0

任勇（1984— ），男，湖北襄樊。