都說前端學習是先平緩後陡峭再平緩，那這幾個轉折點大概對應哪一領域的知識？

01-16

不管啥技術都差不多。

剛開始只想能幹活兒，那當然簡單，照著教程做，遇到困難查查資料就行了。

然後開始想研究一些原理性的東西，否則走不遠。這時候是最難的，也算是開始真正接觸了「這項」技術的本質。

最後，你會發現很多超乎於這項技術之上的公共原理和思路，發現了這些你就可以說是融會貫通了。或者說，你開始接觸到了「技術」的本質。

比如: 一個中級前端可能會發現有個後端大牛轉過來學前端，然後在一個月內就超過了你的前端水平，再過一個月就把你甩的看不見影子了，別奇怪，理當如此，這並不需要他有多麼天才。而是因為，編程能力是不分前後端的。

1 學會看 mdn 中文文檔

2 學會 log 調試

3 學會看 network

4 做出符合用戶預期的效果

這幾個點

作為明年畢業的新人回答一下自己對前端學習的看法吧。

1. 前端基礎，HTML，CSS，js

2. 組件設計，框架使用，前端工具使用

3. 框架原理，能看懂源碼，並修改優化

4. 前端工程化

5. 在前端某個方向有很深的研究，包括但不限於全端，前端可視化構建，node等

第一階段是Html和CSS，修真院強烈推薦一開始就要做響應式和自適應。不算太難。

這裡主要是標籤，屬性，盒子模型，定位，浮動，垂直居中等，沒什麼太難的。

第二階段是Bootstrap和Less，Bootstrap做為一個響應式的框架，對於初學者來說，更重要的是理解復用的概念，Less和Sass二選一，幫助你更好的理解抽象和復用。

這裡更重要的觀點就是去思考，如果說讓我來把常見的布局抽象成框架，我該怎麼做？

穿插在這兩個階段始終的有兩點。一個是拿到UI圖後，怎麼快速在腦袋裡畫出局的方案，一個是做完之後，怎麼保證百分百還原UI圖。

第一個是熟練度的問題，也是為後續學習打下結實的基礎，動手做事之前，先有方案。

另一個就是嚴謹度的問題，從一開始就養成一個百分百還原設計圖的好習慣。

附加技能就是提前培養自己對於抽象，封閉和復用的概念。

之後就進入JS的學習，這裡是一個難度上升的地方，之前CSS的難度是1，JS的難度是10.

提前兩周去看JS的基本語法書，基本語法很簡單，重點是理解變數，常量，函數，參數，返回值，作用域，判斷，循環等，不要看其他太多的東西，也不要太糾結於細節的概念，這些都可以在後續的編碼實踐里多理解。

這些籌備工作做完以後，就是第三階段的學習。

第三階段的學習主要就是Dom操作和事件處理，有了CSS的基礎，那麼第一個問題就是，怎麼用代碼去改變這些Dom節點的屬性，以及怎麼獲取呢？這就是Dom，這裡面會有一個概念要分清，原生和JQuery，推薦直接用JQuery，節省時間，沒什麼本質的差別，JQuery就是覺得原生不好用，所以才封裝了一層而已，如果理解好了Bootstrap和Less，可以用Bootstrap的一些封裝好的類，如Btn和Button的對比這些來理解Jquery和原生，但不要糾結。

Dom節點的操作是要舉一反三，沒必要把所有的Dom節點的操作都學會。

跟著就是去理解事件的概念，最簡單的就是Click事件，怎麼監聽一個事件，怎麼在監聽一個事件之後做處理？JS里有多少事件？同樣的不需要全部都試一遍。

這兒要注意的小細節就是記死，ID是給JS用的，Class是給CSS用的。

第四階段的學習就是關於業務邏輯的編寫，很多人在這一步會比較蒙逼，原因就是無法把業務邏輯轉換成JS代碼，修真院里選用的是殺人遊戲，其實也很簡單，這個時候學會畫流程圖是一件好事，順序，選擇，循環用這三種去梳理要做的事情，或者是直接寫偽代碼，我記得付老師在洗髓換骨營講過這個，很簡單，不到一小時的課，可以練習一下。

當然還是要弄明白，怎麼從大往下了拆解。

這個時候要著重培養一概念，就是分層，內聚，解藕。

