公司招了幾個(gè)剛畢業(yè)的學(xué)生，作為重構(gòu)的新手讓我來(lái)帶。

　　首先感謝感謝黨、感謝國(guó)家、感謝公司給了我這樣的一個(gè)機(jī)會(huì)，對(duì)我工作的肯定和認(rèn)可，讓我?guī)н@樣的一個(gè)重構(gòu)團(tuán)隊(duì)，同時(shí)我也明白任務(wù)的艱巨，但我一定會(huì)將工作做好，不負(fù)公司對(duì)我的期望。(哈哈，好像從小到大，老師都是教育我們要這樣先說(shuō)的。)

　　在網(wǎng)站的發(fā)展史上，初期的網(wǎng)站建設(shè)根本不需要網(wǎng)頁(yè)重構(gòu)這個(gè)職位，WEB1.0時(shí)代的網(wǎng)頁(yè)，只需要程序員，一堆堆的表格嵌套就完成，或者美工進(jìn)行配合完成，先由美工負(fù)責(zé)設(shè)計(jì)好，再用一些自動(dòng)化的軟件拉伸幾下，直接將設(shè)計(jì)好的圖就可以通過(guò)軟件輸出表格的布局了，根本不需要重構(gòu)這個(gè)多余的職位。隨著 WEB2.0的到來(lái)和W3C的規(guī)范得到世人的認(rèn)可，內(nèi)容和樣式的分離更方便進(jìn)行開(kāi)發(fā)和維護(hù)，傳統(tǒng)的表格布局和內(nèi)容混排的方式逐漸地被淘汰，美工已不能完全一手包辦越來(lái)越復(fù)雜的效果和高要求的頁(yè)面布局了。此因催生了一個(gè)新的職位——前端工程師。

　　鄙人剛好作為一名WEB2.0成長(zhǎng)起來(lái)的前端工程師，雖然說(shuō)做的項(xiàng)目不多，但樂(lè)于與人分享。雖然分享的也許只是一些很表面甚至有些過(guò)時(shí)的東西，但也只希望為大家提個(gè)醒，最好能起到拋磚引玉的作用。

　　一、前端工程師的職能和作用。

　　什么是前端工程師?有人這樣來(lái)表述：我們是工程師中的設(shè)計(jì)師，是設(shè)計(jì)師中的工程師。上班不干別的，就是玩，弄點(diǎn)效果，攢兩頁(yè)面，搞點(diǎn)創(chuàng)新。我們就是前端攻城師(工程師)。當(dāng)然這個(gè)表述有點(diǎn)有點(diǎn)輕巧、調(diào)侃的味道，工作絕對(duì)不是玩那么簡(jiǎn)單的，有時(shí)候會(huì)為一些效果的實(shí)現(xiàn)或優(yōu)化，弄得加班加點(diǎn)一起開(kāi)發(fā)，但其實(shí)有兩一句表述是非常中肯的，那就是：我們是工程師中的設(shè)計(jì)師，是設(shè)計(jì)師中的工程師。這句話(huà)將前端工程師的角色的定位說(shuō)得很準(zhǔn)確。前端工程師，在網(wǎng)站開(kāi)發(fā)的初期，以工程師的身份來(lái)指導(dǎo)網(wǎng)頁(yè)的設(shè)計(jì)，前端工程師明白程序的輸出的方法，指導(dǎo)設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中避免一些不能輸出的數(shù)據(jù)排版，指出哪一些陰影、透明、圓角的使用不能大范圍的使用等等;在進(jìn)行頁(yè)面的重構(gòu)的過(guò)程中，又將以一個(gè)設(shè)計(jì)師的身份將設(shè)置頁(yè)面轉(zhuǎn)化為靜態(tài)頁(yè)面，需要用代碼對(duì)設(shè)計(jì)頁(yè)面進(jìn)行最初的還原，實(shí)現(xiàn)好相應(yīng)的前臺(tái)的效果，排列好相應(yīng)讓后臺(tái)開(kāi)發(fā)的工程師輸出數(shù)據(jù)的地方，以適應(yīng)后臺(tái)數(shù)據(jù)的輸出并保持頁(yè)面的不變形、不走位，在有數(shù)據(jù)輸出正常的情況下，配合程序去修改樣式，以盡量達(dá)到和設(shè)計(jì)的效果基本一致。所以在這個(gè)頁(yè)面設(shè)計(jì)和到程序的現(xiàn)在過(guò)程中，需要前端工程師起到一個(gè)橋梁的作用。

　　前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，前端工程師的工作說(shuō)得輕松，看似輕巧，但做起來(lái)絕對(duì)不是那么的簡(jiǎn)單。在開(kāi)發(fā)過(guò)程中涵蓋的東西非常寬廣，既要從技術(shù)的角度來(lái)思考界面的實(shí)現(xiàn)，規(guī)避技術(shù)的死角，又要從用戶(hù)的角度來(lái)思考，怎樣才能更好地接受技術(shù)呈現(xiàn)的枯燥的數(shù)據(jù)，更好的呈現(xiàn)信息。簡(jiǎn)單地說(shuō)，它的主要職能就將網(wǎng)站的數(shù)據(jù)和用戶(hù)的接受更好地結(jié)合在一起，為用戶(hù)呈現(xiàn)一個(gè)友好的數(shù)據(jù)界面。

