前端新人，請問我選的這套技術棧對嗎？

01-05

先上技術：html/5，css/3/less/sass，js/json/ajax/jquery/canvas/Konva。
目前學了如上這些，接下來準備面向對象鞏固了學習框架以及angular.js。有餘力再學習vue。
目前在二線城市隨便找了一份3000+工作，一邊學習。
不知道學完能找多少k的薪資，還請我乎大神指條明路...

放心，能用一年算我輸

閱讀優化版：前端初學路線指南 - 知乎專欄

你計劃學的也太多了，貪多嚼不爛。

canvas 你學來幹嘛？網頁還沒做過就玩數據可視化？less 你學來幹嘛？你又不做真項目，找工作的時候再學也不遲。

你這個學法，要麼學到猴年馬月去了，要麼囫圇吞棗啥也沒學會。

建議學習路徑（也是我給所有半路想做前端的非程序員建議的學習路徑）：

1，3 天時間學習 html 相關語法，別一頁一頁得看書，大致看下每個標籤幹嘛的，然後 F12 打開調試器，看看知乎的頁面怎麼堆起來的，收穫對 html 的直覺。

2，一周時間學習 css，也別一頁一頁得看書，快速了解 DOM 和 selecter 是怎麼回事兒，然後嘗試兩三種常用布局，比如兩欄、三欄、懸浮 header（可以順便看下 flex 布局），收穫對 css 的直覺。

3，剩下的時間一頭扎進 js 就行了，什麼工具鏈也別用，es6 什麼的也先別管。集中精力閱讀《jsvascript 高級編程》和 DOM 無關的前幾章，了解 js 語法，順便搞清楚「js 編程」是在幹嘛。

等你差不多知道 js 編程是怎麼回事兒了，就可以做練習題找找感覺了。從最簡單的開始，比如列印三角形；再來點稍微複雜的，比如找出 1 到 100000 裡面所有的素數；最後來點經典演算法，比如快速排序、hash 表（網上有代碼，可以逐行讀懂然後默寫）。這個過程，放長一點，一到兩個月吧，一來是找找編程的感覺，二來是了解一下計算機是怎樣處理問題的。

至此，你已經初步會用 js 了。

這一關過了，就可以了解瀏覽器 api 和 jquery 了。別管瀏覽器兼容，那是 legacy，早晚沒用。這一塊可以邊看文檔邊練，隨時做一些小練習，比如點擊按鈕，給某個 div 變色。沒必要每個 api 都練，重點掌握 jquery 的 $ 符（對應原生的 querySelectorAll）、attr（對應原生的 get/setAttribute）、add/remove/hasClass、bind/unbind（對應原生的 add/removeEventListener）、原生setTimeout 等若干重要方法。一定要搞清楚事件冒泡、事件代理的概念。注意 console.log 這個函數可以很方便的列印任何對象，有助於你調試。

這個過程可長可短，不要給自己設定嚴格的時間。建議分兩步走：

第一步，熟練掌握監聽 DOM 事件，在回調里修改 DOM 節點屬性導致網頁變樣這套模式。同時也通過應用深化一下對 js 的了解，比如 this 指針到底指向誰（原型鏈相關的就先算了）。在這個過程中編寫幾個「像網頁」的網頁。就是長得想那麼回事兒，滑鼠點點還能變的頁面。

至此，你已經會寫網頁了。

第二步，當你能熟練使用 js 監聽事件、修改 DOM 屬性的時候（比如你能做出一個簡單仿 blog 文章列表頁，打開頁面顯示文章列表，點擊文章標題彈出浮層現實全文，點擊刪除按鈕可以刪除文章），可以開始鍛煉一下邏輯思維。選一個你比較熟悉的小課題，就是那種功能你很清楚，但是一時半會兒想不明白怎麼做的小程序，比如網頁版俄羅斯方塊、貪吃蛇，自己想辦法把它做出來（盡量簡化，先別琢磨什麼關卡、難度之類的事兒）。可以查資料，但是最終要手敲。

注意數據與展示分離，你程序中的狀態是一回事兒，找一個全局對象存儲它，展示到網頁上是另一回事兒，寫一個函數，根據那個全局對象里的數據集中修改 DOM。你要是混淆到一塊兒去，我保證你做不出來。另外注意分模塊，不相干的代碼，要分寫在不同的文件里。

至此，你已經是一個編程愛好者，能用代碼做出實際功能了。

等你把小程序做出來了，就可以關注下代碼習慣了。設計模式什麼的你先別關心，去網上找一個 js 編程規範，百度的，airbnb 的都可以，照著改，改到符合規範為止。

