摘要：互聯(lián)網(wǎng)的發(fā)展如今日新月異，目前市場(chǎng)上最基礎(chǔ)且需求量最大的IT技術(shù)主要是圍繞著前端開(kāi)發(fā)，后端java開(kāi)發(fā)，以及嵌入式來(lái)展開(kāi)。人工智能，大數(shù)據(jù)，云儲(chǔ)存云計(jì)算等也逐漸成為近些年熱門(mén)的話題。本文淺談web前端開(kāi)發(fā)的進(jìn)階過(guò)程，該項(xiàng)技術(shù)由于其應(yīng)用廣泛，實(shí)現(xiàn)效果豐富等特點(diǎn)已成為經(jīng)濟(jì)市場(chǎng)用戶在網(wǎng)站或APP上進(jìn)行閱讀瀏覽所依靠的直接技術(shù)，也為給剛進(jìn)入行業(yè)的畢業(yè)生以及有需求的其他人提供更合理的學(xué)習(xí)參考。

關(guān)鍵詞：Web前端開(kāi)發(fā);HTML;CSS;JavaScript;前端技術(shù)學(xué)習(xí)

由于我國(guó)互聯(lián)網(wǎng)行業(yè)的飛速發(fā)展，Web前端開(kāi)發(fā)已經(jīng)成為尤為重要的一門(mén)行業(yè)，本文闡述Web開(kāi)發(fā)相關(guān)的主要技術(shù)，包括HTML5、XHTML、層疊樣式表、JavaScript、Vue/React/Angular/Layui框架、跨瀏覽器開(kāi)發(fā)、網(wǎng)頁(yè)網(wǎng)站內(nèi)容的優(yōu)化設(shè)計(jì)。同時(shí)詳細(xì)的介紹前端學(xué)習(xí)路線，目前前端開(kāi)發(fā)工程師的職能需求。本文詳細(xì)地對(duì)Web前端開(kāi)發(fā)設(shè)計(jì)方式進(jìn)行深入分析探討，主要是為給同行業(yè)者提供更加合理的參考。

1 Web前端開(kāi)發(fā)的主要技術(shù)研究

Web前端開(kāi)發(fā)包含三個(gè)基本要素：HTML;CSS;JavaScript。但又不僅僅是這些，對(duì)于網(wǎng)站性能的優(yōu)化，TCP網(wǎng)絡(luò)協(xié)議的理解，后端相應(yīng)知識(shí)技能儲(chǔ)備，甚至組件的易用性復(fù)用性，Photoshop部分功能應(yīng)用等都是一名合格前端應(yīng)當(dāng)掌握的。

（1）HTML5：全稱為超文本標(biāo)記語(yǔ)言（HTML）5。它其實(shí)是對(duì)HTML的第五次修訂，本身并非是一項(xiàng)技術(shù)而是一套標(biāo)準(zhǔn)。國(guó)內(nèi)通用的也并非單指這一標(biāo)準(zhǔn)，而是html與css3及JavaScript和api等的一個(gè)組合。

（2）XHTML：也是在HTML基礎(chǔ)之上發(fā)展而出，稱為可擴(kuò)展超文本標(biāo)記語(yǔ)言/他更加的嚴(yán)格，因此相對(duì)于松散的HTML語(yǔ)法，XHTML更容易被機(jī)器正確的解析，它與層疊樣式表（CSS）結(jié)合后發(fā)揮了它更強(qiáng)大的功力，這是樣式和內(nèi)容分離的同時(shí)，又能有機(jī)的組合網(wǎng)頁(yè)代碼。

（3）層疊樣式表（Cascading Style Sheets， CSS）：他是用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。頁(yè)面編寫(xiě)者可以使用 CSS 更精確地控制內(nèi)容的外觀。 CSS 規(guī)則由一個(gè)選擇符和設(shè)置的屬性和值組成，其中的選擇符決定應(yīng)用這個(gè)規(guī)則的內(nèi)容。

