前端技能匯總 知識結(jié)構(gòu)

Frontend Knowledge Structure

項目起源

前端知識結(jié)構(gòu)
前端知識結(jié)構(gòu)

可視化效果

前端開發(fā)知識結(jié)構(gòu)

前端書籍推薦

★越少越簡單,越適合入門,★多的要么是難度比較高,要么是比較適合在后面看,比如講性能之類的書.

CSS

JavaScript

性能實踐

版本控制工具

后端書籍推薦

Linux管理

Linux編程

C/C++

前端工作面試

內(nèi)容貢獻(xiàn)者

除了感謝Jayli提供了知識結(jié)構(gòu)圖的原本來，還感謝以下的內(nèi)容貢獻(xiàn)者們医清，結(jié)果由git-summary生成于2014-01-03：


 project  : fks
 repo age : 1 year, 3 months
 active   : 53 days
 commits  : 108
 files    : 4
 authors  :
    56  Jackson Tian            51.9%
     9  吳曉蘭               8.3%
     5  liyinkan                4.6%
     3  chriscai                2.8%
     3  fengxiaolong            2.8%
     3  XiNGRZ                  2.8%
     2  monkadd                 1.9%
     2  Johnny                  1.9%
     2  weiwenqing              1.9%
     2  Yinkan Li               1.9%
     2  Copypeng                1.9%
     2  左岸                  1.9%
     2  Jakukyo Friel           1.9%
     2  Glowin                  1.9%
     1  李亞川               0.9%
     1  Evan You                0.9%
     1  Mickey                  0.9%
     1  Mickey-                 0.9%
     1  Qi Junyuan              0.9%
     1  browsnet                0.9%
     1  doabit                  0.9%
     1  guoxiangyang            0.9%
     1  linkgod                 0.9%
     1  popomore                0.9%
     1  vipzhicheng             0.9%
     1  zhaqiang                0.9%
     1  Colin Luo               0.9%

轉(zhuǎn)載請注明出處: https://github.com/qiu-deqing/FE-learning



Table of Contents generated with DocToc

FE-learning

結(jié)合個人經(jīng)歷總結(jié)的前端入門方法奸例，總結(jié)從零基礎(chǔ)到具備前端基本技能的道路割去、學(xué)習(xí)方法赖条、資料坟瓢。由于能力有限鳞仙，不能保證面面俱到君躺，只是作為入門參考峭判，面向初學(xué)者开缎，讓初學(xué)者少走彎路。

互聯(lián)網(wǎng)的快速發(fā)展和激烈競爭朝抖，用戶體驗成為一個重要的關(guān)注點啥箭，導(dǎo)致專業(yè)前端工程師成為熱門職業(yè)，各大公司對前端工程師的需求量都很大治宣，要求也越來越高急侥，優(yōu)秀的前端工程師更是稀缺。個人感覺前端入門相對容易侮邀，但是也需要系統(tǒng)地認(rèn)真學(xué)習(xí)坏怪，在打好基礎(chǔ)后堅持學(xué)習(xí)，成為優(yōu)秀前端工程師也只是時間問題绊茧。

學(xué)習(xí)任何知識最重要的都是興趣铝宵，如果經(jīng)過一段時間的學(xué)習(xí)感覺不喜歡，那可能強迫自己學(xué)習(xí)是很痛苦的华畏，效果也不會好鹏秋，畢竟這很可能就是以后很多年生存的技能。不過隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展亡笑，前端必然是Web開發(fā)人員需要學(xué)習(xí)的知識侣夷，有時候是沒有專業(yè)前端工程師一起合作的，所以即使不做專門的前端工程師仑乌，掌握基本的前端技能為工作帶來方便百拓。

后期邀請了一些同學(xué)分享學(xué)習(xí)經(jīng)歷。如果有同學(xué)愿意分享,歡迎push

必備基礎(chǔ)技能

前端技能匯總這個項目詳細(xì)記錄
了前端工程師牽涉到的各方面知識晰甚。在具備基本技能之后可以在里面找到學(xué)習(xí)
的方向贱迟，完善技能和知識面状植。

frontend-dev-bookmarks是老外總結(jié)的前端開發(fā)資源。覆蓋面非常廣。包括各種知識點恬惯、工具排宰、技術(shù)官辽，非常全面馍盟。

以下是個人覺得入門階段應(yīng)該熟練掌握的基礎(chǔ)技能：

  • HTML4，HTML5語法穿香、標(biāo)簽亭引、語義
  • CSS2.1，CSS3規(guī)范皮获，與HTML結(jié)合實現(xiàn)各種布局焙蚓、效果
  • Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作购公，HTML5新增功能
  • 一個成熟的客戶端javascript庫萌京，推薦jquery
  • 一門服務(wù)器端語言：如果有服務(wù)器端開發(fā)經(jīng)驗，使用已經(jīng)會的語言即可宏浩，如果沒有服務(wù)器端開發(fā)經(jīng)驗知残，熟悉Java可以選擇Servlet，不熟悉的可以選PHP比庄，能實現(xiàn)簡單登陸注冊功能就足夠支持前端開發(fā)了求妹，后續(xù)可能需要繼續(xù)學(xué)習(xí)，最基本要求是實現(xiàn)簡單的功能模擬佳窑，
  • HTTP