到這裡練習可以暫時停止了，重新找出你那本《javascript 高級編程》，認真看一遍，每有所悟，按照你的新想法修改之前你寫過的練習代碼。注意著重理解前面點到為止的概念，比如原型鏈、閉包、ajax 等等。

等你看完了，覺得這本書對你來說難度僅在於體會背後的意義而不是理解內容本身了，就可以停下了，最難的部分你已經學完了。

至此，你應該具備了相當的自學能力，對前端的理解力已經不是往日可比。

下一步是工程化你的代碼。

先安裝 nodejs，學習 nodejs 的基礎知識，搞清楚 nodejs 是用來幹什麼的，npm 又是幹什麼的（先別管伺服器端的那些東西，暫時你還玩不動，nodejs api 方面，會讀寫文件暫時就夠用了）。然後去網上搜索「js 壓縮」、「js 合併」、「js 打包」等詞條，搞清楚什麼是前端工程化，為什麼要工程化。

等你看懂了，拿出你做的小程序，去網上搜索 webpack 的用法，用 webpack 把它打包成發布腳本。多擺弄一下 webpack 的配置，比如把 jquery 打包到你的程序里，以及單獨引用到網頁里，分別試試，再比如把 css 打包到程序里，以及打包為單獨的 css 文件。注意多上網搜索，搞清楚每種配置的意義是什麼，對性能有什麼影響。

現在，配合著 webpack，如果你願意，你可以學習一下 es6、less 等新工具了。相比上面的東西，這些東西極其簡單，花不了你多長時間。如果你不願意，可以暫時擱置。

至此，主要基礎設施已經建設完畢。但是你還有兩個缺憾，第一，你沒寫過真正的網站，第二，你對 css 還不太懂。

所以我們還需要最後的練習，一個簡單網站項目。寫個什麼網站你說了算，比如你可以仿一下知乎或者優酷的部分頁面，你可以設想一個主流程，比如用戶登錄--視頻列表--視頻播放，這就是三個頁面。

這個練習目的有三個：

第一，學習框架使用。
第二，練習 css 使用。
第三，體會多頁面項目的開發過程。

為了達到第一目的，你要學習一下前端框架。不要覺得這很難，鑒於你前面基礎不錯，現在你應該完全可以看看框架文檔就敲出 demo 代碼來（如果不行，說明你前面敷衍了）。初學我推薦 React＋reflux 的組合，為啥是這倆呢，按理說 vue2.0 入門最方便。一來，現在用 React 的團隊確實比較多；二來，現在新版本的 angular 和 vue 都混合了各家思想，反倒是 React 思想最單純；第三，reflux 雖然不時髦，但是語法很樸實，不容易迷糊；第四，vue 的文檔做的太好了，過於好了……我覺得練習嘛，還是順便練練檢索和英語比較好對吧。

關於框架，我不想掰開細說。因為如果你多少是個 make sense 的人，經過上面那個使用 jquery 的小程序練習，應該已經發現，貪吃蛇這個程度的程序，其實就是三件事——管理程序中的狀態（如果你是理工出身，可以聯想一下狀態矩陣、狀態方程等概念），把狀態畫出來（可以聯想控制論中的傳遞函數），以及監聽事件改變狀態。然後你可能已經產生了一些想法，認為這三件事兒的實現其實是有規律可循的，甚至總結出了一套代碼結構和一些公用工具。如果是這樣，那就簡單了，所謂框架，就是那些比你經驗豐富的老司機給出的結構和工具。對照著你的理解，你可以把框架的每個部分和你腦子裡的部分對應起來。這時候，理解框架會變得極其容易。

剩下的就是你自己的事兒了，如何用 webpack 組織代碼，如何把 css 寫的盡量還原你仿的站，如何用 react 把頁面中的功能實現出來（比如視頻播放頁，左邊視頻列表，右邊播放器，列表和播放器都自己寫，以及點擊列表中的視頻播放器不刷新網頁直接切換這樣的聯動），慢慢嗑，不著急。如果你學了 es6 和 less，可以都用上。

三個注意：

1，注意使用第三方庫提高開發效率，比如顯示時間，就可以用 moment.js。

2，注意代碼規範，時刻不要忘記規範。

3，注意思考程序設計，哪些是公共代碼，哪些是組件代碼，哪些是頁面代碼，代碼如何復用，等等。可以買本設計模式看看，但是不建議硬套用，不理解的模式不要用。

等你最後這個練習也做得像模像樣了，你將收穫以下成就：

1，現在你的編程基礎跟拿前端吃飯的人比，也不算墊底的（這個標準其實不高，你懂的各行各業都有些基本功一塌糊塗的人）。
2，你已經具備成為職業前端工程師的基礎常識，換句話說，可以準備求職了。