（4）JavaScript：JavaScript 是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。 同時(shí)也是一種廣泛用于客戶端 Web開(kāi)發(fā)的腳本語(yǔ)言，常用來(lái)給 HTML 網(wǎng)頁(yè)添加動(dòng)態(tài)功能，例如響應(yīng)用戶的各種操作。完整的JavaScript 實(shí)現(xiàn)包含三個(gè)部分：ECMAScript、文檔對(duì)象模型、字節(jié)順序記號(hào)。JavaScript 的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁(yè)包含更多活躍的元素和更加精彩的內(nèi)容。JavaScript 短小精悍，又是在客戶機(jī)上執(zhí)行的，大大提高了網(wǎng)頁(yè)的瀏覽速度和交互能力。它是專門(mén)為制作 Web 網(wǎng)頁(yè)而量身定做的一種簡(jiǎn)單的編程語(yǔ)言。

（5）Vue/React/Angular/Layui框架：互聯(lián)網(wǎng)的崛起，使web業(yè)務(wù)越來(lái)越復(fù)雜和多元化，更主要的原因是移動(dòng)端的興起以及需要分離數(shù)據(jù)，使得前后端分離成為主流，前端的任務(wù)也就逐漸變重?？蚣苣芎芎玫耐瓿梢韵聨状箢悊?wèn)題：重復(fù)引用外部js;組件化;開(kāi)發(fā)周期長(zhǎng);性能提升。目前市場(chǎng)上最常用的為Vue，React，Angular，Layui框架，各有優(yōu)缺但相互之間也可以融會(huì)貫通。

（6）跨瀏覽器開(kāi)發(fā)：在不同的瀏覽器或具有不同設(shè)置的瀏覽器上，Web頁(yè)面的執(zhí)行方式不一樣。 一直以來(lái)“對(duì)多個(gè)瀏覽器進(jìn)行測(cè)試”像是一條難以解開(kāi)的咒語(yǔ)，因?yàn)樾枰獙?duì)大量瀏覽器進(jìn)行測(cè)試。對(duì)所有瀏覽器進(jìn)行測(cè)試（尤其是目前）幾乎是不可能的?？鐬g覽器測(cè)試的技術(shù)，既包括比較全面的技術(shù)，也包括快速但不嚴(yán)謹(jǐn)?shù)募夹g(shù)。例如最優(yōu)化跨瀏覽器AJAX應(yīng)用程序。

（7）網(wǎng)頁(yè)網(wǎng)站內(nèi)容的優(yōu)化設(shè)計(jì)：我國(guó)網(wǎng)站制作的Web前端開(kāi)發(fā)設(shè)計(jì)方面的工作應(yīng)該及時(shí)注意到對(duì)互聯(lián)網(wǎng)網(wǎng)頁(yè)內(nèi)容的優(yōu)化管理，其可能影響到網(wǎng)站的實(shí)際運(yùn)營(yíng)情況。與此同時(shí)，也可以在盡量防止我國(guó)互聯(lián)網(wǎng)用戶在下載時(shí)出現(xiàn)的相關(guān)問(wèn)題，特別是存在的下載速率過(guò)度消極狀態(tài)等問(wèn)題，也就可能存在互聯(lián)網(wǎng)網(wǎng)站頁(yè)面的下載時(shí)間逐漸偏長(zhǎng)，這些情況和問(wèn)題都可能導(dǎo)致計(jì)算機(jī)互聯(lián)網(wǎng)網(wǎng)站企業(yè)的真實(shí)運(yùn)營(yíng)工作效率的下降。所以，每個(gè)計(jì)算機(jī)互聯(lián)網(wǎng)Web前端開(kāi)發(fā)設(shè)計(jì)的技術(shù)人員，在對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行優(yōu)化和處理的過(guò)程中，都應(yīng)該盡量全面地考慮各個(gè)環(huán)節(jié)對(duì)于整體網(wǎng)站頁(yè)面的運(yùn)行作用和實(shí)際價(jià)值。

2 前端開(kāi)發(fā)學(xué)習(xí)進(jìn)階路線

