淺談Web前端開發(fā)進階之路

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

關鍵詞：Web前端開發(fā);HTML;CSS;JavaScript;前端技術學習

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

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

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

（1）HTML5：全稱為超文本標記語言（HTML）5。它其實是對HTML的第五次修訂，本身并非是一項技術而是一套標準。國內(nèi)通用的也并非單指這一標準，而是html與css3及JavaScript和api等的一個組合。

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

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

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

（5）Vue/React/Angular/Layui框架：互聯(lián)網(wǎng)的崛起，使web業(yè)務越來越復雜和多元化，更主要的原因是移動端的興起以及需要分離數(shù)據(jù)，使得前后端分離成為主流，前端的任務也就逐漸變重。框架能很好的完成以下幾大類問題：重復引用外部js;組件化;開發(fā)周期長;性能提升。目前市場上最常用的為Vue，React，Angular，Layui框架，各有優(yōu)缺但相互之間也可以融會貫通。

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

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

2 前端開發(fā)學習進階路線

下面將以類思維導圖的形式詳細介紹一個入門到進階直至高級的前端開發(fā)工程師的學習路線，希望能對大家有所幫助。

2.1 準備篇

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

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

（3）CSS：基本語法、盒模型的高級用法、常用布局模型

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

（5）首頁實戰(zhàn)：CSS代碼抽象與復用、浮動盒子布局、層級的使用、定位特性的各種使用場景

2.2 基礎篇

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

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

（3）網(wǎng)頁特效與進階：網(wǎng)頁特效中常用的編程接口、動畫編程與事件、緩動框架封裝和應用、正則表達式及其應用

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

2.3 核心篇

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

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

（3）PHP：PHP基礎語法、PHP服務端編程基礎

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

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

2.4 進階篇

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

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

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

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

2.5 高級篇

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

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

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

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

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

2.6 移動APP開發(fā)

（1）混合式應用開發(fā)：混合式平臺架構(gòu)、混合式開發(fā)實踐、當前市面常用APP端實戰(zhàn)

（2）微信開發(fā)：微信公眾號學習、平臺API對接、X5兼容處理、內(nèi)置接口

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

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

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

學習完這些因該對前端開發(fā)有了基本的認知，想深入學習還需要學習后臺和前臺的協(xié)作方式，從全局的角度去理解項目的整個生命周期等等。

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

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

雖然前端開發(fā)工程師的入門門檻相比較于后端會低，但他技術上升的空間是寬廣無限的，比較適合對該行業(yè)有興趣的工作者切入學習。

4 結(jié)語

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

參考文獻：

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

[2] 張愛華，呂京濤.CSS快速入門[M].青島出版社，2000.

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

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

（作者單位：武漢輕工大學）