李強(qiáng)

（山西機(jī)電職業(yè)技術(shù)學(xué)院信息與管理工程系，山西長治046011）

?

Web前端開發(fā)技術(shù)與學(xué)習(xí)探討

李強(qiáng)

（山西機(jī)電職業(yè)技術(shù)學(xué)院信息與管理工程系，山西長治046011）

Web前端開發(fā)越來越受到IT從業(yè)人員和互聯(lián)網(wǎng)企業(yè)的關(guān)注。優(yōu)秀的Web前端開發(fā)工程師一直是互聯(lián)網(wǎng)行業(yè)HR競相追逐的人才。文章從Web前端開發(fā)的核心技術(shù)出發(fā)，對(duì)web前端開發(fā)的主流技術(shù)及特點(diǎn)作了綜述，并對(duì)Web前端開發(fā)工程師應(yīng)具備的技術(shù)能力和學(xué)習(xí)方法做了探討。

Web前端；學(xué)習(xí)；HTML5

1　概述

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

2　Web前端開發(fā)技術(shù)綜述（HTML5　、CSS、JavaScript、jQuery、Bootstrap、Ajax）

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

2.1HTML5

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

HTML5較早期版本具有以下的優(yōu)點(diǎn)。

（1）更具包容性

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

（2）用戶至上

HTML5遵循“用戶至上”的原則，在出現(xiàn)具體問題時(shí)，會(huì)把用戶放在第一位，其次是開發(fā)者，然后是瀏覽器廠商，最后才是規(guī)范制定者。

（3）化繁為簡

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

（4）無插件

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

（5）引入語義

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

（6）引入原生媒體支持

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

（7）引入可編程內(nèi)容

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

2.2CSS

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

Div+CSS的頁面布局有很多優(yōu)點(diǎn)：相比表格布局，Div+CSS布局方式能大大縮減頁面代碼，提高頁面瀏覽速度；代碼結(jié)構(gòu)也更清晰，更易被搜索引擎收錄；并且CSS3兼容性好，且與web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢(shì)相符，它幾乎支持所有的瀏覽器；縮短改版時(shí)間；代碼干凈利落，具有強(qiáng)大的字體控制和排版能力。

2.3JavaScript

JavaScript是一種面向?qū)ο蟮摹⒔忉屝偷某绦蛟O(shè)計(jì)語言。是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語言，它不需要在一個(gè)專門語言環(huán)境下運(yùn)行，只要瀏覽器的支持即可。它的主要功用是在客戶端進(jìn)行數(shù)據(jù)驗(yàn)證，而不是提交給服務(wù)器，由于是在客戶端完成，這樣減少了對(duì)服務(wù)器的頻繁訪問，提高了效率，節(jié)省了帶寬。同時(shí)實(shí)現(xiàn)了交互、增強(qiáng)了用戶體驗(yàn)度等。比如：網(wǎng)站在注冊(cè)新用戶時(shí)，通常要檢測(cè)用戶名輸入的有效性以及兩次密碼輸入是否一致，假若這些功能都發(fā)回給服務(wù)器判斷處理，隨著在線用戶的增加，服務(wù)器將不堪重負(fù)，耗費(fèi)大量網(wǎng)絡(luò)帶寬，延緩系統(tǒng)響應(yīng)，降低用戶體驗(yàn)滿意度。

2.4jQuery框架

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

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

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

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

（3）簡化JavaScript代碼操作；

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

（5）各種動(dòng)畫效果使用方便；

（6）讓Ajax技術(shù)更加完美；

（7）基于jQuery大量插件；

（8）自行擴(kuò)展功能插件。

2.5Bootstrap

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

Bootstrap的流行，得益于它非常實(shí)用的功能和特點(diǎn)，列舉如下：

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