這是編程思想中的一點，很多初學者在這裡，好不容易把代碼寫出來，但是代碼像一堆屎一樣，更關鍵的是不知道自己的代碼寫的渣~

這也是為什麼修真院需要對所有的來學習的人都一對一，每天審核日報和審核任務的原因，不然你自己錯了都不知道怎麼錯的。

第五階段的學習就頁面的參數傳遞，本地存儲的讀寫，以及和後台數據的交互，這三個都不算太難，但也是有自己的坑，這是的難度已經升到了20，特別是和後台數據交互，首先要理解Ajax，其次要理解什麼是跨域，再次要理解什麼是介面，最後弄明白什麼是http,什麼是參數，什麼是返回值，什麼是header，什麼是三次握手等等。

這其中對於一些基礎知識有要求了，對你的編程能力也有要求，同時跟之前寫CSS一樣，要求你拿到原型圖，就能訓練出來判斷當前頁面有幾個介面，第一個介面的參數大概是什麼，數據拿到之後怎麼在頁面展示，以及需要獲取用戶哪些數據的能力。

第六階段的學習是一個比較大的飛躍，修真院直接選取AngularJS，不要說學習曲線啦~沒太大的差別，在這方面，修真院要有經驗的多，幾百個零基礎的人都可以直接學會Angular。學會之後，對於Vue和React基本上用慫了~這裡的難度直接升到了50.

AnguarJS要學的話，之前是否打好了內聚，分層，復用的概念就特別重要了。第一要明白，為什麼要有AngularJS，是想解決什麼問題。其次就是很簡單的事了，先理解Controller，再理解雙向綁定，再理解Filter，再理解Service，再去理解Directive，這個順序就差不多了。

第七階段學習難度算是正常，基本上就是UI-Router，Bower，Webpack，Gulp，GruntJS等各種各樣的打包，包管理，路由等工具了，用到哪個學哪個。這裡的難度算是60.

但是這裡其實還有很多隱藏的東西要學習，主要就是行業相關，比如說支付，電商等行業知識，另外就是一些SDK和API的使用，如地圖，圖片，微信，小程序等。

所以整理來說，修真院更願意把這些東西都融合在一起，在了解這些行業知識的同時去學習這些技能。

這些就夠了么，還不夠。

源碼管理，開發流程，調試重構，打包部署等一系列工程化的東西，全部都是你要會的。

給出一個簡單的截圖，雖然官網上跟我說的角度不一樣~

但是道理是一樣的。

修真院的這套任務體系，就是融合了技能，能力，流程，行業，工具等一系列知識點，並且給出一對一的指導，來幫助初學者快速的成長的~

這個快速，真的是史上最快的~~

管他怎麼說呢，自己試一試就明白了。每個人的感觸都是不一樣的。

css和html不擅長就不提了，主要講js。

js的第一重境界，就是完全不考慮封裝，能用jQuery來實現需要的功能，比如tab、輪播等。這時候只需要根據需求，查詢jQuery文檔就能幹活。jQuery的封裝幫助我們隔離了瀏覽器的差異，簡化了dom操作，甚至於連for循環等都不用接觸。同時，對於和後端交互，jQuery的ajax封裝也可以讓我們輕鬆傳遞參數，處理回調。

第二重境界，封裝組件，使用常用設計模式。當我們試圖封裝一個視圖組件來進行復用時，我們勢必需要了解js的構造函數與原型鏈。同時，我們也會對jQuery的api有更多的了解，比如封裝常用的深拷貝extends，比如幫助我們使用觀察者模式解耦業務邏輯的trigger和bind。這些都需要在完成功能基礎上去學習更多知識。

第三重境界，我們開始好奇jQuery做了什麼，打開jQuery的源碼，去了解dom操作怎麼被簡化，事件代理和事件委託為什麼比原生事件好用，這時我們就會看到每一個for循環所做的事和每一個閉包以及函數式編程是如何幫助你獲得簡潔的api。這時，最好的方法就是先用原生js重新嘗試原來的功能，知道他們怎麼實現。這裡的跨度比較陡峭。

第四重境界，我們會發現組件化除了jQuery的插件，還有其他的解決方案，並且mvvm好像又要重新去學習。但是，首先要知道mvvm要解決的問題，是把我們手動使用jQuery或者原生js的代碼自動化，並且讓我們把思考的重點放在數據處理上，還一定程度提高渲染效率(diff)。這時我們需要了解它們封裝的基本思路，並且快速和現有業務結合。(和第三重不分先後)