下面將以類思維導(dǎo)圖的形式詳細(xì)介紹一個(gè)入門(mén)到進(jìn)階直至高級(jí)的前端開(kāi)發(fā)工程師的學(xué)習(xí)路線，希望能對(duì)大家有所幫助。

2.1 準(zhǔn)備篇

（1）常用開(kāi)發(fā)工具的安裝配置：sublime、webstorm、Visual Studio Code

（2）HTML：理解如何瀏覽和創(chuàng)建網(wǎng)頁(yè)，基本語(yǔ)法規(guī)范、網(wǎng)頁(yè)之間的連接與跳轉(zhuǎn)、標(biāo)簽節(jié)點(diǎn)層級(jí)節(jié)點(diǎn)

（3）CSS：基本語(yǔ)法、盒模型的高級(jí)用法、常用布局模型

（4）JavaScript入門(mén)：基礎(chǔ)語(yǔ)法和變量、數(shù)據(jù)類型轉(zhuǎn)換、分支與循環(huán)、函數(shù)、數(shù)組內(nèi)置對(duì)象

（5）首頁(yè)實(shí)戰(zhàn)：CSS代碼抽象與復(fù)用、浮動(dòng)盒子布局、層級(jí)的使用、定位特性的各種使用場(chǎng)景

2.2 基礎(chǔ)篇

（1）JavaScript基礎(chǔ)：JS語(yǔ)言基本構(gòu)成 、變量與表達(dá)式、數(shù)據(jù)類型、語(yǔ)句結(jié)構(gòu)、函數(shù)基礎(chǔ)

（2）DOM + BOM：節(jié)點(diǎn)對(duì)象的操作、事件特性及使用、常見(jiàn)的內(nèi)置DOM對(duì)象、常用的BOM功能

（3）網(wǎng)頁(yè)特效與進(jìn)階：網(wǎng)頁(yè)特效中常用的編程接口、動(dòng)畫(huà)編程與事件、緩動(dòng)框架封裝和應(yīng)用、正則表達(dá)式及其應(yīng)用

（4）jQuery：選擇器、常用API、插件機(jī)制、原理分析、項(xiàng)目實(shí)戰(zhàn)

2.3 核心篇

（1）HTML5+CSS3：語(yǔ)義化結(jié)構(gòu)、其他常見(jiàn)API、CSS3選擇器和新屬性、CSS3過(guò)渡和動(dòng)畫(huà)、CSS3伸縮布局

（2）服務(wù)端編程：端的概念、Web服務(wù)器概念、XML與jSON

（3）PHP：PHP基礎(chǔ)語(yǔ)法、PHP服務(wù)端編程基礎(chǔ)

（4）AJAX：異步數(shù)據(jù)交互、模板引擎的使用、跨域的實(shí)現(xiàn)方案

（5）移動(dòng)Web開(kāi)發(fā);響應(yīng)式布局、Bootstrap框架剖析、Zepto.js庫(kù)、預(yù)編譯CSS

2.4 進(jìn)階篇

（1）面向?qū)ο笤贘S中的體現(xiàn)與實(shí)踐：面向?qū)ο罄碚?、?duì)象基本概念、對(duì)象屬性和方法

（2）開(kāi)發(fā)過(guò)程中常用的模式與思想：開(kāi)閉原則、MVC思想、高內(nèi)聚低耦合、工廠模式

（3）JavaScript高級(jí)特性：通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象、原型對(duì)象和原型鏈、繼承的多種實(shí)現(xiàn)方式、函數(shù)的本質(zhì)以及Function構(gòu)造函數(shù)、作用域鏈、閉包

（4）封裝一個(gè)自己的框架：選擇器框架、CSS操作封裝、屬性操作封裝、其他DOM封裝

2.5 高級(jí)篇

（1）前端工作流：自動(dòng)化流程工具使用、源代碼版本控制、依賴項(xiàng)管理工具、項(xiàng)目模板腳手架、

（2）流行框架：Angular基本使用、Angular高級(jí)特性、Vuejs基本入門(mén)和路由、項(xiàng)目實(shí)戰(zhàn)

