web前端工程師

分類： Web開發(fā)應(yīng)用

一欠窒、何為Web前端工程師悦污？

前端工程師铸屉，也叫Web前端開發(fā)工程師篮条。他是隨著web發(fā)展眉菱，細(xì)分出來的行業(yè)。Web前端開發(fā)工程師荐虐，主要職責(zé)是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術(shù)進(jìn)行產(chǎn)品的界面開發(fā)踏枣。制作標(biāo)準(zhǔn)優(yōu)化的代碼昌屉，并增加交互動(dòng)態(tài)功能，開發(fā)JavaScript以及Flash模塊茵瀑，同時(shí)結(jié)合后臺(tái)開發(fā)技術(shù)模擬整體效果间驮，進(jìn)行豐富互聯(lián)網(wǎng)的Web開發(fā)，致力于通過技術(shù)改善用戶體驗(yàn)马昨。

Web前端工程師成長(zhǎng)之路——知識(shí)匯總

圖1竞帽、前端技術(shù)MSS

Web前端開發(fā)技術(shù)主要包括三個(gè)要素：HTML、CSS和JavaScript鸿捧！

它要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術(shù)屹篓，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)笛谦，而且要學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)以及理論層面的知識(shí)抱虐，包括代碼的可維護(hù)性、組件的易用性饥脑、分層語(yǔ)義模板和瀏覽器分級(jí)支持等恳邀。

隨著近兩三年來RIA（Rich Internet Applications的縮寫懦冰，中文含義為：豐富的因特網(wǎng)應(yīng)用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight谣沸、XML和服務(wù)器端語(yǔ)言（PHP刷钢、ASP.NET，JSP乳附、Python）等語(yǔ)言内地，前端開發(fā)工程師也需要掌握。

前端開發(fā)的入門門檻其實(shí)很低赋除，與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線相比阱缓，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。

HTML 甚至不是一門語(yǔ)言举农，他僅僅是簡(jiǎn)單的標(biāo)記語(yǔ)言荆针！

CSS 只是無類型的樣式修飾語(yǔ)言。當(dāng)然可以勉強(qiáng)算作弱類型語(yǔ)言颁糟。

Javascript 的基礎(chǔ)部分相對(duì)來說不難航背，入手還算快。

也正因?yàn)槿绱死饷玻岸碎_發(fā)領(lǐng)域有很多自學(xué)成“才”的同行玖媚，但大多數(shù)人都停留在會(huì)用的階段，因?yàn)楹竺娴膶W(xué)習(xí)曲線越來越陡峭婚脱，每前進(jìn)一步都很難今魔。 Web前端技術(shù)有一些江湖氣，知識(shí)點(diǎn)過于瑣碎起惕，技術(shù)價(jià)值觀的博弈也難分伯仲涡贱，即全局的系統(tǒng)的知識(shí)結(jié)構(gòu)并未成體系，這些因素也客觀上影響了“正統(tǒng)“前端技術(shù)的沉淀惹想！而且各種“奇技淫巧”被濫用问词，前端技術(shù)知識(shí)的傳承也過于泛泛，新人難看清時(shí)局把握主次嘀粱。因此激挪，前端技術(shù)領(lǐng)域，為自己覓得一個(gè)靠譜的師兄锋叨，重要性要蓋過項(xiàng)目垄分、團(tuán)隊(duì)、公司娃磺、甚至薪水薄湿。

另一方面，正如前面所說，前端開發(fā)是個(gè)非常新的職業(yè)豺瘤，對(duì)一些規(guī)范和最佳實(shí)踐的研究都處于探索階段吆倦。總有新的靈感和技術(shù)不時(shí)閃現(xiàn)出來坐求，例如CSS sprite蚕泽、負(fù)邊距布局、柵格布局等桥嗤；各種JavaScript框架層出不窮须妻，為整個(gè)前端開發(fā)領(lǐng)域注入了巨大的活力；瀏覽器大戰(zhàn)也越來越白熱化泛领，跨瀏覽器兼容方案依然是五花八門荒吏。為了滿足“高可維護(hù)性”的需要，需要更深入师逸、更系統(tǒng)地去掌握前端知識(shí)司倚，這樣才可能創(chuàng)建一個(gè)好的前端架構(gòu)，保證代碼的質(zhì)量篓像。