後面的事情，就不是你要學什麼，而是你想做什麼了。你可以再多做點練習，比如編寫自己的個人網站。也可以深挖原理，比如閱讀庫或者框架代碼，等等，看你的興趣了。也可以邊求職邊學習，面試中暴露的短板，就可以著重補充。比如你想做移動端，卻不了解 click 延時和點透是什麼，就可以著重補充移動端技術，等等。

總之，隨緣就好。

現在的前端是跟著潮流走的，就像以前唱流行歌一樣，你根本沒有選擇的餘地，一輩子都要不斷地學習下去。

沒有需求來驅動、沒有經歷過大型項目大型團隊之間的協同工作，會的再多也是紙上談兵。。。

不用學這麼全的技術。

實話實說，題主說的東西中不少我也不會，但是我知道把會的東西轉換為企業價值，這就夠了。

不要學angular.js了，已過時。直接學最新版的Angular(2或4)。生態比1好很多，功能也完善，需求很快就會起來，競爭的求職者相對較少。

先學vue.

能拿什麼薪水要看你有多少能力。同樣會寫字，金庸能寫出來的東西，跟曹雪芹能寫出來的東西，跟你能寫出來的東西，都完全不是同一個水準的。

我行年輕人對於婚戀和職業發展的處理態度大多一致：我做的夠好，她就會招/愛我。這是來源於我國傳承自蘇聯的教育模式以及太快的經濟發展。教育模式講究做好當下，你別瞎想，初中就別去研究相對論，做好我給你的題，到了大學自然會教。而快速發展的經濟帶來的副作用是你沒有可信的前輩，歐美髮展了這麼多年，父輩和孩子的經歷大致穩定，而我們的父輩的經歷，和我們相差太多。

所以你的選擇，並不是最好的。在職業發展上，最優先要解決的永遠是目標，而技術的學習是要服務於目標的。未確定目標，技術學習根本就是碰運氣，而且你的運氣並不好

你所說的那些不能叫技術棧了吧，JS、JSON、HTML、CSS（或其他 compile-to-CSS 的語言）應該是必需項，做前端必會的。這些都會了再深入學習一些框架或者所謂的技術棧。

你可以選擇 Angular 獨行天下，也可以 jQuery + Backbone，也可以嘗試 React + Redux，或者當下比較火的 Vue。但學這些的前提就是你有一個堅實的 JavaScript 基礎，現在至少是要十分熟悉 ES6 的。此外 Node.js 最好也能儘可能對地去掌握，因為 Node.js 本質也是一個偏前端的引擎，自動化構建也離不開它。

最後，前端工程師也是工程師，要想薪資更漂亮一些，軟體工程師所應該具備的技能也一定不能少。

先學數據結構+演算法。

其餘都是這倆的排列組合。

對於前端，應該再加一個編譯原理。

此三門對於一個程序員來說就是獨孤九劍。

劍法分做九大部分：總訣式、破劍式、破刀式、破槍式、破鞭式、破索式、破掌式、破箭式、破氣式，分別是依據不同兵器而生的對招方式，而就其本質來說，則可理解為「與八種不同兵器對陣時，所採用的攻防觀念」。
《獨孤九劍》

最後，還要熟讀各個標準。

至於技術棧什麼的，什麼流行學什麼吧，獨孤九劍都會了，自然見招拆招。

不會獨孤九劍的程序員，只懂一招一式。

學習重點：

1.mvvm框架： vue
eactangular 三選一

2.js:基礎語法

3.ajax的原理

4.localStorage

5.js設計模式

學習進階：

1.node 與npm 環境

2.webpack

3.es6

4.前端工程化

html5/css3 不要費力氣去學，用到了再學

不建議學canvas，適用面窄，學習的東西，不能和其他聯繫一起。

給你列一個技術曲線：

JS Native -&> Vue -&> React/Redux -&> RN/Rxp -&> Weex -&> 造一個簡易版的 Vue 或者React，工資不上10000算我輸。(ng這種，ng老人建議你還是算了吧。)

剛開始學的太多太雜，註定你找不到好工作，貪多嚼不爛的道理不用多說了吧。前端是個大雜燴不假，你總要有一方面拿的出手吧。

順便多說幾句，框架什麼的沒必要多學，因為：你完全可以去了公司針對性的學習公司所需要的框架，每個公司使用的框架都不相同，而且去了公司他會給你一定的時間讓你適應的，不用擔心，只是你要熟悉框架的基本語法。

那你應該看什麼？

DOM。原生JS永遠不過時，有幾個說自己精通原生JS的？熟悉傳參、閉包的運用，全局變數啥就不說了。