（3）模塊化開(kāi)發(fā)：模塊化開(kāi)發(fā)規(guī)范、常用的模塊（下轉(zhuǎn)頁(yè)）

（上接頁(yè)）化開(kāi)發(fā)工具、RequireJS與SeaJS、AMD/CMD、統(tǒng)一規(guī)范UMD

（4）NodeJS：Node介紹、基本操作、常用內(nèi)置模塊、高級(jí)特性、常用框架

2.6 移動(dòng)APP開(kāi)發(fā)

（1）混合式應(yīng)用開(kāi)發(fā)：混合式平臺(tái)架構(gòu)、混合式開(kāi)發(fā)實(shí)踐、當(dāng)前市面常用APP端實(shí)戰(zhàn)

（2）微信開(kāi)發(fā)：微信公眾號(hào)學(xué)習(xí)、平臺(tái)API對(duì)接、X5兼容處理、內(nèi)置接口

（3）React：組件化思想、核心特性、JSX、TODOMVC案例

（4）React Native：環(huán)境與工具、常用組件與插件、綜合案例實(shí)踐

（5）其他移動(dòng)端APP開(kāi)發(fā)框架：phoneGAP、AppCan、HTML5+、Framework7

學(xué)習(xí)完這些因該對(duì)前端開(kāi)發(fā)有了基本的認(rèn)知，想深入學(xué)習(xí)還需要學(xué)習(xí)后臺(tái)和前臺(tái)的協(xié)作方式，從全局的角度去理解項(xiàng)目的整個(gè)生命周期等等。

3 Web前端開(kāi)發(fā)工程師

用戶需求的激增促使著技術(shù)的進(jìn)步，現(xiàn)如今，市場(chǎng)上對(duì)于用戶體驗(yàn)的要求在不斷上漲，這對(duì)于前端開(kāi)發(fā)工作者的要求，技術(shù)難度逐步增大。前端開(kāi)發(fā)工程師這一職業(yè)，也逐步有了更為清晰的劃定判別，告別了切圖仔的稱號(hào)，從平面上的設(shè)計(jì)中脫離開(kāi)來(lái)，更加全面的投入到制作中去。此時(shí)前后端分離的工作模式就要求了一個(gè)標(biāo)準(zhǔn)合格的Web前端開(kāi)發(fā)工程師既要能和上游的UI設(shè)計(jì)師，視覺(jué)設(shè)計(jì)師，產(chǎn)品經(jīng)理等溝通好，確定需求，又要與下游的后端開(kāi)發(fā)工程師們溝通數(shù)據(jù)功能的實(shí)現(xiàn)等。這是一個(gè)對(duì)于Web前端開(kāi)發(fā)工程師知識(shí)面的試煉。

雖然前端開(kāi)發(fā)工程師的入門(mén)門(mén)檻相比較于后端會(huì)低，但他技術(shù)上升的空間是寬廣無(wú)限的，比較適合對(duì)該行業(yè)有興趣的工作者切入學(xué)習(xí)。

4 結(jié)語(yǔ)

前端開(kāi)發(fā)的學(xué)習(xí)其實(shí)是一條很長(zhǎng)久的道路，我們需要在這個(gè)旅途中不斷地充實(shí)完善自己，并且對(duì)與新的技能與規(guī)范，要有求知若渴的態(tài)度。一位好的前端開(kāi)發(fā)工程師在知識(shí)體系上既要有廣度，也要有深度，既要有具體的技術(shù)，又要有抽象的理念，這都是不同于服務(wù)端的。路漫漫其修遠(yuǎn)兮，吾將上下而求索。

參考文獻(xiàn)：

[1] 魏娜.Web前端開(kāi)發(fā)技術(shù)研究[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版），2011（29）.

[2] 張愛(ài)華，呂京濤.CSS快速入門(mén)[M].青島出版社，2000.

[3] 王保平.改變世界的Web前端開(kāi)發(fā)[J].程序員，2009（02）.

作者簡(jiǎn)介：張婉杰（1997—），女，本科，研究方向：網(wǎng)絡(luò)工程。

（作者單位：武漢輕工大學(xué)）