隨著手持設(shè)備的迅猛發(fā)展，帶動(dòng)了 HTML5行業(yè)標(biāo)準(zhǔn)的快速發(fā)展皿伺。web領(lǐng)域的技術(shù)员辩，大概有10年都沒有大的更新了！現(xiàn)在市場(chǎng)很需要優(yōu)秀的鸵鸥、高級(jí)的前端工程師奠滑。一方面是因?yàn)檫@是一個(gè)比較新的細(xì)分行業(yè)，而且前端程序員大都自學(xué)一部分妒穴，知識(shí)結(jié)構(gòu)不系統(tǒng)宋税；另一方面，大學(xué)里面沒有這種課程讼油，最最重要的是：北大青鳥這類培訓(xùn)機(jī)構(gòu)也沒有專門的前端工程師的培訓(xùn)課程＝苋！

吳亮在《JavaScript 王者歸來》第一張的序里面說：大多數(shù)程序員認(rèn)為 Javascript 過于簡(jiǎn)陋矮台，只適合一些網(wǎng)頁(yè)上面花哨的表現(xiàn)乏屯，所以不愿花費(fèi)精力去學(xué)習(xí)，或者以為不學(xué)習(xí)就能掌握瘦赫。實(shí)際上辰晕，一門語(yǔ)言是否腳本語(yǔ)言，往往是她的設(shè)計(jì)目標(biāo)決定确虱，簡(jiǎn)單與復(fù)雜并不是區(qū)分腳本語(yǔ)言和非腳本語(yǔ)言的標(biāo)準(zhǔn)含友。事實(shí)上，在腳本語(yǔ)言里面，Javascript 屬于相當(dāng)復(fù)雜的一門語(yǔ)言窘问，他的復(fù)雜度即使放在非腳本語(yǔ)言中來衡量扎唾，也是一門相當(dāng)復(fù)雜的語(yǔ)言！Javascript 的復(fù)雜度不遜色于 Perl 和 Python南缓！

二胸遇、如何學(xué)習(xí)前端知識(shí)？

作為一名最基礎(chǔ)的前端工程師你必須掌握HTML汉形、CSS和JavaScript纸镊。三者必須同時(shí)精通，類似我字樣對(duì)前端知識(shí)一知半解的概疆，一遇到問題就停下工作就四處搜索解決方案的逗威，首先就算不上一個(gè)合格的前端人員。像我這樣的如果當(dāng)了前端工程師那工期肯定是不能保證的岔冀。合格的前端工程師第一要學(xué)會(huì)的就是在沒有任何外來幫助的情況下（包括搜索引擎）凯旭，能夠完成大多數(shù)任務(wù)。

以下知識(shí)點(diǎn)是作為一個(gè)前端工程師必須了解和熟悉的：

DOM結(jié)構(gòu)——兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)使套。

DOM操作——怎樣添加罐呼、移除、移動(dòng)侦高、復(fù)制嫉柴、創(chuàng)建和查找節(jié)點(diǎn)。

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

XMLHttpRequest——這是什么计螺、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤瞧壮。

嚴(yán)格模式與混雜模式——如何觸發(fā)這兩種模式登馒，區(qū)分它們有何意義。

盒模型——外邊距咆槽、內(nèi)邊距和邊框之間的關(guān)系陈轿，IE < 8中的盒模型有什么不同。

塊級(jí)元素與行內(nèi)元素——怎么用CSS控制它們罗晕、它們?cè)鯓佑绊懼車脑匾约澳阌X得應(yīng)該如何定義它們的樣式济欢。

