大專生如何逆襲前端工程師

① 如何成為前端工程師

一、技術的必須的

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

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

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

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

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

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

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

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

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

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

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

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

上述這些知識點都應該是你「想都不用想」就知道的東西。除了上述的前端知識，也還需學會至少一門後端編程語言，讓你自己學會如何與後端進行更好的交互。

很多前端工程師對一些庫非常的熟悉，jQuery，Bootstrap等，但是對於庫的熟悉並不能提現你的優秀，整整優秀的是那些理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。

真正合格的前端工程師是能實現具體的功能要求，而優秀的前端工程師需要解決的問題是尋找一個最優的解決方案。

二、溝通很重要

優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

• 產品經理——這些是負責策劃應用程序的一群人。他們能夠想像出怎樣通過應用程序來滿足用戶需求，以及怎樣通過他們設計的模式賺到錢（但願如此）。一般來說，這些人追求的是豐富的功能。

• UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面。

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

• 最終用戶——當然是應用程序的主要消費者。盡管我們不會經常與最終用戶打交道，但他們的反饋意見至關重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

不要在沒有作出評估之前就隨便接受某項任務。你必須始終記住，一定先搞清楚別人到底想讓你干什麼，不能簡單地接受「這個功能有問題」之類的大概其的說法。而且，你還要確切地知道這個功能或設計的真正意圖何在。「加一個按鈕」之類的任務並不總意味著你最後會加一個按鈕。還可能意味著你會找產品經理，問一問這個按鈕有什麼用處，然後再找UI設計師一塊探討按鈕是不是最佳的交互手段。要成為優秀的前端工程師，這種溝通至關重要。

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

專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。

三、提升無止境

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

四、前端開發知識架構

• 前端工程師

• SVG/Canvas/VML

• D3/Raphaël/DataV

• 知識管理/總結分享

• 溝通技巧/團隊協作

• 需求管理/PM

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

• 編譯原理

• 計算機網路

• 操作系統

• 演算法原理

• 軟體工程/軟體測試原理

• D2/WebRebuild

• NodeParty/W3CTech/HTML5夢工廠

• JSConf/滬JS(JSConf.cn)

• QCon/Velocity/SDCC

• JSConf/NodeConf

• YDN/YUIConf

• MongoDB/CouchDB

• HTML5/CSS3

• 響應式設計

• Zeptojs/iScroll

• V5/Sencha Touch

• PhoneGap

• jQuery Mobile

• CSRF/XSS

• ADsafe/Caja/Sandbox

• 類庫模塊化

• 業務邏輯模塊化

• 文件載入

• CommonJS/AMD

• YUI3模塊

• LABjs

• SeaJS/Require.js

• 壓縮合並

• 文檔輸出

• 項目構建工具

• YUI Compressor

• Google Clousure Complier

• CleanCSS/UglifyJS

• JSDoc

• Dox/Doxmate

• make/Ant

• GYP

• Grunt

• Yeoman

• 數據結構

• OOP/AOP

• 原型鏈/作用域鏈

• 閉包

• 函數式編程

• 設計模式

• Javascript Tips

• JSPerf

• YSlow 35 rules

• PageSpeed

• HTTPWatch

• DynaTrace』s Ajax

• 高性能JavaScript

• HTTP1.1

• ECMAScript3/5

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

• CommonJS/AMD

• HTML5/CSS3

• jQuery/Underscore/Mootools/Prototype.js

• YUI3/Dojo/ExtJS

• Backbone/KnockoutJS/Emberjs

• Coding style

• 單元測試

• 自動化測試

• JSLint/JSHint

• CSSLint

• Markup Validation Service

• QUnit/Jasmine

• Mocha/Should/Chai

• WebDriver

• IDE

• 調試工具

• 版本管理

• VIM/Sublime Text2

• Notepad++/EditPlus

• WebStorm

• Firebug/Firecookie

• YSlow

• IEDeveloperToolbar/IETester

• Fiddler

• Git/SVN

• Github/Bitbucket/Google Code

• HTML/HTML5

• CSS/CSS3

• PhotoShop/Paint.net

• JavaScript/Node.js

• JavaScript語言精粹

• IE6/7/8/9

• Firefox

• Chrome/Safari/Opera

• 瀏覽器

• 編程語言

• 切頁面

• 開發工具

• 代碼質量

• 前端庫/框架

• 前端標准/規范

• 性能

• 編程知識儲備

• 部署流程

• 代碼組織

• 安全

• 移動Web

• JavaScript生態

• 前沿技術社區/會議

• 計算機知識儲備

• 軟技能

• 可視化

• 後端工程師

• Unix/Linux/OS X/Windows

• SQL

• MySQL/MongoDB/Oracle

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

• 編程語言

• 資料庫

• 操作系統

• 數據結構

參考鏈接：


http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html

JacksonTian/fks · GitHub

② 如何成為一個前端工程師