在掌握以上基礎(chǔ)技能之后制恍，工作中遇到需要的技術(shù)也能快速學(xué)習(xí)。

基本開發(fā)工具

恰當(dāng)?shù)墓ぞ吣苡行岣邔W(xué)習(xí)效率神凑，將重點放在知識本身净神，在出現(xiàn)問題時能快速定位并
解決問題，以下是個人覺得必備的前端開發(fā)工具：

  • 文本編輯器：推薦Sublime Text溉委，支持各種插件鹃唯、主題、設(shè)置瓣喊，使用方便
  • 瀏覽器：推薦Google Chrome坡慌，更新快，對前端各種標(biāo)準(zhǔn)提供了非常好的支持
  • 調(diào)試工具：推薦Chrome自帶的Chrome develop tools型宝，可以輕松查看DOM結(jié)構(gòu)八匠、樣式絮爷，通過控制臺輸出調(diào)試信息趴酣，調(diào)試javascript，查看網(wǎng)絡(luò)等
  • 輔助工具：PhotoShop編輯圖片坑夯、取色岖寞，fireworks量尺寸，AlloyDesigner對比尺寸柜蜈，以及前面的到的Chrome develop tools仗谆，
  • 翻墻工具：lantern, 壁虎漫步（已被和諧）

學(xué)習(xí)方法和學(xué)習(xí)目標(biāo)

方法：

  1. 入門階段反復(fù)閱讀經(jīng)典書籍的中文版，書籍中的每一個例子都動手實現(xiàn)并在瀏覽器中查看效果
  2. 在具備一定基礎(chǔ)之后可以上網(wǎng)搜各種教程淑履、demo隶垮，了解各種功能的實際用法和常見功能的實現(xiàn)方法
  3. 閱讀HTML，CSS秘噪，Javascript標(biāo)準(zhǔn)全面完善知識點
  4. 閱讀前端牛人的博客狸吞、文章提升對知識的理解
  5. 善用搜索引擎

目標(biāo)：

  1. 熟記前面知識點部分的重要概念，結(jié)合學(xué)習(xí)經(jīng)歷得到自己的理解
  2. 熟悉常見功能的實現(xiàn)方法，如常見CSS布局蹋偏，Tab控件等便斥。

入門之路

以下是入門階段不錯的書籍和資料

  1. HTML先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章威始。
  2. CSS先看《CSS: The Missing Manual》枢纠，然后《CSS權(quán)威指南》
  3. javascript先看《javascript高級程序設(shè)計》，然后《javascript權(quán)威指南》
  4. HTTP看HTTP權(quán)威指南
  5. 在整個學(xué)習(xí)過程中HTML CSS JavaScript會有很多地方需要互相結(jié)合黎棠，實際工作中也是這樣晋渺，一個簡單的功能模塊都需要三者結(jié)合才能實現(xiàn)。
  6. 動手是學(xué)習(xí)的重要組成部分脓斩，書籍重點講解知識點些举，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程俭厚，照著教程實現(xiàn)功能户魏。以下是一些比較好的教程網(wǎng)址
  7. 原生javascript是需要重點掌握的技能叼丑，在掌握原生javascript的基礎(chǔ)上推薦熟練掌握jQuery，在實際工作中用處很大扛门，這方面的書籍有《Learning jQuery》或者去jQuery官網(wǎng)
  8. 建一個https://github.com/賬號鸠信，保存平時學(xué)習(xí)中的各種代碼和項目。
  9. 有了一定基礎(chǔ)之后可以搭建一個個人博客论寨，記錄學(xué)習(xí)過程中遇到的問題和解決方法星立，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/這樣的網(wǎng)站注冊賬號葬凳，方便實用
  10. 經(jīng)常實用Google搜索英文資料應(yīng)該經(jīng)常找到來自http://stackoverflow.com/的高質(zhì)量答案绰垂，遇到問題可以直接在這里搜索，如果有精力火焰，注冊一個賬號為別人解答問題也能極大提高個人能力劲装。
  11. 經(jīng)典書籍熟讀之后，可以打開前面必備基礎(chǔ)技能部分的鏈接昌简。認(rèn)真讀對應(yīng)標(biāo)準(zhǔn)占业，全面掌握知識

繼續(xù)提高

有了前面的基礎(chǔ)之后，前端基本算是入門了纯赎，這時候可能每個人心中都有了一些學(xué)習(xí)方向谦疾，如果還是沒有。
可以參考前面必備技能部分提到的那兩個項目犬金，從里面選一些進(jìn)行發(fā)展學(xué)習(xí)念恍。以下是一些不錯的方面：

一些個人經(jīng)歷

LingyuCoder的學(xué)習(xí)經(jīng)歷

上面的大神都總結(jié)得差不多了词爬，我這里就胡扯一些吧

