web前端工程師
分類： Web開發(fā)應(yīng)用
一、何為Web前端工程師？
前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術(shù)進行產(chǎn)品的界面開發(fā)。制作標準優(yōu)化的代碼，并增加交互動態(tài)功能，開發(fā)JavaScript以及Flash模塊，同時結(jié)合后臺開發(fā)技術(shù)模擬整體效果，進行豐富互聯(lián)網(wǎng)的Web開發(fā)，致力于通過技術(shù)改善用戶體驗。
Web前端工程師成長之路——知識匯總
圖1、前端技術(shù)MSS
Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript！
它要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識，而且要學會運用各種工具進行輔助開發(fā)以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的因特網(wǎng)應(yīng)用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和服務(wù)器端語言（PHP、ASP.NET，JSP、Python）等語言，前端開發(fā)工程師也需要掌握。
前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學習曲線相比，前端開發(fā)的學習曲線是先快后慢。
HTML 甚至不是一門語言，他僅僅是簡單的標記語言！
CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。
Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。
也正因為如此，前端開發(fā)領(lǐng)域有很多自學成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學習曲線越來越陡峭，每前進一步都很難。 Web前端技術(shù)有一些江湖氣，知識點過于瑣碎，技術(shù)價值觀的博弈也難分伯仲，即全局的系統(tǒng)的知識結(jié)構(gòu)并未成體系，這些因素也客觀上影響了“正統(tǒng)“前端技術(shù)的沉淀！而且各種“奇技淫巧”被濫用，前端技術(shù)知識的傳承也過于泛泛，新人難看清時局把握主次。因此，前端技術(shù)領(lǐng)域，為自己覓得一個靠譜的師兄，重要性要蓋過項目、團隊、公司、甚至薪水。
另一方面，正如前面所說，前端開發(fā)是個非常新的職業(yè)，對一些規(guī)范和最佳實踐的研究都處于探索階段?？傆行碌撵`感和技術(shù)不時閃現(xiàn)出來，例如CSS sprite、負邊距布局、柵格布局等；各種JavaScript框架層出不窮，為整個前端開發(fā)領(lǐng)域注入了巨大的活力；瀏覽器大戰(zhàn)也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。為了滿足“高可維護性”的需要，需要更深入、更系統(tǒng)地去掌握前端知識，這樣才可能創(chuàng)建一個好的前端架構(gòu)，保證代碼的質(zhì)量。
隨著手持設(shè)備的迅猛發(fā)展，帶動了 HTML5行業(yè)標準的快速發(fā)展。web領(lǐng)域的技術(shù)，大概有10年都沒有大的更新了！現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學一部分，知識結(jié)構(gòu)不系統(tǒng)；另一方面，大學里面沒有這種課程，最最重要的是：北大青鳥這類培訓機構(gòu)也沒有專門的前端工程師的培訓課程?。?/p>
吳亮在《JavaScript 王者歸來》第一張的序里面說：大多數(shù)程序員認為 Javascript 過于簡陋，只適合一些網(wǎng)頁上面花哨的表現(xiàn)，所以不愿花費精力去學習，或者以為不學習就能掌握。實際上，一門語言是否腳本語言，往往是她的設(shè)計目標決定，簡單與復(fù)雜并不是區(qū)分腳本語言和非腳本語言的標準。事實上，在腳本語言里面，Javascript 屬于相當復(fù)雜的一門語言，他的復(fù)雜度即使放在非腳本語言中來衡量，也是一門相當復(fù)雜的語言！Javascript 的復(fù)雜度不遜色于 Perl 和 Python！
二、如何學習前端知識？
作為一名最基礎(chǔ)的前端工程師你必須掌握HTML、CSS和JavaScript。三者必須同時精通，類似我字樣對前端知識一知半解的，一遇到問題就停下工作就四處搜索解決方案的，首先就算不上一個合格的前端人員。像我這樣的如果當了前端工程師那工期肯定是不能保證的。合格的前端工程師第一要學會的就是在沒有任何外來幫助的情況下（包括搜索引擎），能夠完成大多數(shù)任務(wù)。
以下知識點是作為一個前端工程師必須了解和熟悉的：
DOM結(jié)構(gòu)——兩個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動。
DOM操作——怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
XMLHttpRequest——這是什么、怎樣完整地執(zhí)行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發(fā)這兩種模式，區(qū)分它們有何意義。
盒模型——外邊距、內(nèi)邊距和邊框之間的關(guān)系，IE < 8中的盒模型有什么不同。
塊級元素與行內(nèi)元素——怎么用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應(yīng)該如何定義它們的樣式。
浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。
HTML與XHTML——二者有什么區(qū)別，你覺得應(yīng)該使用哪一個并說出理由。
JSON——它是什么、為什么應(yīng)該使用它、到底該怎么使用它，說出實現(xiàn)細節(jié)來。
上述這些知識點都應(yīng)該是你“想都不用想”就知道的東西。除了上述的前端知識，也還需學會至少一門后端編程語言，讓你自己學會如何與后端進行更好的交互。很多前端工程師對一些庫非常的熟悉，jQuery，Bootstrap等，但是對于庫的熟悉并不能提現(xiàn)你的優(yōu)秀，整整優(yōu)秀的是那些理解庫背后的機制，特別是能夠徒手寫出一個自己的庫的人。真正合格的前端工程師是能實現(xiàn)具體的功能要求，而優(yōu)秀的前端工程師需要解決的問題是尋找一個最優(yōu)的解決方案。
再者，優(yōu)秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求：
產(chǎn)品經(jīng)理。這些是負責策劃應(yīng)用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現(xiàn)的應(yīng)用。一般來說，產(chǎn)品經(jīng)理都追求豐富的功能。
UI設(shè)計師。這些人負責應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設(shè)計師于流暢靚麗、但并不容易實現(xiàn)的用戶界面，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。
項目經(jīng)理。這些人負責實際地運行和維護應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運行時間、應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
最終用戶。指的是應(yīng)用程序的主要消費者。盡管前端工程師不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品所具備的功能。
Yahoo公司 ，YUI的開發(fā)工程師 Nicholas C. Zakas 認為：前端工程師是計算機科學職業(yè)領(lǐng)域中最復(fù)雜的一個工種。絕大多數(shù)傳統(tǒng)的編程思想已經(jīng)不適用了，為了在多種平臺中使用，多種技術(shù)都借鑒了大量軟科學的知識和理念。成為優(yōu)秀前端工程師所要具備的專業(yè)技術(shù)，涉及到廣闊而復(fù)雜的領(lǐng)域，這些領(lǐng)域又會因為你最終必須服務(wù)的各方的介入而變得更加復(fù)雜。專業(yè)技術(shù)可能會引領(lǐng)你進入成為前端工程師的大門，但只有運用該技術(shù)創(chuàng)造的應(yīng)用程序以及你跟他人并肩協(xié)同的能力，才會真正讓你變得優(yōu)秀。
三、提升無止境
Web前端工程師成長之路——知識匯總
圖2、Web前端工程師知識架構(gòu)
優(yōu)秀的前端工程師應(yīng)該具備快速學習能力。推動Web發(fā)展的技術(shù)并不是靜止不動的，這些技術(shù)幾乎每天都在變化，如果沒有快速學習能力，你就跟不上Web發(fā)展的步伐。你必須不斷提升自己，不斷學習新技術(shù)、新模式；僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。
四、前端開發(fā)知識架構(gòu)
前端工程師
瀏覽器
IE6/7/8/9
Firefox
Chrome/Safari/Opera
編程語言
JavaScript/Node.js
JavaScript語言精粹
切頁面
HTML/HTML5
CSS/CSS3
PhotoShop/Paint.net
開發(fā)工具
IDE
VIM/Sublime Text2
Notepad++/EditPlus
WebStorm
調(diào)試工具
Firebug/Firecookie
YSlow
IEDeveloperToolbar/IETester
Fiddler
版本管理
Git/SVN
Github/Bitbucket/Google Code
代碼質(zhì)量
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
前端標準/規(guī)范
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
編程知識儲備
數(shù)據(jù)結(jié)構(gòu)
OOP/AOP
原型鏈/作用域鏈
閉包
函數(shù)式編程
設(shè)計模式
Javascript Tips
部署流程
壓縮合并
YUI Compressor
Google Clousure Complier
CleanCSS/UglifyJS
文檔輸出
JSDoc
Dox/Doxmate
項目構(gòu)建工具
make/Ant
GYP
Grunt
Yeoman
代碼組織
類庫模塊化
CommonJS/AMD
YUI3模塊
業(yè)務(wù)邏輯模塊化
文件加載
LABjs
SeaJS/Require.js
安全
CSRF/XSS
ADsafe/Caja/Sandbox
移動Web
HTML5/CSS3
響應(yīng)式設(shè)計
Zeptojs/iScroll
V5/Sencha Touch
PhoneGap
jQuery Mobile
JavaScript生態(tài)
MongoDB/CouchDB
前沿技術(shù)社區(qū)/會議
D2/WebRebuild
NodeParty/W3CTech/HTML5夢工廠
JSConf/滬JS(JSConf.cn)
QCon/Velocity/SDCC
JSConf/NodeConf
YDN/YUIConf
計算機知識儲備
編譯原理
計算機網(wǎng)絡(luò)
操作系統(tǒng)
算法原理
軟件工程/軟件測試原理
軟技能
知識管理/總結(jié)分享
溝通技巧/團隊協(xié)作
需求管理/PM
交互設(shè)計/可用性/可訪問性知識
可視化
SVG/Canvas/VML
D3/Rapha?l/DataV
后端工程師
編程語言
C/C++/Java/PHP/Ruby/Python/…
數(shù)據(jù)庫
SQL
MySQL/MongoDB/Oracle
操作系統(tǒng)
Unix/Linux/OS X/Windows
數(shù)據(jù)結(jié)構(gòu)
五、Web前端學習書籍
HTML、CSS 類別書籍，都是大同小異，在當當網(wǎng)、卓越網(wǎng)搜索一下很多推薦。如果感覺學的差不多了，可以關(guān)注一下《CSS禪意花園》，這個很有影響力。Javascript 的書籍 推薦看老外寫的，國內(nèi)很多 Javascript 書籍的作者對 Javascript 語言了解的都不是很透徹。
這里推薦幾本 Javascript 書籍：
——初級讀物：——
《JavaScript高級程序設(shè)計》：一本非常完整的經(jīng)典入門書籍，被譽為JavaScript圣經(jīng)之一，詳解的非常詳細，最新版第三版已經(jīng)發(fā)布了，建議購買。
《JavaScript王者歸來》百度的一個Web開發(fā)項目經(jīng)理寫的，作為初學者準備的入門級教程也不錯。
——中級讀物：——
《JavaScript權(quán)威指南》：另外一本JavaScript圣經(jīng)，講解的也非常詳細，屬于中級讀物，建議購買。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神領(lǐng)袖Douglas Crockford的大作，雖然才100多頁，但是字字珠璣?。娏医ㄗh閱讀。
《高性能JavaScript》：《JavaScript高級程序設(shè)計》作者Nicholas C. Zakas的又一大作。
《Eloquent JavaScript》：這本書才200多頁，非常短小，通過幾個非常經(jīng)典的例子（艾米麗姨媽的貓、悲慘的隱士、模擬生態(tài)圈、推箱子游戲等等）來介紹JavaScript方方面面的知識和應(yīng)用方法。
高級讀物：
《JavaScript Patterns 》：書中介紹到了各種經(jīng)典的模式，如構(gòu)造函數(shù)、單例、工廠等等，值得學習。
《Pro.JavaScript.Design.Patterns》：Apress出版社講解JavaScript設(shè)計模式的書，非常不錯。
《Developing JavaScript Web Applications》：構(gòu)建富應(yīng)用的好書，針對MVC模式有較為深入的講解，同時也對一些流程的庫進行了講解。
《Developing Large Web Applications》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內(nèi)容卻都非常不錯，真正考慮到了一個大型的Web程序下，如何進行JavaScript架構(gòu)設(shè)計，值得一讀。
要做優(yōu)秀的前端工程師，還需要繼續(xù)努力：《高性能網(wǎng)站建設(shè)指南》、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議、《網(wǎng)站重構(gòu)》、《Web開發(fā)敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3”…… 這些都要深入研究！
萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。如果單純只是學習前端編程語言、而不懂后端編程語言（PHP、ASP.NET，JSP、Python），也不能算作是優(yōu)秀的前端工程師。在成為一個優(yōu)秀的前端工程師的道路上，充滿了汗水和辛勞。
http://www.w3cfuns.com/blog-5463734-5404605.html