作為一名前端工程師，必須要掌握的三樣東西HTML,CSS,Javascript。這里掌握的意思是，你不需要去藉助搜索引擎去完成你的主要任務，當然我沒有涵蓋到書本，因為在JS發展到現在的，我們已經在裡面添加里數不清的介面，你也不可能全部都瞭然於心。
三者當中你還要比較深刻了解JS中的兩大部分，COREscript 和DOM,前者也就是我們經常提到的ECMAscript。你需要知道JS中最不同於其他語言的一些基本概念，諸如原型鏈，事件冒泡，字面量等，這對於你去了解一些框架有很大的幫助。當然你是不能不懂得AJAX，幾乎我沒有見過有哪個新型web站是不用這些技術的。另外你還懂得如何去操縱DOM，這個很關鍵。也是最繁瑣的一個地方（繁瑣的地方是，當你深入理解到節點類型，map，一堆繁瑣的底層API的時候，你就會想哭的感覺，當然很多時候你都不會用到這些東西），當然一般來說它也不是什麼難題，多加訓練即可。
socket 需要重點理解），只是一些新的擴展性API，在經驗當中可以成長。
當你覺得自己概念知識都能夠基本掌握的時候，那麼請你去實踐。多麼偉大的代碼都要經過實踐出真知，它不僅可以給你帶來驗證，而且它可以讓你深刻去理解。
如果你想繼續提升自己的能力，那麼可以從以下幾個方面去提升：
1.閱讀別人的程序，理解別人的思路。你可以去使用和閱讀框架，當然有人一聽到框架就會嗤之以鼻，特別是性能黨。我想說框架是個好東西，不過前提是你最好理解底層的東西。
2.優化你的程序，把你的程序做精做簡，這是非常考驗一個前端工程師的自我修養能力。
3.構建一個後端程序，或許你可以使用node去構建一個伺服器，網上有教程手把手教你從基本做起，讓你可以很好的貫穿前後端的知識。
4.如果你還有時間，那麼可以學些腳本語言提高下自己的能力。作為一名前端個工程師，我們並不是需要你很全面的掌握一切有關計算機的知識，因為那樣很不實際。你要相信你的記憶力和精力都是有限的，特別是面對費腦子的計算機。

③ 怎樣才能成為優秀的前端工程師

這個問題沒有絕對的標准，說說我所認為的優秀的前端：
一，時刻緊隨前端界的發展風向，了解並適當掌握新技術，有一定的技術視野。
二，對於瀏覽器的內核引擎有一定的理解，知道瀏覽器解析、渲染頁面的基本原理。
三，有扎實的HTML, JavaScript, CSS基礎，對於像HTML5, CSS3, ECMAScript新標准有全面的認識。
四，掌握各種調試桌面端/移動端/App內嵌頁面的方法與技術，有快速定位問題范圍的能力。
五，理解HTTP, HTTPS, UDP, TCP協議等，有比較全面的計算機網路知識。
六，對於各種後端語言在不同應用場景下的優劣有自己的見解與認識，知道在什麼情況下應該採用怎樣的技術選型。
七，知道如何組建出高效易用的前端自動化編譯/調試/測試的工程化流程。
目前國內所謂前端工程師還是有好多分支的，有的前端在UED部門，有的在設計部門，有的在技術部門，所以首先要找好自己的定位，在技術部門的你就狂鑽研javascript，死扣兼容性問題， 在UED部門你就可以關注一些交互，提高自己的溝通技巧（因為我覺得產品和交互就是耍嘴皮子的），在設計部門你就扣css細節，像素級別的，關注各種布局和效果的技術實現，提高設計稿還原度和效率。
優秀的前端，即能高效准確的還原設計稿，又精通瀏覽器兼容性問題，同時精通javascript，各種跟後台的數據交互，又廣泛涉獵產品和交互設計，能與交互設計是和產品唇槍舌戰。

④ 如何自學前端少走彎路

先說一下自學前端如何入門吧。

方法：

第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。

第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。

路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(微信小程序開發、ReactNative、各類混合應用開發)

第6階段：Node.js全棧開發(1周)

內容包括：(WebApp後端系統開發、一、Node.js基礎與Node.js核心模塊；二、Express；三、noSQL資料庫)

至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！

⑤ 怎樣成長為一個優秀的 Web 前端開發工程師

學習web前端的開發，個人認為大概可以分為以下幾個步驟，或者層次吧。首先，基礎一定要牢固，主要就是HTML、CSS和javascript，這三者一定要掌握。當然，在初級階段並不需要對js做太深入的研究，會查手冊用jquery庫基本差不多。應該把更多的精力放在HTML和css上。由於近年來HTML5和css3的火熱，在這方面需要花上更多的時間。 然後，可以抽時間深入的學習一下js，對js的理解程度是評價一個前端工程師是否優秀的重要標准之一，這也是為我們接下來學習前端框架打下基礎。對高階的js掌握得差不多的時候，就去多了解一些框架，比如angularjs，看看jquery庫的源碼，領悟別人的設計思想。 最後，建議熟悉一門服務端語言，比如php，懂得後台的基本工作原理，這樣能夠極大的減少前端與後端在交流時的時間成本。

⑥ 轉型成為web前端工程師需要學些什麼

前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，

0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：

1. 師資力量雄厚

要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。

2. 就業保障完善

實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。

3. 學費性價比高

一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。

希望你早日學有所成。

⑦ 前端工程師從小白到大神要經歷哪幾個階段

首先是找到第一份正式工作前的那個階段，這階段就是入門，但你再入門都代替不了一份實際的工作。
找到第一份正式工作，幾年內主要是實現功能，修bug，做重構，把理論和實踐充分結合起來，用各種工具，庫和流程，積累經驗，套路都懂了。
到某個時候你會發現市場上該接觸的東西似乎都接觸過了，套路已經滿足不了你，你開始對這個技術棧有了自己的見解，搞出來的東西水平高了，能自信的選型，做出靠譜的架構來，設計流程，帶帶團隊的人，這是所謂senior的階段。每個人情況不同，一般這個過程需要5年以上的積累。
你不會成為大神的，大神是小白臆造出來的糖衣炮彈。行業內的真正大神不是從「前端「開始的，而是大廠里喜歡折騰編譯器，設計模式，模式匹配，把functional programming當飯吃的那些人。他們的思路跟你的不在一個層次上。