浮動(dòng)元素——怎么使用它們、它們有什么問題以及怎么解決這些問題小渊。

HTML與XHTML——二者有什么區(qū)別法褥，你覺得應(yīng)該使用哪一個(gè)并說出理由。

JSON——它是什么酬屉、為什么應(yīng)該使用它半等、到底該怎么使用它揍愁，說出實(shí)現(xiàn)細(xì)節(jié)來。

上述這些知識(shí)點(diǎn)都應(yīng)該是你“想都不用想”就知道的東西杀饵。除了上述的前端知識(shí)莽囤，也還需學(xué)會(huì)至少一門后端編程語(yǔ)言，讓你自己學(xué)會(huì)如何與后端進(jìn)行更好的交互切距。很多前端工程師對(duì)一些庫(kù)非常的熟悉朽缎，jQuery，Bootstrap等谜悟，但是對(duì)于庫(kù)的熟悉并不能提現(xiàn)你的優(yōu)秀话肖，整整優(yōu)秀的是那些理解庫(kù)背后的機(jī)制，特別是能夠徒手寫出一個(gè)自己的庫(kù)的人葡幸。真正合格的前端工程師是能實(shí)現(xiàn)具體的功能要求最筒，而優(yōu)秀的前端工程師需要解決的問題是尋找一個(gè)最優(yōu)的解決方案。

再者蔚叨，優(yōu)秀的前端工程師需要具備良好的溝通能力床蜘，因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求：

產(chǎn)品經(jīng)理。這些是負(fù)責(zé)策劃應(yīng)用程序的一群人蔑水。他們會(huì)想出很多新鮮的邢锯、奇怪的、甚至是不可是實(shí)現(xiàn)的應(yīng)用肤粱。一般來說弹囚，產(chǎn)品經(jīng)理都追求豐富的功能。

UI設(shè)計(jì)師领曼。這些人負(fù)責(zé)應(yīng)用程序的視覺設(shè)計(jì)和交互模擬。他們關(guān)心的是用戶對(duì)什么敏感蛮穿、交互的一貫性以及整體的好用性庶骄。一般來說，UI設(shè)計(jì)師于流暢靚麗践磅、但并不容易實(shí)現(xiàn)的用戶界面单刁，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。

項(xiàng)目經(jīng)理府适。這些人負(fù)責(zé)實(shí)際地運(yùn)行和維護(hù)應(yīng)用程序羔飞。項(xiàng)目管理的主要關(guān)注點(diǎn)，無外乎正常運(yùn)行時(shí)間檐春、應(yīng)用程序始終正陈咛剩可用的時(shí)間、性能和截止日期疟暖。項(xiàng)目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡(jiǎn)單化卡儒，以及不在升級(jí)更新時(shí)引入新問題田柔。

最終用戶。指的是應(yīng)用程序的主要消費(fèi)者骨望。盡管前端工程師不會(huì)經(jīng)常與最終用戶打交道硬爆，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對(duì)個(gè)人有用的功能擎鸠，以及競(jìng)爭(zhēng)性產(chǎn)品所具備的功能缀磕。

Yahoo公司 ，YUI的開發(fā)工程師 Nicholas C. Zakas 認(rèn)為：前端工程師是計(jì)算機(jī)科學(xué)職業(yè)領(lǐng)域中最復(fù)雜的一個(gè)工種劣光。絕大多數(shù)傳統(tǒng)的編程思想已經(jīng)不適用了袜蚕，為了在多種平臺(tái)中使用，多種技術(shù)都借鑒了大量軟科學(xué)的知識(shí)和理念赎线。成為優(yōu)秀前端工程師所要具備的專業(yè)技術(shù)廷没，涉及到廣闊而復(fù)雜的領(lǐng)域，這些領(lǐng)域又會(huì)因?yàn)槟阕罱K必須服務(wù)的各方的介入而變得更加復(fù)雜垂寥。專業(yè)技術(shù)可能會(huì)引領(lǐng)你進(jìn)入成為前端工程師的大門颠黎，但只有運(yùn)用該技術(shù)創(chuàng)造的應(yīng)用程序以及你跟他人并肩協(xié)同的能力，才會(huì)真正讓你變得優(yōu)秀滞项。