工具

  • chrome dev tools：前端開發(fā)調(diào)試?yán)魍菏龋刈⒁鈳讉€功能：
    • console（廢話）
    • elements:元素樣式調(diào)整，很常用
    • sources：代碼中添加斷點顿膨，單步調(diào)試锅锨，以及單步調(diào)試過程中查看內(nèi)存中的對象
      • watch expression：通過表達(dá)式查看當(dāng)前內(nèi)存中的值
      • call stack：查看調(diào)用棧，開啟async恋沃，可以看異步調(diào)用棧（這個非常有用必搞，尤其是ajax調(diào)試的時候）
      • scope variables：作用域鏈上的變量，非常有用
    • network：抓包查看每個請求囊咏，非常重要恕洲，前后端聯(lián)調(diào)必備
    • timeline：分析渲染、js執(zhí)行等等各個階段梅割，性能優(yōu)化利器
    • emulation：模擬移動端環(huán)境霜第，mobile頁面開發(fā)必備
    • 一些插件:
      • liveload: 修改頁面后自動刷新，不用按F5
      • dimensions：直接在頁面上測量的利器
      • livestyle：css樣式修改后自動起效果户辞，不需要刷新泌类，elements修改后也能同步到代碼中
      • image tool：測量，取色
      • UC二維碼：移動端調(diào)試掃碼必備
      • pagespeed底燎，YSlow：頁面性能分析和優(yōu)化插件
      • 馬克飛象：優(yōu)秀的在線markdown編輯器刃榨，快速寫周報，做記錄
  • sublime text3：編碼方便双仍，插件多枢希，速度快，性能好
    • emmet：提升html編碼速度必備
    • sublimelinter + 各種語言的lint和hint：代碼糾錯
    • 一些snippets：自動補全殊校，提升開發(fā)效率
  • Intellij IDEA和WebStorm：集成開發(fā)環(huán)境晴玖，集成了各種功能读存，開發(fā)比sublime要方便为流，但會比較吃性能
  • Mark Men：測量、取色让簿、標(biāo)注利器敬察，拿到視覺稿之后第一個打開的軟件
  • GFW Fucker：我用紅杏，可以的話買個虛擬服務(wù)器當(dāng)梯子
  • iHosts：非常優(yōu)秀的hosts管理軟件尔当，輕松修改hosts莲祸，開發(fā)調(diào)試必備
  • Charles：Mac 平臺最好用的抓包分析工具
  • Rythem：AlloyTeam出品的代理抓包軟件蹂安，非常輕量，安裝簡單锐帜，移動端（真機）開發(fā)調(diào)試很好用
  • Wunderlist：一個非常不錯的Todo List田盈，任務(wù)、需求多的時候管理起來很方便

技能

前端的技能其實除了JavaScript（包括NodeJS）缴阎、HTML允瞧、CSS以外，還有很多蛮拔。其實前端的技能樹很大述暂，這里只能列一些我開發(fā)中見到的說一說

語言基礎(chǔ)

JavaScript：

  • 作用域鏈、閉包建炫、運行時上下文畦韭、this
  • 原型鏈、繼承
  • NodeJS基礎(chǔ)和常用API

CSS：

  • 選擇器
  • 瀏覽器兼容性及常見的hack處理
  • CSS布局的方式和原理（盒子模型肛跌、BFC艺配、IFC等等）
  • CSS 3，如animation衍慎、gradient妒挎、等等

HTML：

  • 語義化標(biāo)簽
進(jìn)階

JavaScript:

  • 異步控制（Promise、ES6 generator西饵、Async）
  • 模塊化的開發(fā)方式（AMD酝掩、CMD、KMD等等）
  • JavaScript解釋器的一些相關(guān)知識
    • 異步IO實現(xiàn)
    • 垃圾回收
    • 事件隊列
  • 常用框架使用及其原理
    • jQuery：基于選擇器的框架眷柔，但個人認(rèn)為不能叫框架期虾，應(yīng)該算工具庫，因為不具備模塊加載機制驯嘱，其中源碼很適合閱讀鉆研
    • AngularJS/Avalon等MVVM框架：著重理解MVVM模式本身的理念和雙向綁定的實現(xiàn)镶苞，如何解耦
    • underscore：優(yōu)秀的工具庫，方便的理解常用工具代碼片段的實現(xiàn)
    • polymer/React: 組件化開發(fā)鞠评，面向未來茂蚓，理解組件化開發(fā)的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪制原理

  • DOM樹剃幌、CSSOM樹聋涨、渲染樹的構(gòu)建流程及頁面渲染的過程
  • 解析HTML、CSS负乡、JavaScript時造成的阻塞
  • HTML5相關(guān)
    • SVG及矢量圖原理
    • Canvas開發(fā)及動畫原理（幀動畫）
    • Video和Audio
  • flex box布局方式
  • icon fonts的使用

常用NodeJs的package：

  • koa
  • express
  • underscore
  • async
  • gulp
  • grunt
  • connect
  • request

一些理念：

  • 響應(yīng)式Web
  • 優(yōu)雅降級牍白、漸進(jìn)增強
  • don't make me think
  • 網(wǎng)頁可用性、可訪問性抖棘、其中的意義
  • SEO搜索引擎優(yōu)化茂腥，了解搜索引擎的原理
  • SPA的好處和問題

性能優(yōu)化：

  • 減少請求數(shù)量（sprite狸涌、combo）
  • 善用緩存（application cache、http緩存最岗、CDN帕胆、localstorage、sessionstorage般渡，備忘錄模式）
  • 減少選擇器消耗（從右到左）惶楼，減少DOM操作（DOM和JavaScript解釋器的分離）
  • CSS的回流與重繪
