如何成为优秀的前端工程师
如何成為一名優(yōu)秀的前端工程師 (share)
?
發(fā)現(xiàn)一篇不錯(cuò)的博文，和大家分享一下，為有志成為一名優(yōu)秀前端工程師的童鞋們提供一個(gè)參考。 :)~ ?
本文來(lái)源：http://www.biaodianfu.com/what-makes-a-good-front-end-engineer.html
?
?
一、技術(shù)的必須的
作為一名最基礎(chǔ)的前端工程師你必須掌握HTML、CSS和JavaScript。三者必須同時(shí)精通，類(lèi)似我這樣對(duì)前端知識(shí)一知半解的，一遇到問(wèn)題就停下工作就四處搜索解決方案的，首先就算不上一個(gè)合格的前端人員。像我這樣的如果當(dāng)了前端工程師那工期肯定是不能保證的。合格的前端工程師第一要學(xué)會(huì)的就是在沒(méi)有任何外來(lái)幫助的情況下（包括搜索引擎），能夠完成大多數(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è)鯓佑绊懼車(chē)脑匾约澳阌X(jué)得應(yīng)該如何定義它們的樣式。
- 浮動(dòng)元素——怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。
- HTML與XHTML——二者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō)出理由。
- JSON——它是什么、為什么應(yīng)該使用它、到底該怎么使用它，說(shuō)出實(shí)現(xiàn)細(xì)節(jié)來(lái)。
上述這些知識(shí)點(diǎn)都應(yīng)該是你“想都不用想”就知道的東西。除了上述的前端知識(shí)，也還需學(xué)會(huì)至少一門(mén)后端編程語(yǔ)言，讓你自己學(xué)會(huì)如何與后端進(jìn)行更好的交互。
很多前端工程師對(duì)一些庫(kù)非常的熟悉，jQuery，Bootstrap等，但是對(duì)于庫(kù)的熟悉并不能提現(xiàn)你的優(yōu)秀，真正優(yōu)秀的是那些理解庫(kù)背后的機(jī)制，特別是能夠徒手寫(xiě)出一個(gè)自己的庫(kù)的人。
真正合格的前端工程師是能實(shí)現(xiàn)具體的功能要求，而優(yōu)秀的前端工程師需要解決的問(wèn)題是尋找一個(gè)最優(yōu)的解決方案。
二、溝通很重要
優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)。在任何情況下，前端工程師至少都要滿足下列四類(lèi)客戶的需求。
不要在沒(méi)有作出評(píng)估之前就隨便接受某項(xiàng)任務(wù)。你必須始終記住，一定先搞清楚別人到底想讓你干什么，不能簡(jiǎn)單地接受“這個(gè)功能有問(wèn)題”之類(lèi)的大概其的說(shuō)法。而且，你還要確切地知道這個(gè)功能或設(shè)計(jì)的真正意圖何在。“加一個(gè)按鈕”之類(lèi)的任務(wù)并不總意味著你最后會(huì)加一個(gè)按鈕。還可能意味著你會(huì)找產(chǎn)品經(jīng)理，問(wèn)一問(wèn)這個(gè)按鈕有什么用處，然后再找UI設(shè)計(jì)師一塊探討按鈕是不是最佳的交互手段。要成為優(yōu)秀的前端工程師，這種溝通至關(guān)重要。
那么，前端工程師應(yīng)該最關(guān)注哪些人的意見(jiàn)呢？答案是所有這四類(lèi)人。優(yōu)秀的前端工程師必須知道如何平衡這四類(lèi)人的需求和預(yù)期，然后在此基礎(chǔ)上拿出最佳解決方案。由于前端工程師處于與這四類(lèi)人溝通的交匯點(diǎn)上，因此其溝通能力的重要性不言而喻。如果一個(gè)非常酷的新功能因?yàn)闀?huì)影響前端性能，必須刪繁就簡(jiǎn)，你怎么跟產(chǎn)品經(jīng)理解釋？再比如，假設(shè)某個(gè)設(shè)計(jì)如果不改回原方案可能會(huì)給應(yīng)用程序造成負(fù)面影響，你怎么才能說(shuō)服UI設(shè)計(jì)師？作為前端工程師，你必須了解每一類(lèi)人的想法從何而來(lái)，必須能拿出所有各方都能接受的解決方案。從某種意義上說(shuō)，優(yōu)秀的前端工程師就像是一位大使，需要時(shí)刻抱著外交官的心態(tài)來(lái)應(yīng)對(duì)每一天的工作。
專(zhuān)業(yè)技術(shù)可能會(huì)引領(lǐng)你進(jìn)入成為前端工程師的大門(mén)，但只有運(yùn)用該技術(shù)創(chuàng)造的應(yīng)用程序以及你跟他人并肩協(xié)同的能力，才會(huì)真正讓你變得優(yōu)秀。
三、提升無(wú)止境
優(yōu)秀的前端工程師應(yīng)該具備快速學(xué)習(xí)能力。推動(dòng)Web發(fā)展的技術(shù)并不是靜止不動(dòng)的，這些技術(shù)幾乎每天都在變化，如果沒(méi)有快速學(xué)習(xí)能力，你就跟不上Web發(fā)展的步伐。你必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式；僅僅依靠今天的知識(shí)無(wú)法適應(yīng)未來(lái)。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過(guò)自己的Web應(yīng)用程序來(lái)體現(xiàn)這種翻天覆地的變化。
四、前端開(kāi)發(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
- 開(kāi)發(fā)工具
- IDE
- VIM/Sublime Text2
- Notepad++/EditPlus
- WebStorm
- 調(diào)試工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- 版本管理
- Git/SVN
- Github/Bitbucket/Google Code
- IDE
- 代碼質(zhì)量
- Coding style
- JSLint/JSHint
- CSSLint
- Markup Validation Service
- 單元測(cè)試
- QUnit/Jasmine
- Mocha/Should/Chai
- 自動(dòng)化測(cè)試
- WebDriver
- Coding style
- 前端庫(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
- 壓縮合并
- 代碼組織
- 類(lèi)庫(kù)模塊化
- CommonJS/AMD
- YUI3模塊
- 業(yè)務(wù)邏輯模塊化
- 文件加載
- LABjs
- SeaJS/Require.js
- 類(lèi)庫(kù)模塊化
- 安全
- 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ì)/可用性/可訪問(wèn)性知識(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)
- 編程語(yǔ)言
轉(zhuǎn)載于:https://www.cnblogs.com/zccst/p/3614737.html
總結(jié)
以上是生活随笔為你收集整理的如何成为优秀的前端工程师的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 算法学习之冒泡排序
- 下一篇： 来和小伙伴一起学习响应式网页设计吧