三狭归、提升無止境

Web前端工程師成長(zhǎng)之路——知識(shí)匯總

圖2、Web前端工程師知識(shí)架構(gòu)

優(yōu)秀的前端工程師應(yīng)該具備快速學(xué)習(xí)能力文判。推動(dòng)Web發(fā)展的技術(shù)并不是靜止不動(dòng)的过椎，這些技術(shù)幾乎每天都在變化，如果沒有快速學(xué)習(xí)能力戏仓，你就跟不上Web發(fā)展的步伐疚宇。你必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)赏殃、新模式敷待；僅僅依靠今天的知識(shí)無法適應(yīng)未來。Web的明天與今天必將有天壤之別仁热，而你的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化榜揖。

四、前端開發(fā)知識(shí)架構(gòu)

前端工程師

瀏覽器

IE6/7/8/9

Firefox

Chrome/Safari/Opera

編程語(yǔ)言

JavaScript/Node.js

JavaScript語(yǔ)言精粹

切頁(yè)面

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

單元測(cè)試

QUnit/Jasmine

Mocha/Should/Chai

自動(dòng)化測(cè)試

WebDriver

前端庫(kù)/框架

jQuery/Underscore/Mootools/Prototype.js

YUI3/Dojo/ExtJS

Backbone/KnockoutJS/Emberjs

前端標(biāo)準(zhǔn)/規(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í)儲(chǔ)備

數(shù)據(jù)結(jié)構(gòu)

OOP/AOP

原型鏈/作用域鏈

閉包

函數(shù)式編程

設(shè)計(jì)模式

Javascript Tips

部署流程

壓縮合并

YUI Compressor

Google Clousure Complier

CleanCSS/UglifyJS

文檔輸出

JSDoc

Dox/Doxmate

項(xiàng)目構(gòu)建工具

make/Ant

GYP

Grunt

Yeoman

代碼組織

類庫(kù)模塊化

CommonJS/AMD

YUI3模塊

業(yè)務(wù)邏輯模塊化

文件加載

LABjs

SeaJS/Require.js

安全

CSRF/XSS

ADsafe/Caja/Sandbox

移動(dòng)Web

HTML5/CSS3

響應(yīng)式設(shè)計(jì)

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

JavaScript生態(tài)

MongoDB/CouchDB

前沿技術(shù)社區(qū)/會(huì)議

D2/WebRebuild

NodeParty/W3CTech/HTML5夢(mèng)工廠

JSConf/滬JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

YDN/YUIConf

計(jì)算機(jī)知識(shí)儲(chǔ)備

編譯原理

計(jì)算機(jī)網(wǎng)絡(luò)

操作系統(tǒng)

算法原理

軟件工程/軟件測(cè)試原理

軟技能

知識(shí)管理/總結(jié)分享

溝通技巧/團(tuán)隊(duì)協(xié)作

需求管理/PM

交互設(shè)計(jì)/可用性/可訪問性知識(shí)

可視化

SVG/Canvas/VML

D3/Rapha?l/DataV

后端工程師

編程語(yǔ)言

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

數(shù)據(jù)庫(kù)

SQL

MySQL/MongoDB/Oracle

操作系統(tǒng)

Unix/Linux/OS X/Windows

數(shù)據(jù)結(jié)構(gòu)

五抗蠢、Web前端學(xué)習(xí)書籍