　　二、前端工程師的發(fā)展前景如何

　　前端工程師是是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開(kāi)始受到重視的時(shí)間不超過(guò)5年。互聯(lián)網(wǎng)的發(fā)展速度迅猛，網(wǎng)頁(yè)由WEB1.0到WEB2.0，再到新生的HTML5、CSS3，到現(xiàn)在手機(jī)、3G網(wǎng)絡(luò)等新科技的興起，網(wǎng)頁(yè)也由最原先的圖文為主，到現(xiàn)在各種各樣的基于哀前端技術(shù)實(shí)現(xiàn)的應(yīng)用、交互和富媒體的呈現(xiàn)，更多的信息、更豐富的內(nèi)容、更友好的體驗(yàn)，已經(jīng)成為網(wǎng)站前端開(kāi)發(fā)的要求，網(wǎng)站的前端開(kāi)發(fā)發(fā)生了翻天可覆地的變化。

　　網(wǎng)站的開(kāi)發(fā)對(duì)前端的需要越來(lái)越重要，但個(gè)新和職業(yè)在業(yè)務(wù)還是很缺，所以高質(zhì)量的前端開(kāi)發(fā)工程師將會(huì)是后五年內(nèi)一個(gè)非常熱門(mén)的職業(yè)，發(fā)展的前景非常可觀(guān)。

　　三、前端工程師需要掌握的技能

　　作為一個(gè)前端工程師，需要掌握的技能還真的不少。

　　最基本的三個(gè)技能：HTML、CSS、JavaScript

　　這個(gè)是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能。前端的開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來(lái)這些很簡(jiǎn)單，但這里面需要掌握的東西絕對(duì)不會(huì)少。在進(jìn)行開(kāi)發(fā)前，需要對(duì)這些概念弄清楚、弄明白，這樣在開(kāi)發(fā)的過(guò)程中才會(huì)得心應(yīng)手。

　　HTML：

　　指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)，這個(gè)也是我們網(wǎng)頁(yè)最常用普通的語(yǔ)言了，經(jīng)歷了多個(gè)版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級(jí)到了 XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語(yǔ)言(EXtensible HyperText Markup Language)， XHTML 于2000年的1月26日成為 W3C 標(biāo)準(zhǔn)，是更嚴(yán)格更純凈的 HTML 代碼，XHTML 的目標(biāo)是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML，是一個(gè) W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。

　　另外，W3C 與 WHATWG 合作創(chuàng)建一個(gè)新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，為HTML世界注入更多驚喜，盡管HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來(lái)的生機(jī)和活力已是那樣的激奮人心，特別是前端的工作中，那些針對(duì)瀏覽器兼容的問(wèn)題將能得到很好的解決，更多的效果和應(yīng)用也能更方便的實(shí)現(xiàn)。

　　前端工程師，也必然要與時(shí)俱進(jìn)，緊跟業(yè)界時(shí)代發(fā)展的前沿，不然永遠(yuǎn)只停留在舊的技術(shù)上，只會(huì)被無(wú)情的淘汰。

　　其實(shí)HTML的元素也就不過(guò)幾十個(gè)，常用的元素更少，所以掌握起來(lái)的話(huà)應(yīng)該不困難。但就是這些看似簡(jiǎn)單的元素，很多新手在剛開(kāi)始的時(shí)候就不注意規(guī)范，養(yǎng)成一些不好的習(xí)慣。

　　1、不要忽略一些細(xì)節(jié)

　　隨便打開(kāi)一個(gè)個(gè)網(wǎng)站，隨手點(diǎn)到了163的首頁(yè)，163算是一個(gè)比較規(guī)范和專(zhuān)業(yè)的門(mén)戶(hù)網(wǎng)站了，已經(jīng)用上了HTML5的一些元素了，具體可以看到源文件。

　　在頭部的焦點(diǎn)廣告圖那里，用小BUG右鍵查看一下元素，看到這樣的一個(gè)圖像標(biāo)簽img代碼：

　　img必備和可選的參數(shù)都有寫(xiě)了上了，但是必備參數(shù)里的一個(gè)值alt沒(méi)寫(xiě)(其實(shí)一些大型的專(zhuān)業(yè)門(mén)戶(hù)網(wǎng)站其實(shí)也是有存在一些小問(wèn)題的，只要我們細(xì)心一點(diǎn)就能發(fā)現(xiàn))。雖然這樣alt不寫(xiě)，在頁(yè)面中也不會(huì)有任何的問(wèn)題，因?yàn)檫@個(gè)alt屬性也只是在圖像丟失、禁用或加載不到的情況下才顯示，但是如果一些其他特定的設(shè)備訪(fǎng)問(wèn)或一些其他條件下圖片不顯示的情況下，那這里就是一塊大紅XX和一大塊白塊，多影響用戶(hù)體驗(yàn)。

　　雖然只是一個(gè)小小的alt屬性，但是有時(shí)候是細(xì)節(jié)決定決定成敗，用與不用，表面上看不出有什么問(wèn)題，但是在某些特定的條件產(chǎn)生的作用是無(wú)法估計(jì)的，也就是從這些小小的細(xì)節(jié)就可以看出一個(gè)前端工程師的水平如何。