項目
  • 版本管理：首推Git，用過Git都不會想用SVN了
    • Git：本地版本管理的機制
    • SVN：遠(yuǎn)程中心的版本管理機制
  • 自動化構(gòu)建：主要就是less诊杆、模板歼捐、coffee等的預(yù)處理以及對代碼壓縮和合并
    • Gulp：基于流構(gòu)建，速度快晨汹、模塊質(zhì)量好
    • Grunt：獨立任務(wù)構(gòu)建豹储，速度慢，配置蛋疼淘这，靈活性高
  • 預(yù)處理和模板引擎
    • less：語法簡單剥扣，但功能有限
    • jade、ejs铝穷、velocity等模板引擎钠怯，各有各的長處
    • coffee：python工程師最愛，我沒用過
  • 環(huán)境搭建：主要是將線上代碼映射到本地曙聂，并在本地啟動一個demo服務(wù)器晦炊，至于模擬數(shù)據(jù)的mock，見仁見智了
    • 本地代理：ihosts
  • 自動化測試：在業(yè)務(wù)較為穩(wěn)定的情況下宁脊，可以通過自動化測試來減少測試的事件断国，但需求較多的時候，維護(hù)測試用例的成本會很高榆苞，可能用自動化測試會起到反效果
    • jasmine
    • mocha
  • 生態(tài)系統(tǒng)
    • npm
    • bower
    • spm
  • 搭建一個屬于自己的博客
    • git pages
    • hexo
    • jekyll
未來
  • Web Componets：面向未來的組件化開發(fā)方式
    • HTML模板
    • Shadow DOM
    • Custom Elements
    • HTML Import
  • 移動端Native開發(fā)：這也是需要了解的稳衬，以后前端工程師會經(jīng)常地和webview打交道，也要了解native開發(fā)
其他

有些東西不是考敲碼就能弄好的坐漏，我參與實習(xí)的時候感受到了很多薄疚，這些是我遇到的也是我感覺自己做的不好的地方

  • 對于業(yè)務(wù)的思考：我個人這方面非常欠缺，所以放在最前面赊琳，在敲碼前要多思考業(yè)務(wù)
  • 交流和溝通能力：這個非常重要街夭，前端同時需要與項目經(jīng)理、產(chǎn)品慨畸、交互莱坎、后臺打交道，溝通不善會導(dǎo)致很多無用功寸士，延緩項目
  • 知識管理檐什、時間管理：input和output的平衡，output是最好的input弱卡。如何做好分享乃正，參與社區(qū)，做好交流婶博，作好記錄
  • 對新技術(shù)的渴望瓮具，以及敢于嘗試

入門書