Html/Css。JS寫多了，Html和Css的東西就容易忘，偶爾記得看一看，寫寫靜態頁面。

jQuery。目前是類似原生JS的存在，找到他與原生JS使用的區別，注意別混了。

AJAX。涉及數據交互的內容，其實語法很固定的，與後端的溝通包括nodejs可以深入看看。

ES6。潮流所在，不多說了。工作前多看就行了。

React。同上。

最後想想自己最想搞哪一塊，是微信小程序？手機端開發？頁面端？然後掌握一門後端語言？像全棧邁進？當然這都是入職的後話了，上面好多潑冷水的，我就鼓勵鼓勵你吧，前端需要很強的自習能力和持續能力，你能找到工作就已經半隻腳跨進來了，多努力看新知識，多寫代碼（多跳槽，手動笑臉），多看框架源代碼，過幾年打上面潑冷水的臉 …加油

先打打html/css/js基礎，然後直接學Vue就行了。

jquery、angular、less這些都過時了。

顯然不對啊。

Html直接奔著響應式和自適應去。

各種居中布局練一練。

Bootstrap必須要會。

less和Sass二選一。

這些沒什麼太問題，學JS的時候問題不少。

JS整體上來講，分成三大階段，先搞定第一階段之中的3大塊。

第一階段遠古荒野

第一部分是Dom交互，包括怎麼用JS讀取和獲取數據。

第二部分是事件處理，學會各種花樣監聽事件並響應。

第三部分是後台交互，學會怎麼獲取後台的數據並且提交數據給後台。

第二階段青銅時器

不管是原生，還是JQuery還是Angular還是其他都少不了這三大部分。

這些概念理解清楚了，直接奔著JQuery去。

框架首推Angular，Google出品的工程化框架簡直是前端架構神器。

Vue和React在某種程度上更像是一個加強版的JQuery插件。

第三階段流光溢彩

這部分主要Gulp，Requirejs，NPM這些東西。

可是學會這些也僅僅是學會了一些JS的基礎技能而已~

我更推崇的是在學習業務的時候把這些基礎技能全部練習，學會。

更多的思路，交流請關注IT修真院，我會盡量的整理的清清楚楚。

兄弟那個。。跟你說下，所謂完整意義上的前端包括IOS端，WEB端，Android端，node中間層，期間需要學習HTTP協議亂七八糟的玩意，伺服器端肯定要學習沒得跑，要不做交互要蒙圈。

所以這麼坑學什麼前端，來我PHP！！

作為非web前端，給你一些我的個人建議

首先，針對你的情況，作為一個已經有了一份工作且想通過不斷學習提升自己謀求更好發展的有志青年來說，我的建議是：先學招式，再補心法

所謂招式就是你公司目前用到的技術，比如你公司目前的前端都是以angular.js為主，那麼即使vue.js最近大熱，你大概了解一下就行了，不要花太多時間精力在vue上面，angular.js用到滾瓜爛熟是第一步，這樣在工作層面，首先你就能很快上手體現出你的工作價值。多餘的精力用來補心法。

心法就是你列的javascript/css 這些基礎底層，而不是多學一些其他的jquery／ext這些你目前公司用不上的庫。因為前端的特點是技術框架更迭速度較快，基本上1年一個主流框架，你總是再後面追不如先練好基本功打好基礎。

好了現在你掌握了公司用的angular.js，學習了javascript底層，那麼接下來看看angular.js的源碼，想一想它為什麼要這麼設計，解決了哪些問題。1. 這有助於你掌握設計思想，不管前端庫封裝成什麼樣，萬變不離其宗。2.可以幫助公司解決一些相對底層，難以定位問題，更加體現出你的價值。

好了現在源碼也學的差不多了，時間又過了一段，這時候互聯網的主流框架又有了迭代更新，這時候再出來看看大的互聯網公司都在用什麼，比如vue，然後你再學習學習，估計就會輕鬆愉快很多。

所以你的學習曲線應該是： angular.js api使用 -&> javascript基本功 -&> angular.js源碼 -&> vue.js（例舉）

對於css體系同樣再來一圈，記住學東西不在多要學透。

在這個睡了一覺起來就又多了幾個框架的狂飆突進的年代，學好學深js，css是必要的。技術棧什麼的，別被時代甩下就好。有精力有興趣自然是能夠跟緊潮流。

學一下webpack

再怎麼折騰都是為了讓用戶代理跑html+css+javascript。

框架模式解決的是讓用戶代理更快更方便的跑很多人的代碼。

體會到框架的思想後，你會發現，每個框架都有自己的側重點和優勢，再去選擇學習。

當然，歷史進程也很重要，為了立足，有些東西喜不喜歡，都要入坑。