如何成為一名優(yōu)秀的前端工程師 (share)

?

發(fā)現(xiàn)一篇不錯(cuò)的博文，和大家分享一下，為有志成為一名優(yōu)秀前端工程師的童鞋們提供一個(gè)參考。 :)~ ?

本文來源：http://www.biaodianfu.com/what-makes-a-good-front-end-engineer.html

?

?

一、技術(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請求、怎樣檢測錯(cuò)誤。
• 嚴(yán)格模式與混雜模式——如何觸發(fā)這兩種模式，區(qū)分它們有何意義。
• 盒模型——外邊距、內(nèi)邊距和邊框之間的關(guān)系，IE < 8中的盒模型有什么不同。
• 塊級(jí)元素與行內(nèi)元素——怎么用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應(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ì)至少一門后端編程語言，讓你自己學(xué)會(huì)如何與后端進(jìn)行更好的交互。

很多前端工程師對(duì)一些庫非常的熟悉，jQuery，Bootstrap等，但是對(duì)于庫的熟悉并不能提現(xiàn)你的優(yōu)秀，真正優(yōu)秀的是那些理解庫背后的機(jī)制，特別是能夠徒手寫出一個(gè)自己的庫的人。

真正合格的前端工程師是能實(shí)現(xiàn)具體的功能要求，而優(yōu)秀的前端工程師需要解決的問題是尋找一個(gè)最優(yōu)的解決方案。

二、溝通很重要

優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

產(chǎn)品經(jīng)理——這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們能夠想象出怎樣通過應(yīng)用程序來滿足用戶需求，以及怎樣通過他們設(shè)計(jì)的模式賺到錢（但愿如此）。一般來說，這些人追求的是豐富的功能。

UI設(shè)計(jì)師——這些人負(fù)責(zé)應(yīng)用程序的視覺設(shè)計(jì)和交互模擬。他們關(guān)心的是用戶對(duì)什么敏感、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實(shí)現(xiàn)的用戶界面。

項(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)往往是盡量保持事情的簡單化，以及不在升級(jí)更新時(shí)引入新問題。

最終用戶——當(dāng)然是應(yīng)用程序的主要消費(fèi)者。盡管我們不會(huì)經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要；沒人想用的應(yīng)用程序毫無價(jià)值。最終用戶要求最多的就是對(duì)個(gè)人有用的功能，以及競爭性產(chǎn)品所具備的功能。

不要在沒有作出評(píng)估之前就隨便接受某項(xiàng)任務(wù)。你必須始終記住，一定先搞清楚別人到底想讓你干什么，不能簡單地接受“這個(gè)功能有問題”之類的大概其的說法。而且，你還要確切地知道這個(gè)功能或設(shè)計(jì)的真正意圖何在。“加一個(gè)按鈕”之類的任務(wù)并不總意味著你最后會(huì)加一個(gè)按鈕。還可能意味著你會(huì)找產(chǎn)品經(jīng)理，問一問這個(gè)按鈕有什么用處，然后再找UI設(shè)計(jì)師一塊探討按鈕是不是最佳的交互手段。要成為優(yōu)秀的前端工程師，這種溝通至關(guān)重要。

那么，前端工程師應(yīng)該最關(guān)注哪些人的意見呢？答案是所有這四類人。優(yōu)秀的前端工程師必須知道如何平衡這四類人的需求和預(yù)期，然后在此基礎(chǔ)上拿出最佳解決方案。由于前端工程師處于與這四類人溝通的交匯點(diǎn)上，因此其溝通能力的重要性不言而喻。如果一個(gè)非常酷的新功能因?yàn)闀?huì)影響前端性能，必須刪繁就簡，你怎么跟產(chǎn)品經(jīng)理解釋？再比如，假設(shè)某個(gè)設(shè)計(jì)如果不改回原方案可能會(huì)給應(yīng)用程序造成負(fù)面影響，你怎么才能說服UI設(shè)計(jì)師？作為前端工程師，你必須了解每一類人的想法從何而來，必須能拿出所有各方都能接受的解決方案。從某種意義上說，優(yōu)秀的前端工程師就像是一位大使，需要時(shí)刻抱著外交官的心態(tài)來應(yīng)對(duì)每一天的工作。

專業(yè)技術(shù)可能會(huì)引領(lǐng)你進(jìn)入成為前端工程師的大門，但只有運(yùn)用該技術(shù)創(chuàng)造的應(yīng)用程序以及你跟他人并肩協(xié)同的能力，才會(huì)真正讓你變得優(yō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
  • 編程語言
    • 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
    • 自動(dòng)化測試
      • WebDriver
  • 前端庫/框架
    • 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
  • 代碼組織
    • 類庫模塊化
      • 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夢工廠
    • JSConf/滬JS(JSConf.cn)
    • QCon/Velocity/SDCC
    • JSConf/NodeConf
    • YDN/YUIConf
  • 計(jì)算機(jī)知識(shí)儲(chǔ)備
    • 編譯原理
    • 計(jì)算機(jī)網(wǎng)絡(luò)
    • 操作系統(tǒng)
    • 算法原理
    • 軟件工程/軟件測試原理
  • 軟技能
    • 知識(shí)管理/總結(jié)分享
    • 溝通技巧/團(tuán)隊(duì)協(xié)作
    • 需求管理/PM
    • 交互設(shè)計(jì)/可用性/可訪問性知識(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)

轉(zhuǎn)載于:https://www.cnblogs.com/zccst/p/3614737.html

總結(jié)

以上是生活随笔為你收集整理的如何成为优秀的前端工程师的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。