（2）響應(yīng)式布局：Bootstrap可以根據(jù)實(shí)際顯示頁面的大小，實(shí)時(shí)調(diào)整頁面布局。不但可以支持PC端的各種分辨率的顯示，還支持移動(dòng)端PAD、手機(jī)等屏幕的響應(yīng)式切換顯示。

（3）提供的全面的組件：Bootstrap提供了實(shí)用性很強(qiáng)的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件，方便開發(fā)者調(diào)用。

（4）內(nèi)置jQuery插件：Bootstrap提供了很多實(shí)用性的jQuery插件，這些插件方便開發(fā)者實(shí)現(xiàn)Web中各種常規(guī)特效。

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

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

2.6Ajax

Ajax是“Asynchronous JavaScript And Java XML”的縮寫（即：異步JavaScript和XML），它并不是一門新的語言或技術(shù)，實(shí)際上它是幾項(xiàng)技術(shù)按一定方式的組合。這個(gè)組合包括：使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理；使用XML-Http Request進(jìn)行異步數(shù)據(jù)讀?。皇褂肑avaScript綁定和處理所有數(shù)據(jù)。

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

3　Web前端開發(fā)技術(shù)學(xué)習(xí)方法

3.1要深刻理解技術(shù)的本質(zhì)，必須動(dòng)手親身實(shí)踐

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

3.2保持良好的習(xí)慣

一定要堅(jiān)持手寫代碼，不要急于借助Dreamweaver之類的web開發(fā)工具。保持良好的文檔結(jié)構(gòu)和編碼風(fēng)格，代碼命名要規(guī)范，盡量使用語義化的標(biāo)簽，重視代碼優(yōu)化，長期這樣做不但利于將來團(tuán)隊(duì)協(xié)作，更能培養(yǎng)編寫高質(zhì)量代碼的能力。

3.3學(xué)會(huì)從網(wǎng)上獲取學(xué)習(xí)資源

多多搜集和整理國內(nèi)外的資源站點(diǎn)和技術(shù)論壇，提高自主學(xué)習(xí)能力。萬維網(wǎng)是個(gè)大寶庫，搜索引擎是學(xué)習(xí)的好幫手?；ヂ?lián)網(wǎng)上有豐富的學(xué)習(xí)資源等待你去利用，像ycku.com，XinRan001.com等站點(diǎn)都是不錯(cuò)的去處。如今，網(wǎng)絡(luò)微課程結(jié)合智能手機(jī)讓人隨時(shí)隨地進(jìn)行學(xué)習(xí)，這里推薦知名講師李炎恢的相關(guān)視頻課程供大家參考學(xué)習(xí)。

3.4努力掌握一門后臺(tái)開發(fā)技術(shù)

由于大多數(shù)的網(wǎng)站都是動(dòng)態(tài)的，前端開發(fā)人員一定要和后臺(tái)開發(fā)人員一起協(xié)作才能完成一個(gè)項(xiàng)目，只掌握Web前端技術(shù)還不夠，掌握一門如php、C#、Java的后臺(tái)開發(fā)技術(shù)，你將是一個(gè)不可多得的IT精英，為了團(tuán)隊(duì)配合，至少也應(yīng)了解這些后臺(tái)開發(fā)技術(shù)。

3.5學(xué)習(xí)UI（User Interface）方面的技術(shù)

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

4　結(jié)語

Web前端開發(fā)技術(shù)不斷發(fā)展創(chuàng)新，我們要時(shí)刻保持敏銳的技術(shù)嗅覺，掌握正確的學(xué)習(xí)方法，成為優(yōu)秀的Web前端開發(fā)工程師并不是夢(mèng)。

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

［2］魏娜.Web前端開發(fā)技術(shù)研究［J］.現(xiàn)代計(jì)算機(jī). 2011，（12）：50-52.

（責(zé)任編輯張劍妹）

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

李強(qiáng)（1978—），男，山西長治人，講師，碩士，主要從事大數(shù)據(jù)、網(wǎng)站開發(fā)研究。