公司招了幾個剛畢業(yè)的學(xué)生，作為重構(gòu)的新手讓我來帶。
首先感謝感謝黨、感謝國家、感謝公司給了我這樣的一個機(jī)會，對我工作的肯定和認(rèn)可，讓我?guī)н@樣的一個重構(gòu)團(tuán)隊(duì)，同時我也明白任務(wù)的艱巨，但我一定會將工作做好，不負(fù)公司對我的期望。（哈哈，好像從小到大，老師都是教育我們要這樣先說的。）
在網(wǎng)站的發(fā)展史上，初期的網(wǎng)站建設(shè)根本不需要網(wǎng)頁重構(gòu)這個職位，WEB1.0時代的網(wǎng)頁，只需要程序員，一堆堆的表格嵌套就完成，或者美工進(jìn)行配合完成，先由美工負(fù)責(zé)設(shè)計好，再用一些自動化的軟件拉伸幾下，直接將設(shè)計好的圖就可以通過軟件輸出表格的布局了，根本不需要重構(gòu)這個多余的職位。隨著WEB2.0的到來和W3C的規(guī)范得到世人的認(rèn)可，內(nèi)容和樣式的分離更方便進(jìn)行開發(fā)和維護(hù)，傳統(tǒng)的表格布局和內(nèi)容混排的方式逐漸地被淘汰，美工已不能完全一手包辦越來越復(fù)雜的效果和高要求的頁面布局了。此因催生了一個新的職位——前端工程師。
鄙人剛好作為一名WEB2.0成長起來的前端工程師，雖然說做的項(xiàng)目不多，但樂于與人分享。雖然分享的也許只是一些很表面甚至有些過時的東西，但也只希望為大家提個醒，最好能起到拋磚引玉的作用。
一、前端工程師的職能和作用。
什么是前端工程師？有人這樣來表述：我們是工程師中的設(shè)計師，是設(shè)計師中的工程師。上班不干別的，就是玩，弄點(diǎn)效果，攢兩頁面，搞點(diǎn)創(chuàng)新。我們就是前端攻城師（工程師）。當(dāng)然這個表述有點(diǎn)有點(diǎn)輕巧、調(diào)侃的味道，工作絕對不是玩那么簡單的，有時候會為一些效果的實(shí)現(xiàn)或優(yōu)化，弄得加班加點(diǎn)一起開發(fā)，但其實(shí)有兩一句表述是非常中肯的，那就是：我們是工程師中的設(shè)計師，是設(shè)計師中的工程師。這句話將前端工程師的角色的定位說得很準(zhǔn)確。前端工程師，在網(wǎng)站開發(fā)的初期，以工程師的身份來指導(dǎo)網(wǎng)頁的設(shè)計，前端工程師明白程序的輸出的方法，指導(dǎo)設(shè)計師在設(shè)計的過程中避免一些不能輸出的數(shù)據(jù)排版，指出哪一些陰影、透明、圓角的使用不能大范圍的使用等等；在進(jìn)行頁面的重構(gòu)的過程中，又將以一個設(shè)計師的身份將設(shè)置頁面轉(zhuǎn)化為靜態(tài)頁面，需要用代碼對設(shè)計頁面進(jìn)行最初的還原，實(shí)現(xiàn)好相應(yīng)的前臺的效果，排列好相應(yīng)讓后臺開發(fā)的工程師輸出數(shù)據(jù)的地方，以適應(yīng)后臺數(shù)據(jù)的輸出并保持頁面的不變形、不走位，在有數(shù)據(jù)輸出正常的情況下，配合程序去修改樣式，以盡量達(dá)到和設(shè)計的效果基本一致。所以在這個頁面設(shè)計和到程序的現(xiàn)在過程中，需要前端工程師起到一個橋梁的作用。
前端開發(fā)是一項(xiàng)很特殊的工作，前端工程師的工作說得輕松，看似輕巧，但做起來絕對不是那么的簡單。在開發(fā)過程中涵蓋的東西非常寬廣，既要從技術(shù)的角度來思考界面的實(shí)現(xiàn)，規(guī)避技術(shù)的死角，又要從用戶的角度來思考，怎樣才能更好地接受技術(shù)呈現(xiàn)的枯燥的數(shù)據(jù)，更好的呈現(xiàn)信息。簡單地說，它的主要職能就將網(wǎng)站的數(shù)據(jù)和用戶的接受更好地結(jié)合在一起，為用戶呈現(xiàn)一個友好的數(shù)據(jù)界面。
二、前端工程師的發(fā)展前景如何
前端工程師是是一個很新的職業(yè)，在國內(nèi)乃至國際上真正開始受到重視的時間不超過5年。互聯(lián)網(wǎng)的發(fā)展速度迅猛，網(wǎng)頁由WEB1.0到WEB2.0，再到新生的HTML5、CSS3，到現(xiàn)在手機(jī)、3G網(wǎng)絡(luò)等新科技的興起，網(wǎng)頁也由最原先的圖文為主，到現(xiàn)在各種各樣的基于哀前端技術(shù)實(shí)現(xiàn)的應(yīng)用、交互和富媒體的呈現(xiàn)，更多的信息、更豐富的內(nèi)容、更友好的體驗(yàn)，已經(jīng)成為網(wǎng)站前端開發(fā)的要求，網(wǎng)站的前端開發(fā)發(fā)生了翻天可覆地的變化。
網(wǎng)站的開發(fā)對前端的需要越來越重要，但個新和職業(yè)在業(yè)務(wù)還是很缺，所以高質(zhì)量的前端開發(fā)工程師將會是后五年內(nèi)一個非常熱門的職業(yè)，發(fā)展的前景非?？捎^。
三、前端工程師需要掌握的技能
作為一個前端工程師，需要掌握的技能還真的不少。
最基本的三個技能：HTML、CSS、JavaScript
這個是前端開發(fā)中最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時， HTML將元素進(jìn)行定義，CSS對展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進(jìn)行開發(fā)前，需要對這些概念弄清楚、弄明白，這樣在開發(fā)的過程中才會得心應(yīng)手。
HTML：
指的是超文本標(biāo)記語言 (HyperTextMarkupLanguage)，這個也是我們網(wǎng)頁最常用普通的語言了，經(jīng)歷了多個版本的發(fā)展，現(xiàn)在已經(jīng)發(fā)展到4.01版了，得力于W3C建立的標(biāo)準(zhǔn)和規(guī)范，現(xiàn)在已普遍升級到了XHTML，XHTML 指可擴(kuò)展超文本標(biāo)簽語言（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，是一個 W3C 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。所有新的瀏覽器都支持 XHTML。
另外，W3C 與 WHATWG 合作創(chuàng)建一個新版本的 HTML，就是HTML5。HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)，為HTML世界注入更多驚喜，盡管HTML5 仍處于完善之中，然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持，顯示出來的生機(jī)和活力已是那樣的激奮人心，特別是前端的工作中，那些針對瀏覽器兼容的問題將能得到很好的解決，更多的效果和應(yīng)用也能更方便的實(shí)現(xiàn)。
前端工程師，也必然要與時俱進(jìn)，緊跟業(yè)界時代發(fā)展的前沿，不然永遠(yuǎn)只停留在舊的技術(shù)上，只會被無情的淘汰。
其實(shí)HTML的元素也就不過幾十個，常用的元素更少，所以掌握起來的話應(yīng)該不困難。但就是這些看似簡單的元素，很多新手在剛開始的時候就不注意規(guī)范，養(yǎng)成一些不好的習(xí)慣。
1、不要忽略一些細(xì)節(jié)
隨便打開一個個網(wǎng)站，隨手點(diǎn)到了163的首頁，163算是一個比較規(guī)范和專業(yè)的門戶網(wǎng)站了，已經(jīng)用上了HTML5的一些元素了，具體可以看到源文件。
在頭部的焦點(diǎn)廣告圖那里，用小BUG右鍵查看一下元素，看到這樣的一個圖像標(biāo)簽img代碼：
img必備和可選的參數(shù)都有寫了上了，但是必備參數(shù)里的一個值alt沒寫（其實(shí)一些大型的專業(yè)門戶網(wǎng)站其實(shí)也是有存在一些小問題的，只要我們細(xì)心一點(diǎn)就能發(fā)現(xiàn)）。雖然這樣alt不寫，在頁面中也不會有任何的問題，因?yàn)檫@個alt屬性也只是在圖像丟失、禁用或加載不到的情況下才顯示，但是如果一些其他特定的設(shè)備訪問或一些其他條件下圖片不顯示的情況下，那這里就是一塊大紅XX和一大塊白塊，多影響用戶體驗(yàn)。
雖然只是一個小小的alt屬性，但是有時候是細(xì)節(jié)決定決定成敗，用與不用，表面上看不出有什么問題，但是在某些特定的條件產(chǎn)生的作用是無法估計的，也就是從這些小小的細(xì)節(jié)就可以看出一個前端工程師的水平如何。
一些前端的新同學(xué)甚至什么也不填，放一張無任意命名意義的圖上去就算了事，養(yǎng)成這樣的習(xí)慣是非常不好的。
重慶分公司
重慶分公司
