Web前端開發技術與學習探討

李強

（山西機電職業技術學院信息與管理工程系，山西長治046011）

?

Web前端開發技術與學習探討

李強

（山西機電職業技術學院信息與管理工程系，山西長治046011）

Web前端開發越來越受到IT從業人員和互聯網企業的關注。優秀的Web前端開發工程師一直是互聯網行業HR競相追逐的人才。文章從Web前端開發的核心技術出發，對web前端開發的主流技術及特點作了綜述，并對Web前端開發工程師應具備的技術能力和學習方法做了探討。

Web前端；學習；HTML5

1　概述

Web前端開發從網頁制作發展而來，在這之前，網頁設計師使用Fireworks、Dreamweaver等工具就可高效率地制作網頁。但在web2.0時代，網頁的內容更加生動、豐富、高度交互，這就對前端開發人員提出了更多更高的要求。文章以開發Web前端所需要的核心技術：HTML、CSS和JavaScript為基礎，參考拉鉤網上web前端開發工程師崗位要求，對Web前端開發的主流技術做了綜述，并分享了個人的一些學習方法和心得，希望對有意從事Web前端開發的同學們有所啟示和幫助。

2　Web前端開發技術綜述（HTML5　、CSS、JavaScript、jQuery、Bootstrap、Ajax）

對于前端開發，業內有這樣的說法：“html是內容，CSS是表現，JavaScript是行為”。HTML、CSS、JavaScript是Web前端開發的三大技術核心，在此基礎上延伸了大量的插件、框架和模板和開發工具，諸如JQuery、Bootstrap、Ajax等，它們的引入豐富了Web前端的交互內容，提高了Web的開發效率。以下分別就這些技術和工具加以介紹。

2.1HTML5

HTML5是繼HTML4.01和XHTML1.0之后最新版本的超文本標記語言。它由一群自由思想者組成的團隊設計，并最終實現多媒體支持、交互性、更加智能的表單，以及更好的語義化標記，它是web前端開發需要掌握的首要技術。

HTML5較早期版本具有以下的優點。

（1）更具包容性

相對于XHTML2.0要求遵循規則，否則不予顯示的方式，HTML5顯得更包容。它實行“不破壞Web”的原則。也就是說，以往已存在的Web頁面，還可以保持正確顯示。

（2）用戶至上

HTML5遵循“用戶至上”的原則，在出現具體問題時，會把用戶放在第一位，其次是開發者，然后是瀏覽器廠商，最后才是規范制定者。

（3）化繁為簡

HTML5對比之前的XHTML，做了大量的簡化工作：①以瀏覽器的原生能力代替復雜的JavaScript；②DOCTYPE被簡化到極致；③字符集聲明被簡化；④簡單強大的API。

（4）無插件

在HTML5出現之前，很多功能只能通過插件（如Flash插件）來實現，而使用插件有很多問題。HTML5原生提供了這些支持，這給開發人員帶來了更多的便利。

（5）引入語義

HTML5引入了一些用來區分不同含義和內容的標記元素。這樣做極大提高了代碼的可讀性和代碼區域查詢的便利性。

（6）引入原生媒體支持

HTML5支持在瀏覽器中直接播放視頻和音頻文件，以前都需要借助插件才能實現此類功能。

（7）引入可編程內容

HTML5最大的變化就是引入了之前需要通過JavaScript編程才能完全的各種效果，現在這些都是原生的。HTML5可以理解為HTML+CSS+JavaScript的總稱。

2.2CSS

CSS即層疊樣式表（Cascading StyleSheet），使用它可以對頁面的布局、字體、背景、顏色、邊界和其它效果實現精確控制。CSS3是CSS技術的最新版本，使用樣式表可輕松將頁面內容與表現分離，便于修改，降低了維護成本。這時的網頁布局也從表格嵌套布局發展到了DIV+CSS階段。

Div+CSS的頁面布局有很多優點：相比表格布局，Div+CSS布局方式能大大縮減頁面代碼，提高頁面瀏覽速度；代碼結構也更清晰，更易被搜索引擎收錄；并且CSS3兼容性好，且與web標準規范的發展趨勢相符，它幾乎支持所有的瀏覽器；縮短改版時間；代碼干凈利落，具有強大的字體控制和排版能力。

2.3JavaScript

JavaScript是一種面向對象的、解釋型的程序設計語言。是一種基于對象和事件驅動的腳本語言，它不需要在一個專門語言環境下運行，只要瀏覽器的支持即可。它的主要功用是在客戶端進行數據驗證，而不是提交給服務器，由于是在客戶端完成，這樣減少了對服務器的頻繁訪問，提高了效率，節省了帶寬。同時實現了交互、增強了用戶體驗度等。比如：網站在注冊新用戶時，通常要檢測用戶名輸入的有效性以及兩次密碼輸入是否一致，假若這些功能都發回給服務器判斷處理，隨著在線用戶的增加，服務器將不堪重負，耗費大量網絡帶寬，延緩系統響應，降低用戶體驗滿意度。

2.4jQuery框架

jQuery是一個JavaScript庫，它通過封裝原生的JavaScript函數得到一整套定義好的方法。它是由John Resig，于2006年創建的一個開源項目發展而來，隨著越來越多開發者的加入，jQuery具有了集JavaScript、CSS、DOM和Ajax于一體的強大功能。利用它可以用最少的代碼，完成更多復雜而困難的功能，它受到越來越前端開發人員的青睞。