入門可以通過啃書，但書本上的東西很多都已經(jīng)過時了凡人，在啃書的同時名党，也要持續(xù)關(guān)注技術(shù)的新動態(tài)。這里推幾本我覺著不錯的書：

  • 《JavaScript高級編程》：可以作為入門書籍挠轴，但同時也是高級書籍传睹，可以快速吸收基礎(chǔ)，等到提升再回來重新看
  • 《JavaScript權(quán)威指南》：不太適合入門岸晦，但是必備欧啤，不理解的地方就去查閱一下，很有幫助
  • 《編寫可維護(hù)的JavaScript》
  • 《JavaScript DOM編程藝術(shù)》學(xué)習(xí)JavaScript和DOM開發(fā)的必讀之作启上。
  • 《Node.js開發(fā)指南》：不錯的Nodejs入門書籍
  • 《深入淺出Node.js》：Nodejs進(jìn)階書籍邢隧，必備
  • 《JavaScript異步編程》：理解JS異步的編程理念
  • 《JavaScript模式》和《JavaScript設(shè)計模式》：JavaScript的代碼模式和設(shè)計模式，將開發(fā)思維轉(zhuǎn)變到JavaScript冈在，非常好的書
  • 《JavaScript框架設(shè)計》：在用輪子同時倒慧，應(yīng)當(dāng)知道輪子是怎么轉(zhuǎn)起來的，講解很詳細(xì)包券，從源碼級別講解框架的各個部分的實現(xiàn)迫靖，配合一個現(xiàn)有框架閱讀，可以學(xué)到很多東西
  • 《Don`t make me think》：網(wǎng)頁設(shè)計的理念兴使，了解用戶行為系宜，非常不錯
  • 《CSS禪意花園》：經(jīng)久不衰的一部著作，同樣傳遞了網(wǎng)頁設(shè)計中的理念以及設(shè)計中需要注意的問題
  • 《高性能JavaScript》和《高性能HTML5》：強調(diào)性能的書发魄，其中不只是性能優(yōu)化盹牧，還有很多原理層面的東西值得學(xué)習(xí)
  • 《HTML5 Canvas核心技術(shù)》：我正在讀的一本書，對于canvas的使用励幼，動畫的實現(xiàn)汰寓，以及動畫框架的開發(fā)都非常有幫助
  • 《HTTP權(quán)威指南》：HTTP協(xié)議相關(guān)必備，前端開發(fā)調(diào)試的時候也會經(jīng)常涉及到其中的知識
  • 《響應(yīng)式Web設(shè)計》：技術(shù)本身不難苹粟，重要的是響應(yīng)式網(wǎng)頁的設(shè)計理念有滑，以及移動先行的思想
  • 《JavaScript語言精粹》：老道的書，也是普及JavaScript的開發(fā)思維的一本好書嵌削，非常適合入門

一些不錯的網(wǎng)站

  • github：沒啥好說的毛好，多閱讀別人的源碼望艺，多上傳自己的源碼，向世界各地的大牛學(xué)習(xí)
  • codepen：感受前端之美的必選之地肌访，里面有很多酷炫的效果和優(yōu)秀的插件
  • echojs：快速了解js新資訊的網(wǎng)站
  • stackoverflow和segmentfault：基本上各種問題都能在上面獲得解答
  • google web fundamentals：每篇文章都適合仔細(xì)閱讀
  • static files：開放的CDN找默，很好用
  • iconfont：阿里的矢量圖標(biāo)庫，非常不錯吼驶，支持CDN而且支持項目
  • html5 rocks: 一個不錯的網(wǎng)站惩激，很多瀏覽器的新特性以及前沿的技術(shù)，都能在這上面找到文章
  • css tricks：如何活用CSS蟹演，以及了解CSS新特性风钻，這里可以滿足你
  • JavaScript 秘密花園 JavaScript初學(xué)必看，非常不錯
  • w3cplus：一個前端學(xué)習(xí)的網(wǎng)站酒请，里面的文章質(zhì)量都挺不錯的
  • node school：一個不錯的node學(xué)習(xí)網(wǎng)站
  • learn git branch：一個git學(xué)習(xí)網(wǎng)站骡技，交互很棒
  • 前端亂燉：一個前端文章分享的社區(qū)，有很多優(yōu)秀文章
  • 正則表達(dá)式：一個正則表達(dá)式入門教程蚌父，非常值得一看
  • 阮一峰的博客和張鑫旭的博客：快速了解某些知識的捷徑哮兰，但是如果需要深挖，還需要其他的資源
  • 各路大牛的博客：這個太多了苟弛，就不貼了喝滞，知乎上有很全的
  • 各種規(guī)范的官方網(wǎng)站，不懂得時候讀規(guī)范

歷程

以前是做Java SSH的膏秫，半路出家做的前端硝桩，所以水平比較弱涎劈，遇到問題也比較多匣缘〕纬桑基本上入門靠看書和W3C School上的教程，以及一些前端博客亭敢，如湯姆大叔的博客滚婉。以前也只是使用jQuery，原生js也沒有太多的鉆研帅刀，后來逐漸看了很多本動物書让腹，比如老道的語言精粹等等。從這些書中學(xué)到了很多語言層面的知識扣溺。但這顯然是不夠的骇窍，所以我經(jīng)常會去社區(qū)上看看大家在談?wù)撌裁矗缓笕タ纯聪嚓P(guān)的資料锥余，感興趣就會多找些資料看看腹纳，或者寫一寫demo。學(xué)CSS主要就是通過這種方式。后來開始更多的關(guān)注各路大牛的博客和一些比較深的書籍嘲恍，以及關(guān)注一些新的知識和框架足画，并且不斷地練手提交代碼到github，這樣也學(xué)到了很多知識蛔钙。在實習(xí)的過程中锌云，切身參與到實際項目開發(fā)之中荠医，能學(xué)到很多在學(xué)校學(xué)不到的理念和思維吁脱，這點也有很大的幫助。不說了彬向，我要去搬磚求offer了...

MrRaindrop的學(xué)習(xí)經(jīng)歷

應(yīng)qiu神的邀請分享一下前端學(xué)習(xí)經(jīng)驗兼贡，這里對前端知識體系架構(gòu)就不做總結(jié)了，各位大神們的總結(jié)已經(jīng)相當(dāng)?shù)轿涣送薜ǎ揖拓暙I(xiàn)幾個個人認(rèn)為還比較有用的鏈接大家研究研究就好遍希，然后主要分享一下我在前端學(xué)習(xí)過程中遇到的問題和總結(jié)的經(jīng)驗教訓(xùn)吧，如果能幫到想要入門的FE初學(xué)者（我就姑且假定為本文的讀者受眾類型了）里烦，讓他們少走點彎路凿蒜，每走一步都知道自己下一步的方向，這是最好了胁黑。各位大神的總結(jié)和分享詳見qiu神整理的FE-learning废封。

先說下，前端這個東西每個人都可以有適合自己的學(xué)習(xí)方法丧蘸，這篇僅作參考漂洋，寫的有點亂，各位湊合看力喷。

緣起

我是屬于誤打誤撞進(jìn)了前端刽漂，之前一直往做游戲的方向去來著，搞過游戲網(wǎng)站弟孟，玩過游戲引擎贝咙，比如unity，unreal這種商業(yè)引擎拂募，搗鼓了幾個游戲原型庭猩，不過自打研一進(jìn)了實驗室，直接就被導(dǎo)師派去寫了js没讲，導(dǎo)師給了我半個月時間讓我寫個基于百度地圖api的數(shù)據(jù)展示頁面眯娱，雖然這個時間還是相當(dāng)寬裕的，不過之前沒怎么寫過js爬凑，也不會用地圖api徙缴，于是我就一邊啃著《Javascript權(quán)威指南》（犀牛書）一邊參考實驗室前人留下的“代碼”，總算是把功能都寫出來了。那個頁面算我的js入門作了于样，也是我前端學(xué)習(xí)路線的開始疏叨。

現(xiàn)在想來，雖然指派了去做前端穿剖，但是一直做下去并做好還是得靠興趣維持蚤蔓，當(dāng)然前端是一個趣味性十足的技術(shù)領(lǐng)域，而且社區(qū)每天都很“熱鬧”糊余。

項目秀又，下一個項目

我個人認(rèn)為前端的學(xué)習(xí)，初學(xué)階段你可以完全脫離開書本贬芥，以項目驅(qū)動吐辙。雖然我個人是從犀牛書開始啃的，不過如果你沒有充足的時間蘸劈，或者覺得啃大部頭乏而無味的話昏苏，還是別像我這樣。當(dāng)然了如果決定啃書最好是把書里的例子都跟著敲一遍的威沫。我上研之前沒接觸過js贤惯，4月份還沒開學(xué)呢就被直接被導(dǎo)師甩了個百度地圖api的項目到臉上，接著就是各種ERP棒掠，地圖數(shù)據(jù)展示孵构，雖然換著花樣來一點不重樣，不過基本上都是前端的活句柠，SSH和android開發(fā)也打過醬油浦译，整個實驗室就我一個人寫前端敢信？富客戶端SPA時代的后端就是一個restful接口溯职，代碼量基本都在前端啊精盅，寫的我一個人怎一個爽字了得...期間跟著導(dǎo)師感受了一把創(chuàng)業(yè)，每天從7點搞到晚上10點谜酒，也算是經(jīng)歷了一段快速成長期叹俏。

掌握一門技術(shù)先掌握它的大體框架，想一個能實現(xiàn)的點子僻族，做一個能跑就行的demo粘驰，再去完善它的細(xì)節(jié)，等到demo完成了述么，對這門技術(shù)有了一個感性的認(rèn)識蝌数，再去啃書，收獲會大很多度秘。我從開始原生js寫到j(luò)query顶伞，再到extjs，再到angularjs，從導(dǎo)師指定技術(shù)唆貌，到自己做技術(shù)選型滑潘，一個項目接著一個項目的練，就跟打怪升級似的锨咙。當(dāng)然沒有項目就去自己創(chuàng)造項目语卤，動手實現(xiàn)自己的想法是件有樂趣和成就感的事。

收集癖和知識管理

前端學(xué)習(xí)有個特點酪刀，很多東西都很零碎粹舵，分散，需要你自己去整理蓖宦、歸納和總結(jié)齐婴。在微博油猫、知乎上follow了眾多的大神稠茂，你不僅僅是為了聽八卦，大神們的只言片語有時候留下的是無盡的余味情妖，很有可能一個不經(jīng)意提到的一個詞就成為你下一個學(xué)習(xí)的目標(biāo)睬关。收集這些信息，善用google毡证，提問电爹，思考。就像游戲里的收集要素料睛，前端學(xué)習(xí)也是充滿搜集要素的一個“游戲”丐箩，只不過你需要一個知識管理工具來充當(dāng)物品欄和倉庫，我所知道的大牛們無一不是知識管理工具的重度使用者恤煞。以前用的oneNote屎勘，那時候還沒綁定到云存儲，現(xiàn)在基本上用evernote居扒，筆記已經(jīng)累計到1200+篇概漱。書簽一直打算用delicious，因為它是基于tag管理的喜喂，但一直沒用起來瓤摧。當(dāng)然重點不在于這些工具，但是趁手的工具可以提高你的學(xué)習(xí)效率玉吁。最關(guān)鍵當(dāng)然是隨時保持旺盛的學(xué)習(xí)欲望照弥，你的目標(biāo)是了解有關(guān)前端的一切（當(dāng)然不是所有都要掌握，因為畢竟你的精力有限进副，而且現(xiàn)實的說這也不太可能）这揣。

跟對神

這個可控性貌似不大...跟對老大這個就不多說了，一定程度要看造化。不過話說回來曾沈，多跟身邊的高手交流是王道这嚣，這個高手不一定要多高，但是一定要對技術(shù)有熱情塞俱。研一的時候熱情高漲姐帚，每天7點進(jìn)實驗室門，然后發(fā)現(xiàn)有個家伙居然比我還早到障涯。后來發(fā)現(xiàn)這家伙上午就走了罐旗，下午又來了，而且導(dǎo)師對此習(xí)以為常唯蝶，原來這家伙晚上不睡覺通宵寫代碼九秀，上午才跑回去睡。后來經(jīng)常和這位神討論問題粘我，每次感覺經(jīng)驗值蹭蹭蹭的往上漲鼓蜒。然后實驗室還有一位神，被前面這位通宵神形容為“只能望其項背征字，一直在追趕都弹，從來沒趕上”，兩位神的特點都是什么都了解一點匙姜，所以什么都能跟你討論得起來畅厢，我有段時間做了個讀書計劃，從c/c++到vc/mfc再到unix網(wǎng)絡(luò)編程氮昧，最后一路看到j(luò)ava核心技術(shù)和MSDN上的C#編程指南框杜，和神們也能扯得很high了。

總之就是這兩位神把我拉進(jìn)了坑袖肥，或者說從一個坑跳進(jìn)另一坑咪辱，雖然兩位神都不是搞前端的，不過技術(shù)之間總有相通之處昭伸。

讀書

讀書梧乘，多讀書，讀好書庐杨。在劉未鵬的博客里看到過一個公式选调，你第一個月的工資等于之前買過（讀過）的技術(shù)書價格總和（這里說的技術(shù)書指那些經(jīng)典的公認(rèn)的好書）。討論這個公式的正確性似乎沒什么意義灵份，然而它的合理性是毋庸置疑的仁堪，那就是多讀經(jīng)典技術(shù)書。最極端的一個例子填渠，google的徐宥在我的大學(xué)里面說他掃蕩了圖書館的整個TP312書架...對于前端的經(jīng)典書籍弦聂，后面列了一個我收集的前端書列（如果有遺漏的前端經(jīng)典好書鸟辅，還請留言告訴我），有條件可以嘗試刷一遍這些書莺葫，我也是在找完整的時間去啃完它們匪凉。之前說的，前端知識點松散捺檬，收集零散的知識點再层，從博客里快速學(xué)習(xí)等，這些只是前端學(xué)習(xí)的一個方面堡纬，如果你要想深入理解一個知識體系聂受，了解它的來龍去脈，對它建立系統(tǒng)認(rèn)識烤镐，讀經(jīng)典書還是必不可少的蛋济。

我從最開始啃完犀牛書，然后接著去看了其他一些和前端干系不大的經(jīng)典技術(shù)書炮叶，再后來通過實驗室的項目和自己弄的一些小項目逐漸對前端領(lǐng)域比較上路以后碗旅，又看了《Javascript模式》、《Javascript設(shè)計模式》悴灵、《編寫可維護(hù)的Javascript》扛芽，后來了解到node并開始用node搞點小玩意兒，又看了本《NodeJS up and run》和《Mongodb權(quán)威指南》积瞒，不過感覺前者略坑登下。那會兒樸靈那本深入淺出（曬書么么噠）還沒出，后來出了就去圖書館借來看完缰贝，這么看下來感覺還不錯，不過感覺看的還是偏少了剩晴，還需要繼續(xù)刷（參照上面的書列）侵状。

前端的定位

前端的定位關(guān)乎到你需要吸收什么樣的知識和技能赞弥，決定在技術(shù)世界里你對什么需要格外敏感趣兄。如果你認(rèn)為前端僅僅停留在切頁面艇潭，實現(xiàn)交互和視覺的要求，那你對前端的認(rèn)識還停留在初級階段鲁纠。阿里終面的時候我問了考官這么個問題：前端技術(shù)日新月異改含，范圍越擴越寬候味，標(biāo)準(zhǔn)越來越豐富白群，似乎任何一個觸角都能伸出很遠(yuǎn)帜慢。怎么給前端一個合適的定位粱玲？考官給我分析了半天抽减，然后總結(jié)成一句話卵沉，就是用戶和網(wǎng)站的聯(lián)結(jié)者，用戶體驗的創(chuàng)造者（原話不是這樣史汗，但大體是這個意思）瓷蛙。也就是說前端的終極目標(biāo)其實就是創(chuàng)造用戶體驗艰猬，提升用戶體驗姥宝，以用戶體驗為中心腊满。不管你是從交互設(shè)計上下手碳蛋，還是從性能優(yōu)化出發(fā)肃弟，或者改進(jìn)工作流提升工作流效率笤受，最終都是為了創(chuàng)造和提升用戶體驗箩兽，最終都要體現(xiàn)到用戶體驗這一點上來汗贫。我認(rèn)為這個總結(jié)非常有道理（當(dāng)然“用戶體驗”這個詞太寬泛了部蛇，并且不僅僅是前端工程師的范疇涯鲁，比如開發(fā)后臺的時候?qū)σ粋€數(shù)據(jù)處理過程進(jìn)行優(yōu)化撮竿，提升了整體性能，這也是對用戶體驗的一個提升）许师。

現(xiàn)在的前端工程師做到一定階段不可避免會接觸到很多比切頁面微渠、實現(xiàn)視覺要求逞盆、實現(xiàn)交互等更深入的問題云芦，比如前端自動化桌肴、圖像編程坠七、性能優(yōu)化等等彪置，再往后推一點就是PHP/JSP/ASP/nodeJs拳魁，過去后端模板一般屬于后端的范疇的猛，現(xiàn)在隨著前端架構(gòu)的演進(jìn)卦尊，可能會讓你去寫后端模板的代碼，需要用到后端語言（PHP/Java/C#等）躏哩，這就是所謂大前端（然而這與前端的定位并不是相背離的扫尺，大前端處理的依然是與用戶接觸的部分正驻，仍然是對用戶體驗的優(yōu)化）∩丝浚可能最常見或者被談?wù)撟疃嗟木褪莕ode宴合，其實這幾種技術(shù)選型都可以形纺，bat三家據(jù)說百度用PHP比較多逐样，阿里用node比較多挪捕。

玉伯在他的博客里提過所謂全端是橫向的级零，全棧是縱向的奏纪。全端即所有的終端說白了都是前端，因為都關(guān)乎到用戶體驗发绢，直接和用戶接觸边酒。適應(yīng)多終端的開發(fā)墩朦，要求你在web前端的基礎(chǔ)上，可能還要去擴展android開發(fā)和ios開發(fā)的知識，好在由于hybrid開發(fā)方式的流行恩伺，對使用native語言開發(fā)的技能會要求的不那么深入凰荚。

全棧可以說是最適合初創(chuàng)公司的一種發(fā)展類型便瑟，廣義上認(rèn)為是從前端干到后端到涂，從開發(fā)干到運維，這種就不說了屿讽，一般人應(yīng)該不會想要去往這個方向發(fā)展伐谈，想要成為這種意義上的full-stack dev的，可能用不著來看我這篇文章了非春；而狹義上的全棧特指使用js語言從前端寫到架設(shè)在nodeJs上的后端，前后端統(tǒng)一語言储耐，統(tǒng)一編程模型什湘，甚至公用同一套代碼。更多了解全棧開發(fā)可以看看玉伯這篇說說全棧工程師哟旗。

以上是我對前端以及衍生出來的技術(shù)路線的一些淺薄理解闸餐，學(xué)習(xí)一個領(lǐng)域掌握它的整體上的走向和趨勢還是挺重要的近上。另外如果想要對前端學(xué)習(xí)方向壹无、職業(yè)成長路徑有一個整體的認(rèn)識，推薦看看拔赤總結(jié)的這篇前端開發(fā)十日談拒迅。

最后

貢獻(xiàn)幾個對前端學(xué)習(xí)、面試有幫助的鏈接：

byr論壇yiyizym的建議

與grunt相比前硫，學(xué)習(xí)gulp會比較簡單

做SPA的話，推薦backbone.js和 backbone.marionette.js

翻墻不用折騰危号，花十塊錢買一個月的 紅杏外莲。

把基礎(chǔ)打扎實了再學(xué)這些都沒問題。

html 沒什么好說的声邦，有空學(xué)學(xué)html5英融。

css 盡量看文檔 ，因為很多中文資料都各執(zhí)一辭，看多了反而會糊涂龙巨。

有個網(wǎng)站可以查找html/css標(biāo)簽、屬性在各個瀏覽器中的支持情況秸弛，挺好用的。

javascript 就看 javascript高級程序設(shè)計 绞铃。不過這么厚的書看過就會忘。對javascript核心概念的講解：對象/原型鏈/ 構(gòu)造函數(shù)/執(zhí)行上下文/作用域鏈/閉包/this菲盾，這里有篇不錯的文章。

有閑情可以看看 ecmascript 6疗我。阮一峰的網(wǎng)站有入門資料。

jquery 有很多 API,這個網(wǎng)站可以方便查到麦牺。有時間弄清楚jquery deferred 的用法格侯。

多給 sublimetext 裝插件甸饱，比如說檢查代碼錯誤的，新建目錄文件的驼壶，整理代碼的。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市股冗，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖集峦，帶你破解...
    沈念sama閱讀 216,470評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡备恤，警方通過查閱死者的電腦和手機喉镰，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來汇歹，“玉大人产弹，你說我怎么就攤上這事胶果。” “怎么了蕊连？”我有些...
    開封第一講書人閱讀 162,577評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵烘豌，是天一觀的道長廊佩。 經(jīng)常有香客問我靡挥，道長簸淀，這世上最難降的妖魔是什么租幕？ 我笑而不...
    開封第一講書人閱讀 58,176評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮拧簸，結(jié)果婚禮上劲绪，老公的妹妹穿的比我還像新娘。我一直安慰自己盆赤，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,189評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布牺六。 她就那樣靜靜地躺著颤枪，像睡著了一般。 火紅的嫁衣襯著肌膚如雪淑际。 梳的紋絲不亂的頭發(fā)上畏纲，一...
    開封第一講書人閱讀 51,155評論 1贊 299
  • 城市分裂傳說
    那天，我揣著相機與錄音春缕，去河邊找鬼盗胀。 笑死，一個胖子當(dāng)著我的面吹牛锄贼，可吹牛的內(nèi)容都是我干的票灰。 我是一名探鬼主播，決...
    沈念sama閱讀 40,041評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼咱娶，長吁一口氣：“原來是場噩夢啊……” “哼米间！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起膘侮，我...
    開封第一講書人閱讀 38,903評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤屈糊，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后琼了，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逻锐，經(jīng)...
    沈念sama閱讀 45,319評論 1贊 310
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年雕薪，在試婚紗的時候發(fā)現(xiàn)自己被綠了昧诱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,703評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡所袁，死狀恐怖盏档，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情燥爷，我是刑警寧澤蜈亩，帶...
    沈念sama閱讀 35,417評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布懦窘，位于F島的核電站，受9級特大地震影響稚配，放射性物質(zhì)發(fā)生泄漏畅涂。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一道川、第九天 我趴在偏房一處隱蔽的房頂上張望午衰。 院中可真熱鬧，春花似錦冒萄、人聲如沸臊岸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0贊 22
  • 一樁弒父案尊流，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽扇单。三九已至，卻和暖如春奠旺，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背施流。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工响疚， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人瞪醋。 一個月前我還...
    沈念sama閱讀 47,711評論 2贊 368
  • 代替公主和親
    正文 我出身青樓忿晕，卻偏偏與公主長得像，于是被迫代替她去往敵國和親银受。 傳聞我的和親對象是個殘疾皇子践盼，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2贊 353

推薦閱讀更多精彩內(nèi)容