公司招了幾個(gè)剛畢業的學生(shēng)，作(zuò)為(wèi)重構的新手讓我來(lái)帶。

首先感謝感謝黨、感謝國家(jiā)、感謝公司給了我這樣的一個(gè)機會(huì)，對我工作(zuò)的肯定和(hé)認可(kě)，讓我帶這樣的一個(gè)重構團隊，同時(shí)我也明(míng)白任務的艱巨，但(dàn)我一定會(huì)将工作(zuò)做(zuò)好，不負公司對我的期望。（哈哈，好像從小(xiǎo)到大(dà)，老師(shī)都是教育我們要這樣先說的。）

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

鄙人(rén)剛好作(zuò)為(wèi)一名WEB2.0成長起來(lái)的前端工程師(shī)，雖然說做(zuò)的項目不多(duō)，但(dàn)樂于與人(rén)分享。雖然分享的也許隻是一些(xiē)很(hěn)表面甚至有(yǒu)些(xiē)過時(shí)的東西，但(dàn)也隻希望為(wèi)大(dà)家(jiā)提個(gè)醒，最好能起到抛磚引玉的作(zuò)用。

一、前端工程師(shī)的職能和(hé)作(zuò)用。

什麽是前端工程師(shī)？有(yǒu)人(rén)這樣來(lái)表述：我們是工程師(shī)中的設計(jì)師(shī)，是設計(jì)師(shī)中的工程師(shī)。上(shàng)班不幹别的，就是玩，弄點效果，攢兩頁面，搞點創新。我們就是前端攻城師(shī)（工程師(shī)）。當然這個(gè)表述有(yǒu)點有(yǒu)點輕巧、調侃的味道(dào)，工作(zuò)絕對不是玩那(nà)麽簡單的，有(yǒu)時(shí)候會(huì)為(wèi)一些(xiē)效果的實現或優化，弄得(de)加班加點一起開(kāi)發，但(dàn)其實有(yǒu)兩一句表述是非常中肯的，那(nà)就是：我們是工程師(shī)中的設計(jì)師(shī)，是設計(jì)師(shī)中的工程師(shī)。這句話(huà)将前端工程師(shī)的角色的定位說得(de)很(hěn)準确。前端工程師(shī)，在網站(zhàn)開(kāi)發的初期，以工程師(shī)的身份來(lái)指導網頁的設計(jì)，前端工程師(shī)明(míng)白程序的輸出的方法，指導設計(jì)師(shī)在設計(jì)的過程中避免一些(xiē)不能輸出的數(shù)據排版，指出哪一些(xiē)陰影(yǐng)、透明(míng)、圓角的使用不能大(dà)範圍的使用等等；在進行(xíng)頁面的重構的過程中，又将以一個(gè)設計(jì)師(shī)的身份将設置頁面轉化為(wèi)靜态頁面，需要用代碼對設計(jì)頁面進行(xíng)最初的還(hái)原，實現好相應的前台的效果，排列好相應讓後台開(kāi)發的工程師(shī)輸出數(shù)據的地方，以适應後台數(shù)據的輸出并保持頁面的不變形、不走位，在有(yǒu)數(shù)據輸出正常的情況下，配合程序去修改樣式，以盡量達到和(hé)設計(jì)的效果基本一緻。所以在這個(gè)頁面設計(jì)和(hé)到程序的現在過程中，需要前端工程師(shī)起到一個(gè)橋梁的作(zuò)用。

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

二、前端工程師(shī)的發展前景如何

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

網站(zhàn)的開(kāi)發對前端的需要越來(lái)越重要，但(dàn)個(gè)新和(hé)職業在業務還(hái)是很(hěn)缺，所以高(gāo)質量的前端開(kāi)發工程師(shī)将會(huì)是後五年內(nèi)一個(gè)非常熱門(mén)的職業，發展的前景非常可(kě)觀。

三、前端工程師(shī)需要掌握的技(jì)能

作(zuò)為(wèi)一個(gè)前端工程師(shī)，需要掌握的技(jì)能還(hái)真的不少(shǎo)。

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

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

HTML：

指的是超文本标記語言 (Hyper Text Markup Language)，這個(gè)也是我們網頁最常用普通(tōng)的語言了，經曆了多(duō)個(gè)版本的發展，現在已經發展到4.01版了，得(de)力于W3C建立的标準和(hé)規範，現在已普遍升級到了XHTML，XHTML 指可(kě)擴展超文本标簽語言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為(wèi) W3C 标準，是更嚴格更純淨的 HTML 代碼，XHTML 的目标是取代 HTML。XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作(zuò)為(wèi)一種 XML 應用被重新定義的 HTML，是一個(gè) W3C 标準。W3C 将 XHTML 定義為(wèi)最新的HTML版本。所有(yǒu)新的浏覽器(qì)都支持 XHTML。

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

前端工程師(shī)，也必然要與時(shí)俱進，緊跟業界時(shí)代發展的前沿，不然永遠隻停留在舊(jiù)的技(jì)術(shù)上(shàng)，隻會(huì)被無情的淘汰。

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

1、不要忽略一些(xiē)細節

随便打開(kāi)一個(gè)個(gè)網站(zhàn)，随手點到了163的首頁，163算(suàn)是一個(gè)比較規範和(hé)專業的門(mén)戶網站(zhàn)了，已經用上(shàng)了HTML5的一些(xiē)元素了，具體(tǐ)可(kě)以看到源文件。

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

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

雖然隻是一個(gè)小(xiǎo)小(xiǎo)的alt屬性，但(dàn)是有(yǒu)時(shí)候是細節決定決定成敗，用與不用，表面上(shàng)看不出有(yǒu)什麽問題，但(dàn)是在某些(xiē)特定的條件産生(shēng)的作(zuò)用是無法估計(jì)的，也就是從這些(xiē)小(xiǎo)小(xiǎo)的細節就可(kě)以看出一個(gè)前端工程師(shī)的水(shuǐ)平如何。

一些(xiē)前端的新同學甚至什麽也不填，放一張無任意命名意義的圖上(shàng)去就算(suàn)了事，養成這樣的習慣是非常不好的。