與這些境界的提升相伴的，還有本地存儲的了解，http的更深入理解，前端安全問題的解決方案，緩存的使用和前端工程化工具的了解等。

層出不窮的框架和工具，都是為了讓我們獲得更極致的開發體驗，實現敏捷開發，減少bug，加強團隊協作能力。所以從平緩到陡峭再到平緩的學習曲線，本質上是看山是山，看山不是山，看山還是山的過程，結合業務之後境界更多。在追求更強的路上，一直很陡峭。

前端的路，或者是編程的路可能這麼走比較合適，我以自己一個「非CS專業成功轉行的人來回答這個問題」

一）編程的學習模式

學習分為經驗式和系統式。經驗式，你可以理解為就是上手直接擼代碼，從踩坑裡學習到知識，經驗式學習的方式非常適合動手能力極強的人，這種做法優勢就是「坑可以看得見，踩過了就會了」，缺點也非常明顯，你沒見過的坑，那自然沒辦法踩，如果你大部分時間都在做一些相對簡單的工作內容，那麼你進步會非常緩慢。

系統式就是我們說的「從頭到腳的基礎性學習」，就拿前端為例。一切前端頁面相關的東西，逃離不開HTML/CSS/Javascript，然而這三個東西現在已經很少人去「系統學習了」，大家走的都是經驗式學習的路子。系統學習的好處其實很明顯，那就是夯實的基礎。在擁有夯實基礎的面前，我們如果碰到一些沒見過的坑，實際上也會有解決方案。缺點更明顯，就是無聊，繁瑣，知識點太多。

我們想要學習好前端，那麼我們必須糅合這兩種學習模式，經驗式使得我們有實際經驗並且保持興趣，系統式使得我們拓展知識面，夯實我們的基礎。在如今，很多人忽略了對基礎的學習，上來直奔三大框架，目的很明顯，就是為了更快的找到一份工作。

不過現實是打擊人的，無論知乎是如何噴那些「面試整天問api的面試官」也好，在現實招聘中，對於「初級」招聘，那是永遠都存在的，為什麼？你沒有經驗，沒有項目，那我只能從「你的基礎知識考察起」而基礎只是，其實無外乎就是api或者是一些baidu都能查到的東西了。

二）學習前端的前期要點

絕對要點：要了解JS這門語言，從最簡單的api看起，對JS這門語言有整體和感性的認識和認知。這一點可以通過看一些基礎教程和基礎編程題得以實現。
掌握，理解JS中函數，對象，string，字面量等基本概念，認真，熟記一切內置方法（參數返回值）
繼承，原型鏈等「面向對象」的，對於初學者來說，別看了，看了你也看不懂，其實不用浪費時間，等代碼量上來了，你就知道是怎麼回事了。
DOM的事件和所有DOM的方法要背得滾瓜爛熟

實際上，這些東西都很簡單，但是要做到熟練於胸，那是非常的困難而且枯燥。你可以把這部分學習定義成「平緩」，因為其非常的簡單；你也可以定義成「陡峭」，因為這部分學習不是那麼多人能堅持下來。

我們系統學習HTML/CSS/Javascript，這是一個非常長期的過程，收益很緩慢，低效，或者說在剛開始的幾個月里你都不見得有什麼長進，但是相信我，認真堅持下來，你之後的成長肯定會比大部分上來直接學框架那票人要遠得多。

三）前端最難跨越的山峰

很奇妙的是，你要說前端有什麼很難跨越的巔峰，其實並沒有，現在框架盛行的年代裡，一個稍微有點智商的人，稍微認真啃一啃，吃點苦頭，就能學會。

所以，前端人員最難跨越的一座山峰就是：後端

後端的世界和前端完全不同，雖然現在因為框架的原因使得之前後端很多的任務都已經在前端來做，但是一個純正的後端和前端還是有天壤之別的。

我有一個朋友，也算是前同事。他就是大家所說的典型的頁面仔了，不過他比一般頁面仔要厲害一些，至少前端的業務邏輯也都很熟悉，搭頁面也非常的迅速。不過他有一個最麻煩的問題就在於，他聽不懂後端在說什麼，如果聽不懂後端在說什麼，那麼在數據傳輸，鏈調上面就會非常的困難。這位兄台，經常會對後端出的數據不滿意。

