Web前端工程師成長之路

前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的界面開發。製作標準優化的代碼，並增加交互動態功能，開發JavaScript以及Flash模塊，同時結合後台開發技術模擬整體效果，進行豐富互聯網的Web開發，致力於通過技術改善用戶體驗。

一、Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！

它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的網際網路應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和伺服器端語言（PHP、http://ASP.NET，JSP、Python）等語言，前端開發工程師也需要掌握。

前端開發的入門門檻其實很低，與伺服器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。

HTML 甚至不是一門語言，他僅僅是簡單的標記語言！

CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。

Javascript 的基礎部分相對來說不難，入手還算快。

也正因為如此，前端開發領域有很多自學成「才」的同行，但大多數人都停留在會用的階段，因為後面的學習曲線越來越陡峭，每前進一步都很難。 Web前端技術有一些江湖氣，知識點過於瑣碎，技術價值觀的博弈也難分伯仲，即全局的系統的知識結構並未成體系，這些因素也客觀上影響了「正統「前端技術的沉澱！而且各種「奇技淫巧」被濫用，前端技術知識的傳承也過於泛泛，新人難看清時局把握主次。因此，前端技術領域，為自己覓得一個靠譜的師兄，重要性要蓋過項目、團隊、公司、甚至薪水。

另一方面，正如前面所說，前端開發是個非常新的職業，對一些規範和最佳實踐的研究都處於探索階段。總有新的靈感和技術不時閃現出來，例如CSS sprite、負邊距布局、柵格布局等；各種JavaScript框架層出不窮，為整個前端開發領域注入了巨大的活力；瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。為了滿足「高可維護性」的需要，需要更深入、更系統地去掌握前端知識，這樣才可能創建一個好的前端架構，保證代碼的質量。

隨著手持設備的迅猛發展，帶動了 HTML5行業標準的快速發展。web領域的技術，大概有10年都沒有大的更新了！現在市場很需要優秀的、高級的前端工程師。一方面是因為這是一個比較新的細分行業，而且前端程序員大都自學一部分，知識結構不系統；另一方面，大學裡面沒有這種課程，最最重要的是：北大青鳥這類培訓機構也沒有專門的前端工程師的培訓課程！！

吳亮在《JavaScript 王者歸來》第一張的序裡面說：大多數程序員認為 Javascript 過於簡陋，只適合一些網頁上面花哨的表現，所以不願花費精力去學習，或者以為不學習就能掌握。實際上，一門語言是否腳本語言，往往是她的設計目標決定，簡單與複雜並不是區分腳本語言和非腳本語言的標準。事實上，在腳本語言裡面，Javascript 屬於相當複雜的一門語言，他的複雜度即使放在非腳本語言中來衡量，也是一門相當複雜的語言！Javascript 的複雜度不遜色於 Perl 和 Python！

二、如何學習前端知識？

作為一名最基礎的前端工程師你必須掌握HTML、CSS和JavaScript。三者必須同時精通，類似我字樣對前端知識一知半解的，一遇到問題就停下工作就四處搜索解決方案的，首先就算不上一個合格的前端人員。像我這樣的如果當了前端工程師那工期肯定是不能保證的。合格的前端工程師第一要學會的就是在沒有任何外來幫助的情況下（包括搜索引擎），能夠完成大多數任務。

以下知識點是作為一個前端工程師必須了解和熟悉的：

DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

DOM操作——怎樣添加、移除、移動、複製、創建和查找節點。

事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。

XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。

盒模型——外邊距、內邊距和邊框之間的關係，IE < 8中的盒模型有什麼不同。

塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。

浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。

JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。

上述這些知識點都應該是你「想都不用想」就知道的東西。除了上述的前端知識，也還需學會至少一門後端編程語言，讓你自己學會如何與後端進行更好的交互。很多前端工程師對一些庫非常的熟悉，jQuery，Bootstrap等，但是對於庫的熟悉並不能提現你的優秀，整整優秀的是那些理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。真正合格的前端工程師是能實現具體的功能要求，而優秀的前端工程師需要解決的問題是尋找一個最優的解決方案。

再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求：

產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現的應用。一般來說，產品經理都追求豐富的功能。

UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師於流暢靚麗、但並不容易實現的用戶界面，而且他們經常不滿前端工程師造成 1px 的誤差。

項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。

最終用戶。指的是應用程序的主要消費者。儘管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

Yahoo公司 ，YUI的開發工程師 Nicholas C. Zakas 認為：前端工程師是計算機科學職業領域中最複雜的一個工種。絕大多數傳統的編程思想已經不適用了，為了在多種平台中使用，多種技術都借鑒了大量軟科學的知識和理念。成為優秀前端工程師所要具備的專業技術，涉及到廣闊而複雜的領域，這些領域又會因為你最終必須服務的各方的介入而變得更加複雜。專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。

三、提升無止境

Web前端工程師成長之路——知識匯總

圖2、Web前端工程師知識架構

優秀的前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的，這些技術幾乎每天都在變化，如果沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。

四、前端開發知識架構

前端工程師

瀏覽器

IE6/7/8/9

Firefox

Chrome/Safari/Opera

編程語言

JavaScript/Node.js

JavaScript語言精粹

切頁面

HTML/HTML5

CSS/CSS3

PhotoShop/http://Paint.net

開發工具

IDE

VIM/Sublime Text2

Notepad++/EditPlus

WebStorm

調試工具

Firebug/Firecookie

YSlow

IEDeveloperToolbar/IETester

Fiddler

版本管理

Git/SVN

Github/Bitbucket/Google Code

代碼質量

Coding style

JSLint/JSHint

CSSLint

Markup Validation Service

單元測試

QUnit/Jasmine

Mocha/Should/Chai

自動化測試

WebDriver

前端庫/框架

jQuery/Underscore/Mootools/Prototype.js

YUI3/Dojo/ExtJS

Backbone/KnockoutJS/Emberjs

前端標準/規範

HTTP1.1

ECMAScript3/5

W3C/DOM/BOM/XHTML/XML/JSON/JSONP

CommonJS/AMD

HTML5/CSS3

性能

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace』s Ajax

高性能JavaScript

編程知識儲備

數據結構

OOP/AOP

原型鏈/作用域鏈

閉包

函數式編程

設計模式

Javascript Tips

部署流程

壓縮合併

YUI Compressor

Google Clousure Complier

CleanCSS/UglifyJS

文檔輸出

JSDoc

Dox/Doxmate

項目構建工具

make/Ant

GYP

Grunt

Yeoman

代碼組織

類庫模塊化

CommonJS/AMD

YUI3模塊

業務邏輯模塊化

文件載入

LABjs

SeaJS/Require.js

安全

CSRF/XSS

ADsafe/Caja/Sandbox

移動Web

HTML5/CSS3

響應式設計

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

JavaScript生態

MongoDB/CouchDB

前沿技術社區/會議

D2/WebRebuild

NodeParty/W3CTech/HTML5夢工廠

JSConf/滬JS(http://JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

YDN/YUIConf

計算機知識儲備

編譯原理

計算機網路

操作系統

演算法原理

軟體工程/軟體測試原理

軟技能

知識管理/總結分享

溝通技巧/團隊協作

需求管理/PM

交互設計/可用性/可訪問性知識

可視化

SVG/Canvas/VML

D3/Rapha?l/DataV

後端工程師

編程語言

C/C++/Java/PHP/Ruby/Python/…

資料庫

SQL

MySQL/MongoDB/Oracle

操作系統

Unix/Linux/OS X/Windows

數據結構

推薦閱讀：