HTML举哟、CSS 類別書籍，都是大同小異迅矛，在當(dāng)當(dāng)網(wǎng)妨猩、卓越網(wǎng)搜索一下很多推薦。如果感覺學(xué)的差不多了诬乞，可以關(guān)注一下《CSS禪意花園》册赛，這個(gè)很有影響力钠导。Javascript 的書籍 推薦看老外寫的，國(guó)內(nèi)很多 Javascript 書籍的作者對(duì) Javascript 語(yǔ)言了解的都不是很透徹森瘪。

這里推薦幾本 Javascript 書籍：

——初級(jí)讀物：——

《JavaScript高級(jí)程序設(shè)計(jì)》：一本非常完整的經(jīng)典入門書籍牡属，被譽(yù)為JavaScript圣經(jīng)之一，詳解的非常詳細(xì)扼睬，最新版第三版已經(jīng)發(fā)布了逮栅，建議購(gòu)買。

《JavaScript王者歸來》百度的一個(gè)Web開發(fā)項(xiàng)目經(jīng)理寫的窗宇，作為初學(xué)者準(zhǔn)備的入門級(jí)教程也不錯(cuò)措伐。

——中級(jí)讀物：——

《JavaScript權(quán)威指南》：另外一本JavaScript圣經(jīng)，講解的也非常詳細(xì)军俊，屬于中級(jí)讀物侥加，建議購(gòu)買。

《JavaScript.The.Good.Parts》：Yahoo大牛粪躬，JavaScript精神領(lǐng)袖Douglas Crockford的大作担败，雖然才100多頁(yè)，但是字字珠璣傲佟提前！強(qiáng)烈建議閱讀。

《高性能JavaScript》：《JavaScript高級(jí)程序設(shè)計(jì)》作者Nicholas C. Zakas的又一大作泳唠。

《Eloquent JavaScript》：這本書才200多頁(yè)狈网，非常短小，通過幾個(gè)非常經(jīng)典的例子（艾米麗姨媽的貓笨腥、悲慘的隱士拓哺、模擬生態(tài)圈、推箱子游戲等等）來介紹JavaScript方方面面的知識(shí)和應(yīng)用方法脖母。

高級(jí)讀物：

《JavaScript Patterns 》：書中介紹到了各種經(jīng)典的模式拓售，如構(gòu)造函數(shù)、單例镶奉、工廠等等，值得學(xué)習(xí)崭放。

《Pro.JavaScript.Design.Patterns》：Apress出版社講解JavaScript設(shè)計(jì)模式的書哨苛，非常不錯(cuò)。

《Developing JavaScript Web Applications》：構(gòu)建富應(yīng)用的好書币砂，針對(duì)MVC模式有較為深入的講解建峭，同時(shí)也對(duì)一些流程的庫(kù)進(jìn)行了講解。

《Developing Large Web Applications》：不僅有JavaScript方面的介紹决摧，還有CSS亿蒸、HTML方面的介紹凑兰，但是介紹的內(nèi)容卻都非常不錯(cuò)，真正考慮到了一個(gè)大型的Web程序下边锁，如何進(jìn)行JavaScript架構(gòu)設(shè)計(jì)姑食，值得一讀。

要做優(yōu)秀的前端工程師茅坛，還需要繼續(xù)努力：《高性能網(wǎng)站建設(shè)指南》音半、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議贡蓖、《網(wǎng)站重構(gòu)》曹鸠、《Web開發(fā)敏捷之道》、“ jQuery 庫(kù)”斥铺、“前端框架”彻桃、“HTML5”、“CSS3”…… 這些都要深入研究晾蜘！

萬事開頭難邻眷！如果你能到這個(gè)境界，剩下的路自己就可以走下去了笙纤。如果單純只是學(xué)習(xí)前端編程語(yǔ)言耗溜、而不懂后端編程語(yǔ)言（PHP、ASP.NET省容，JSP抖拴、Python），也不能算作是優(yōu)秀的前端工程師腥椒。在成為一個(gè)優(yōu)秀的前端工程師的道路上阿宅，充滿了汗水和辛勞。

http://www.w3cfuns.com/blog-5463734-5404605.html