直到我進公司，我發現了這個問題。因為我前後都搞過，因此對後端還是比較熟悉。很短的事件內，我作為一個前端，穩穩的站穩了腳跟，搞到最後，即使是有部分業務是那個人負責的，後端也會來找我，跟我說情況，然後要我幫忙轉述過去。

無獨有偶，我在知乎看到一個關於「facebook員工的回答」，他是這麼說的：在facebook的人其實並不會給自己制定一個非常嚴重的界限，大家都非常的敞開，願意接受新知識，哪怕不是自己領域的。

說出來可能大家不信，在這三大框架縱橫的年代裡，不知道MVVM的工程師還是一大堆，說了那麼多，我想說的就是：前端人員，想要晉陞的，必須掌握一門後端語言，並且能夠使用這門語言搭建其自己的服務。

四）總結一下

最平緩時期莫過於學習最開始的簡單的HTML/JS/CSS
第一個轉折點其實不是你學會了任何一套框架，而是你「系統學習了javascript」
第二個轉折點我想，我會投票給「學會了一門後端語言」
第三個轉折點，我認為是看懂了熟悉框架的源碼：ng源碼，vue源碼，react源碼，甚至是jQ源碼

實際上，就這四點，足以讓你成為大師，而學習曲線是，1低，2高，3高，4低。

為啥我說看懂框架代碼其實並不是難點？當你理解了JS，知道JS開發頁面的痛點，框架出來解決了什麼問題以後，你看框架的代碼真的是easy as fuck.

不止前端，後端也是如此，

當你入門是一個門檻，當你熟練的使用組件能夠實現一些功能，

不論你是為了興趣還是為了加薪你都需要更深入的學習，

前端更絢麗的界面，更高的性能，後端的並發和設計

ajax，http算是平緩到陡峭的一個非常小的爬坡。陡峭里，有面向對象的應用，設計模式，演算法，這些應用的的心應手比較難。幾個框架有些部分難以理解，特別是原理部分。再就是源代碼。做項目的時候各種綜合知識的運用才能完成一個功能。之後呢，健壯性，復用性，可擴展性，架構以及造輪子等。還有呢，比較雜比較泛的知識，單是圖片這塊，就是一個體系了。

再到後面平緩我是不贊同的，這個時候的平緩個人覺得不是小爬坡，而是汪洋大海里找方向。學什麼雖然比較容易。但體系過於龐雜，線條式深入學習可能會更好，但也更容易失去全局的關聯性而導致做法非最優。

這些都不重要了。重要的是在保障質量的同時給自己節省多少時間。為他人節省多少時間。還有開發多愉快。。。

以上僅個人的一些見解。

針對個人，以上這些，都是不斷推翻重構的。

恩，菜鳥答一答吧。

html.css布局。0難度，就是寫一個靜態頁面。

h5.css3的一些新特性。1難度，增加的東西無非就是表單控制項，語義化標籤元素，新css選擇器，動畫，過渡等等。也是很簡單的。

js。2難度。相比較一些強類型語言，js的入門真的很簡單，DOM和BOM也有一堆很容易理解的方法和事件。在這裡，js配合h5，就能做出很多炫酷的交互特效了。幾年前，憑這就能找到一份不錯的前端工作了。

待續。。。

表示從開始發現前端程序員也需要自己寫介面也需要ngnix還需要Linux還得自己搞個阿里雲

看到這個問題就想到公司的剛畢業小朋友們。

就像大家都說的

第一部分界面基礎的是html css，先把界面做出來能看。升級一點考慮結構，優化html css，不要拿div去模擬按鈕，沒事兒不要亂定義寬高，浮動清除浮動，固定定位等要合理運用。

第二部分肯定就是js，基本語法不說肯定要了解（那些自學的小朋友真有定義對象用{}字面量方式都不曉得的），基礎dom操作事件監聽解綁。升級一點了解點框架和庫或者解決方案等，jq angular vue react 之類的。

第三部分就是業務抽象了，怎麼根據業務抽象出邏輯，怎麼針對業務做技術選型，特定業務學習特定的操作庫，像拖拽連線流程圖地圖等特定庫。

反正學無止境吧