淺談Web前端開發進階之路

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

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

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

1 Web前端開發的主要技術研究

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

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

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

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

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

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

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

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

2 前端開發學習進階路線

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

2.1 準備篇

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

（2）HTML：理解如何瀏覽和創建網頁，基本語法規范、網頁之間的連接與跳轉、標簽節點層級節點

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

（4）JavaScript入門：基礎語法和變量、數據類型轉換、分支與循環、函數、數組內置對象

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

2.2 基礎篇

（1）JavaScript基礎：JS語言基本構成 、變量與表達式、數據類型、語句結構、函數基礎

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

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

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

2.3 核心篇

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

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

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

（4）AJAX：異步數據交互、模板引擎的使用、跨域的實現方案

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

2.4 進階篇

（1）面向對象在JS中的體現與實踐：面向對象理論、對象基本概念、對象屬性和方法

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

（3）JavaScript高級特性：通過構造函數創建對象、原型對象和原型鏈、繼承的多種實現方式、函數的本質以及Function構造函數、作用域鏈、閉包

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

2.5 高級篇

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

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

（3）模塊化開發：模塊化開發規范、常用的模塊（下轉頁）

（上接頁）化開發工具、RequireJS與SeaJS、AMD/CMD、統一規范UMD

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

2.6 移動APP開發

（1）混合式應用開發：混合式平臺架構、混合式開發實踐、當前市面常用APP端實戰

（2）微信開發：微信公眾號學習、平臺API對接、X5兼容處理、內置接口

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

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

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

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

3 Web前端開發工程師

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

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

4 結語

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

參考文獻：

[1] 魏娜.Web前端開發技術研究[J].現代計算機（專業版），2011（29）.

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

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

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

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