jQuery作為JavaScript封裝的庫，它的目的就是為了簡化開發者使用JavaScript。主要功能有以下幾點：

（1）像CSS那樣訪問和操作DOM；

（2）修改CSS控制頁面外觀；

（3）簡化JavaScript代碼操作；

（4）事件處理更加容易；

（5）各種動畫效果使用方便；

（6）讓Ajax技術更加完美；

（7）基于jQuery大量插件；

（8）自行擴展功能插件。

2.5Bootstrap

Bootstrap提供了優雅的HTML和CSS規范、豐富的元素和組件，它使形式和功能達到很好的結合。Bootstrap最為重要的部分就是它的響應式布局，通過這種布局可以兼容PC、PAD、以及手機移動端的頁面訪問。

Bootstrap的流行，得益于它非常實用的功能和特點，列舉如下：

（1）跨設備、跨瀏覽器：Bootstrap可以兼容所有現代瀏覽器，包括比較詬病的IE7、8。

（2）響應式布局：Bootstrap可以根據實際顯示頁面的大小，實時調整頁面布局。不但可以支持PC端的各種分辨率的顯示，還支持移動端PAD、手機等屏幕的響應式切換顯示。

（3）提供的全面的組件：Bootstrap提供了實用性很強的組件，包括：導航、標簽、工具條、按鈕等一系列組件，方便開發者調用。

（4）內置jQuery插件：Bootstrap提供了很多實用性的jQuery插件，這些插件方便開發者實現Web中各種常規特效。

（5）支持HTML5、CSS3：三者可以完美配合。

（6）支持LESS動態樣式：LESS使用變量、嵌套、操作混合編碼，編寫更快、更靈活的CSS。LESS與Bootstrap可以很好的配合開發。

2.6Ajax

Ajax是“Asynchronous JavaScript And Java XML”的縮寫（即：異步JavaScript和XML），它并不是一門新的語言或技術，實際上它是幾項技術按一定方式的組合。這個組合包括：使用XHTML和CSS標準化呈現；使用DOM實現動態顯示和交互；使用XML和XSLT進行數據交換與處理；使用XML-Http Request進行異步數據讀取；使用JavaScript綁定和處理所有數據。

傳統的（指不使用Ajax）網頁，如果需要更新內容，就必須加載整個頁面。而Ajax則是按需加載數據，無需刷新整個頁面，就可實現網頁的部分更新。Ajax把原來由服務器端完成的工作轉移到了客戶瀏覽器端，減少了用戶心理和實際等待時間，帶來更好的用戶體驗，同時促進了頁面呈現與數據的分離。

3　Web前端開發技術學習方法

3.1要深刻理解技術的本質，必須動手親身實踐

“紙上得來終覺淺，絕知此事要躬行”，學習web前端技術也是這樣，只是一味地在課堂上聽老師講、看書，或者看一些學習視頻效果并不會太好，一定要通過實踐來檢驗和深刻理解所學知識，才能快速提高實戰水平。

3.2保持良好的習慣

一定要堅持手寫代碼，不要急于借助Dreamweaver之類的web開發工具。保持良好的文檔結構和編碼風格，代碼命名要規范，盡量使用語義化的標簽，重視代碼優化，長期這樣做不但利于將來團隊協作，更能培養編寫高質量代碼的能力。

3.3學會從網上獲取學習資源

多多搜集和整理國內外的資源站點和技術論壇，提高自主學習能力。萬維網是個大寶庫，搜索引擎是學習的好幫手。互聯網上有豐富的學習資源等待你去利用，像ycku.com，XinRan001.com等站點都是不錯的去處。如今，網絡微課程結合智能手機讓人隨時隨地進行學習，這里推薦知名講師李炎恢的相關視頻課程供大家參考學習。

3.4努力掌握一門后臺開發技術

由于大多數的網站都是動態的，前端開發人員一定要和后臺開發人員一起協作才能完成一個項目，只掌握Web前端技術還不夠，掌握一門如php、C#、Java的后臺開發技術，你將是一個不可多得的IT精英，為了團隊配合，至少也應了解這些后臺開發技術。

3.5學習UI（User Interface）方面的技術

熟話說：“藝多不壓身”，軟件公司總是希望自己的員工像孫悟空一般樣樣精通，對于大公司來說，通常都有專門的UI設計師，但小公司顧及成本，UI工作常常由前端工程師代勞。如果一個web前端工程師可以獨立完成UI的設計，一定會讓老板對你器重有加。

4　結語

Web前端開發技術不斷發展創新，我們要時刻保持敏銳的技術嗅覺，掌握正確的學習方法，成為優秀的Web前端開發工程師并不是夢。

［1］楊毅.Web前端開發技術探討［J］.電腦知識與技術.2014，（8）：54-59.

［2］魏娜.Web前端開發技術研究［J］.現代計算機. 2011，（12）：50-52.

（責任編輯張劍妹）

Li Qiang
（Departement of Information&Management Shanxi Institute of Mechanical& Electrical Engineering,Changzhi Shanxi 046011）

TP393.092

A

1673-2014（2016）02-0075-03

2016—02—19

李強（1978—），男，山西長治人，講師，碩士，主要從事大數據、網站開發研究。