者 | 六小登登

責(zé)編 | 屠敏

從 2013 年專科畢業(yè)開始，一路跌跌撞撞走了很多彎路，做過餐廳服務(wù)員，進過工廠干過流水線，做過客服，干過電話銷售可以說經(jīng)歷相當(dāng)?shù)摹柏S富”。

最后的機緣巧合下，走上了前端開發(fā)之路，作為一個非計算機專業(yè)且低學(xué)歷的人來說，自學(xué)編程其實不是件容易的事情，不過慶幸的是自己堅持下來了。

目前工作還算不錯，收入在目前所在的城市不算高，不算低，生活也還過得去，繼續(xù)加油努力，也希望自己在今后更上一層。

從 2016 年下半年開始，我真正接觸前端，到現(xiàn)在 2 年多的時間。開始之初，我沒有任何的語言基礎(chǔ)，完全從零的小白開始，就連「對象」我都弄不明白，更別說那些高深莫測的什么封裝、繼承、多態(tài)等。

當(dāng)時自己也不知從何入手，怎么辦呢？于是每當(dāng)自己遇到困難時，就厚著臉皮去請教前輩大牛，然后就是去查閱資料，很多時候自己也很覺得不好意思，現(xiàn)在才發(fā)現(xiàn)人很多時候都恥于相別人請教，怕自己丟面子。

但作為一個過來人，我要告訴你請教前輩大牛真的很重要，可以讓你少走很多的彎路，不要怕丟人，沒面子，面子值幾個錢？學(xué)到真本事才最重要。沒有技能才叫真的沒有面子。當(dāng)然了我們在請教別人時，一定要掌握「度」，不要打擾到了別人的工作。

我現(xiàn)在非常感謝前輩們的賜教，也感謝那些在網(wǎng)上寫博客、文章分享的大牛們，給了我們這些自學(xué)的小白很多的資料，經(jīng)驗，心得。從中受益很多。

向優(yōu)秀的前輩們學(xué)習(xí)，我開始寫博客，希望也能幫到和我一樣，學(xué)渣、從零開始、喜歡技術(shù)的一群志同道合的人。

我深知自己的技術(shù)并不高，還處在繼續(xù)學(xué)習(xí)的路上，離大牛還差的很遠(yuǎn)，我本身也非常敬畏技術(shù)，也知道自己的渺小，只希望這篇文章的「學(xué)習(xí)之路」對于那些「從零開始」學(xué)習(xí)前端的同學(xué)有一些指引作用，不像自己一開始那樣的那么盲目，哪怕對你有一點點的幫助，就足夠了。

說了這么多，下面我們直接進入正題，都是我平時學(xué)習(xí)和收集的一些資料希望能夠幫到你。

前言

1. 首先我得告訴你，自學(xué)是件很苦的事情，學(xué)習(xí)本身就是件反人性的過程，更何況在一個從零開始的全新領(lǐng)域獨自奮斗，這里不是要打擊你，而是要你認(rèn)真想好，結(jié)合自身的環(huán)境、條件。不然半途而廢浪費的不僅是時間，還有精力、金錢。
2. 如果你已經(jīng)想好決定去做，那就不要猶豫，堅持下去你就可以成功，像我這樣的學(xué)渣都可以，你沒有什么不可以的，一定要相信自己。
3. 興趣是最好的老師，很多人對這句話非常反感，被生活所迫，談興趣不可笑嗎？其實不是，問問自己對技術(shù)有沒有興趣，做自己喜歡和感興趣的事情才能夠走的更遠(yuǎn)和更久，很多人不理解這一點，總有一天你會明白的，我當(dāng)時轉(zhuǎn)前端的時候也是因為自己挺喜歡，而且最接近用戶，都是所見所得的東西很好玩，另外一方面也覺得工資也挺高，所以自己打心里覺得做前端挺好。
4. 做好持續(xù)學(xué)習(xí)，時刻保持學(xué)習(xí)的心態(tài)，說實話現(xiàn)在社會，科技的發(fā)展非常之快，技術(shù)的更新更是如此，如果你覺得學(xué)習(xí)一門技術(shù)就可以吃到老，我勸你還是打住，可能考個公務(wù)員更適合你（不要杠精，我并不是說公務(wù)員不要學(xué)習(xí)，自己體會就好）。
5. 永遠(yuǎn)不要覺得遲，只要行動然后堅持下去，你就干掉了 80% 的人，自學(xué)的人很多，但是堅持下來的沒有幾個。就像郭德綱說過，不是我的相聲說的多好而是我活了下來。著名營銷人員「小馬宋」畢業(yè)時燒了很多年的鍋爐，但是自己對廣告營銷感興趣，所以離職從零開始，現(xiàn)在已經(jīng)是很有名的營銷大師。
6. 與其把時間花在學(xué)與不學(xué)的糾結(jié)上，不如把這個時間放在行動上，如果發(fā)現(xiàn)自己不合適也堅持不下去，那就換個賽道，專注的去做一件事情，會提高你的成功概率。

工具篇

工欲善其事，必先利其器，所以在開始之前選擇一個合適好用的編輯器是很重要的，工具不再多，在于好用就行，除了編輯器，我們也要掌握其他的一些工具，才能夠讓我們在學(xué)習(xí)的道路上更加的順暢。

1. WebStorm

不必多說，前端最強大的編輯器，特別是那無敵的智能提示，但是它的缺點在于如果項目多于大時，出現(xiàn)的卡頓讓很多人苦惱。

• WebStorm 官網(wǎng)下載地址：https://www.jetbrains.com/webstorm/。
• WebStorm 有哪些過人之處？（https://www.zhihu.com/question/20936155）
• 激活 WebStorm2018（https://blog.csdn.net/qq_32135281/article/details/82696280）

2. Visual Studio Code

微軟開源免費產(chǎn)品，受到非常多技術(shù)人員的喜愛，基本上成為前端開發(fā)者的必備編輯器，強大的插件擴展，可以靈活的打造自己喜歡的風(fēng)格。給你們送上常用插件列表拿走不謝。

• Visual Studio Code 官網(wǎng)下載地址：https://code.visualstudio.com/。
• VSCode 拓展推薦：https://github.com/varHarrie/varharrie.github.io/issues/10
• 使用頂級 VSCode 擴展來加快開發(fā) JavaScript：https://www.html.cn/archives/9507
• vscode 插件推薦：https://segmentfault.com/a/1190000006697219

3. atom

也是一款免費開源的編輯器，受到很多人的喜愛，但是我本人用的較少，所以插件方面就不推薦了，大家可以按照自己的愛好去尋找。

4. 科學(xué)上網(wǎng)

每個程序員都應(yīng)該具備的工具和能力，否則很多事情都無法辦到，至于怎么做，你可以自己查閱資料，這里不就不在多說了。而且下面推薦的很多資源都是需要科學(xué)上網(wǎng)之后才能訪問，所以一定要學(xué)會。

5. Google

在使用「Google」之前必須學(xué)會科學(xué)上網(wǎng)，不然無法訪問，學(xué)會使用搜索可以幫助我們解決很多問題，一個人的知識是有限的，掌握了搜索的技巧才能以不變應(yīng)萬變，很多時候百度出來的東西重復(fù)性很大，最重要的是垃圾信息很多，在百度找不到的答案，在這里很容易找到，Google 是我的必備搜索。

6. Github

全球最大的「同性」開源交流社區(qū)，沒有賬號的趕緊注冊，在這有很多優(yōu)秀的資源項目，各種大神。觀摩優(yōu)秀代碼是我們學(xué)習(xí)的很好路徑。另外在開發(fā)過程中，很多時候任務(wù)重、時間緊，應(yīng)該避免重復(fù)造輪子，這里能夠找到你需要的工具或代碼。

7. Stack Overflow

國外著名的技術(shù)問答交流社區(qū)，開發(fā)時碰到的很多問題在這里都能找到答案。

8. SegmentFault

對應(yīng)的國內(nèi)版的技術(shù)問答交流社區(qū)，如果你英文不好，也可以在這里找找答案。

9. Markdown

Markdown 輕量級標(biāo)記語言，簡潔的語法，讓作者專注內(nèi)容而非復(fù)雜的格式要求，我認(rèn)為人人都應(yīng)該掌握，特別是經(jīng)常寫博客的人。想想你在用 world 時的場景，每次寫完文章之后，不得不話費很多時間進行格式的排版，使用它你就可以避免這些煩惱。

• Markdown 中文文檔：https://markdown-zh.readthedocs.io/en/latest/

HTML 篇

一些準(zhǔn)備就緒之后，開始我們的學(xué)習(xí)之旅，首先我們先從 HTML 開始。

HTML名為「超文本標(biāo)記語言」，是整個頁面的結(jié)構(gòu)基礎(chǔ)，它承載了我們的頁面內(nèi)容。

1. 基礎(chǔ)

• w3school 在線教程（http://www.w3school.com.cn/h.asp）：內(nèi)容非常的基礎(chǔ)，適合小白學(xué)習(xí)，對 HTML 有一個入門了解。
• freeCodeCamp（https://www.freecodecamp.cn/）：一個非常好的入門學(xué)習(xí)網(wǎng)站，采用闖關(guān)的模式，就像游戲打怪升級一樣，非常的有樂趣，準(zhǔn)備自學(xué)的小伙伴不妨試試。

2. 進階

• MDN HTML（https://developer.mozilla.org/zh-CN/docs/Web/HTML）：這里的內(nèi)容質(zhì)量更好，錯誤更少，內(nèi)容也更加的全面。
• HTML 和 CSS 編碼規(guī)范（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質(zhì)量的代碼。

CSS 篇

HTML 承載了頁面的內(nèi)容，但是有時候會略顯單調(diào)與「丑陋」，CSS 的作用就是為這些內(nèi)容加上樣式，就像一個美女也要有漂亮的外衣去修飾才會更加漂亮，「人靠衣裝馬靠鞍」，網(wǎng)頁的內(nèi)容也是需要穿上一件漂亮的外衣去吸引用戶。而 CSS 則完成了這個裝飾。

1. 基礎(chǔ)

• 學(xué)習(xí) CSS 布局（http://zh.learnlayout.com/）：帶你一步一步的完成 CSS 的學(xué)習(xí)。
• CSS 參考手冊（https://css.doyoe.com/）：對CSS可以有一個全面入門的學(xué)習(xí)。
• w3school CSS 參考手冊（http://www.w3school.com.cn/cssref/index.asp）：同上也是非常基礎(chǔ)的知識，適合入門。

2. 進階

書籍：

《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推薦的一本 CSS 書籍，可以學(xué)到很多鮮為人知的技巧。

在線系列：

• MDN CSS（https://developer.mozilla.org/zh-CN/docs/Web/CSS）：和 HTML 都是 MDN 社區(qū)文檔，質(zhì)量保障。
• HTML和CSS編碼規(guī)范（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質(zhì)量的代碼。
• 大漠老師的CSS系列（https://www.w3cplus.com/CSS3）：大漠老師對CSS有非常深入的認(rèn)識和豐富的實踐經(jīng)驗，《圖解CSS3：核心技術(shù)與案例實戰(zhàn)》的作者。
• 大漠老師的SASS系列（https://www.w3cplus.com/blog/tags/302.html）：大漠老師的 sass 文章系列。
• SASS中文網(wǎng)（https://www.sasscss.com/）：成熟、穩(wěn)定、強大的 CSS 擴展語言解析器，它可以讓你使用變量，條件語句等書寫 CSS。
• Stylus官網(wǎng)（https://stylus.bootcss.com/）：同樣是 CSS 預(yù)編譯器，但它省去了一些符號，讓 CSS 寫起來更加的簡潔，清爽。
• HTML5和CSS3（https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3）：詳解HTML5 和 CSS3。

知識點：

• 別說你懂CSS相對單位（http://wuyuying.com/blog/archives/css-in-depth-relative-units/）：深入了解 CSS 的相對單位rem，em區(qū)別。
• CSS 進階內(nèi)容（https://github.com/coconilu/Blog/issues/29）：常見知識點的深入了解。
• Flex 布局教程：語法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：阮一峰老師的flex講解。
• Flex 布局教程：實例篇（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）：阮一峰老師的flex講解。
• “CSS相關(guān)”目錄存檔（https://www.zhangxinxu.com/wordpress/category/css/）：張鑫旭大佬的CSS系列文章，深入淺出，《CSS世界》作者。
• CSS繪制的40種形狀和圖形（http://www.open-open.com/lib/view/open1476240478941.html）：利用CSS繪制出的40各種圖形形狀。
• CSS-大前端（http://www.daqianduan.com/tag/css）：一些 CSS 的知識點。

JavaScript 篇

有了 HTML 與 CSS，網(wǎng)頁也就有了內(nèi)容和樣式，但是會缺少與用戶的互動，所有的內(nèi)容都靜靜的躺在那里死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什么吸引力，但如果又唱歌，又跳舞，還向你拋媚眼，那可真就把持不住了。JavaScript 就是給網(wǎng)頁添加這樣的「行為」。

Javascript 簡史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以簡單了解下，JavaScript 發(fā)展由來。

1. 基礎(chǔ)

書籍

• 《JavaScript權(quán)威指南 （第6版）》（https://book.douban.com/subject/10549733/）：俗稱「犀牛書」，JS 的經(jīng)典之作，提升JS技能的必備書籍，我的JS基礎(chǔ)知識全都是啃這本書啃下來的，剛開始讀時可能有會有些吃力，但是只要堅持下來收獲滿滿。
• 《JavaScript高級程序設(shè)計（第3版）》（https://book.douban.com/subject/10546125/）：俗稱「紅寶書」，JavaScript 超級暢銷書，全書闡述了JavaScript語言實現(xiàn)的各個組成部分，ECMAScript，DOM，BOM，事件，面向?qū)ο蟮鹊龋S時拿出來翻翻，更加深入了學(xué)習(xí) JS。

在線系列

除了書籍之外，也有很多優(yōu)秀的在線教程，可以幫助我們更好的學(xué)習(xí)。

• 現(xiàn)代 Javascript 教程（https://zh.javascript.info/）：非常全面的JavaScript 學(xué)習(xí)教程，從基礎(chǔ)到高階，非常詳細(xì)，相信你會愛上它的。
• 廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）：廖雪峰系列教程。
• JavaScript 標(biāo)準(zhǔn)參考教程（alpha）（https://javascript.ruanyifeng.com/）：阮一峰老師的系列教程，通俗易懂，案例豐富。

2. 進階

• JavaScript語言精粹（https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md）：揭示JavaScript中的精華。
• JavaScript 秘密花園（http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts）：對 JS 一些的核心知識點進行梳理講解，例如：this，閉包/作用域，構(gòu)造函數(shù)，原型等等，都是面試必考知識點。
• ECMAScript 6 入門（http://es6.ruanyifeng.com/）：阮一峰老師ES6入門書籍，全面介紹 ECMAScript 6 新引入的語法特性。
• JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以認(rèn)識到一些你平時沒有接觸過的小技巧。
• 深入理解javascript原型和閉包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：詳細(xì)解釋了原型和閉包，看完之后對原型與閉包讓你徹底明白。
• 大漠老師的JavaScript系列（https://www.w3cplus.com/JavaScript）：大漠老師的JavaScript系列文章。
• JavaScript 算法與數(shù)據(jù)結(jié)構(gòu)（https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md）：基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)，讓你愉快的學(xué)習(xí)。
• JavaScript中的正則表達式（https://blog.csdn.net/qq_32135281/article/details/78274563）：我自己的一篇正則表達式的文章，希望對你有幫助。
• 30分鐘掌握ES6/ES2015核心內(nèi)容（上）（https://segmentfault.com/a/1190000004365693）
• 30分鐘掌握ES6/ES2015核心內(nèi)容（下）（https://segmentfault.com/a/1190000004368132）：闡述了一些常用的ES6的知識點。
• 學(xué)用 JavaScript 設(shè)計模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：闡述JavaScript編程語言中經(jīng)典和現(xiàn)代的設(shè)計模式。
• 你不懂JS（系列叢書）（https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN）
• InterviewMap（https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B）：聚集了很多知識點，包括JS，瀏覽器，性能等。
• 30 秒就能理解的 JavaScript 代碼片段（https://www.html.cn/30-seconds-of-code/）：讓你更好的理解一些有用的JS代碼片段。

TypeScript篇

ES6 的超集擴展，嚴(yán)格的數(shù)據(jù)類型，帶來更好的維護，適合大型項目的開發(fā)工作，有人說它是未來的發(fā)展趨勢，你說要不要了解？

• TypeScript 中文手冊（https://typescript.bootcss.com/）：官網(wǎng)翻譯版。
• TypeScript Handbook（中文版）（https://zhongsp.gitbooks.io/typescript-handbook/content/）：中文版。
• RxJS 中文文檔（https://cn.rx.js.org/）：中文官網(wǎng)。
• 30 天精通 RxJS (01)：認(rèn)識 RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁體字可能閱讀起來并沒有那么順暢。

Jquery篇

雖說現(xiàn)在已經(jīng)是單頁面應(yīng)用時代，有React，Vue 這種強大的框架可以使用，但也不缺乏一些老的項目需要維護，而且在學(xué)習(xí)之初，可以用它做兩個簡單的應(yīng)用還是不錯的，可以相對了解下基本用法，它可以讓你更好，更方便的操作DOM。但不建議再深度學(xué)習(xí)。

• 《鋒利的jQuery(第2版)》（https://book.douban.com/subject/10792216/）：一本很不錯的 Jquery 學(xué)習(xí)書籍。
• jQuery API中文文檔（https://www.jquery123.com/）：JQuery 中文教程。

Ajax篇

掌握了的HTML、CSS、JavaScript時，這時候可以嘗試自己做一些項目了，而項目中肯定會有數(shù)據(jù)的交互，這時候就是 Ajax 的用武之地了。

• 廖雪峰AJAX（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000）：廖雪峰大佬的博客知識。
• XMLHttpRequest 對象（https://wangdoc.com/javascript/bom/xmlhttprequest.html）：阮一峰老師的AJAX詳解。
• JSON風(fēng)格指南（https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript）：前后端的交互數(shù)據(jù)通常都是 JSON 格式，所以了解 JSON 是必要的。

NodeJS與模塊化

NodeJs 的出現(xiàn)讓前端發(fā)展進入了一個新的領(lǐng)域，并且滋生出專業(yè)的 Node 工程師，不僅如此 Node 在前端模塊化，工程化起到很重要的作用，所以了解是必須的，如果感興趣的可以深入學(xué)習(xí)，可以向全棧工程師發(fā)展。

• Javascript模塊化編程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：模塊的寫法
• Javascript模塊化編程（二）：AMD規(guī)范
• Javascript模塊化編程（三）：require.js的用法
• 前端模塊化開發(fā)那點歷史（https://github.com/seajs/seajs/issues/588）：了解下，前端模塊化的發(fā)展。
• Node.js 官方（https://nodejs.org/zh-cn/）
• 狼叔：如何正確的學(xué)習(xí)Node.js（https://github.com/i5ting/How-to-learn-node-correctly）：狼叔江湖地位頗高，《更了不起的 Node.js》的作者。
• 全棧工程師之路-Node.js（http://i5ting.github.io/nodejs-fullstack/）

框架篇

隨著日益復(fù)雜的用戶需求，與系統(tǒng)的復(fù)雜度上升，傳統(tǒng)的開發(fā)模式日漸的很難滿足，此時的三大框架孕育而生，讓開發(fā)者更加高效，可復(fù)用，把關(guān)注點都放在數(shù)據(jù)層的操作，免去那些繁瑣而又重復(fù)的視圖操作。

現(xiàn)在框架的能力已經(jīng)是前端開發(fā)人員必備的技能之一也是趨勢，三大框架的「最終目的」都是一致的，我認(rèn)為開發(fā)者不必糾結(jié)于到底應(yīng)該選擇哪一個學(xué)習(xí)，可以選擇其中的兩個是最好的。對于剛?cè)腴T的人來說，建議選擇 Vue 入手，比較簡單，靈活。

• MVC，MVP 和 MVVM 的圖示（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html）：在學(xué)習(xí)框架之前，你應(yīng)該了解下MVVM的設(shè)計思想。
• 框架原理（https://yuchengkai.cn/docs/frontend/framework.html）：了解一些框架的基本原理。

1. Angular

• Angular（https://angular.cn/）：Angular官方社區(qū)。
• Angular開發(fā)者（http://www.ngfans.net/）：大漠窮秋老師維護的站點，Angular中國布道者。
• NG-ZORRO（https://ng.ant.design/docs/introduce/zh#%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83）：Angular UI 組件庫，阿里巴巴出品。

2. Vue

• Vue（https://cn.vuejs.org/index.html）：官網(wǎng)，最好的學(xué)習(xí)資料。
• 我的Vue進階之路（https://blog.csdn.net/qq_32135281/column/info/29689）
• 使用vue全家桶制作博客網(wǎng)站（https://www.cnblogs.com/xiaohuochai/p/9228543.html）
• Element（http://element-cn.eleme.io/#/zh-CN）：一個高質(zhì)量的 Vue UI 組件庫。餓了么前端團隊出品。
• Vue 項目里戳中你痛點的問題及解決辦法（更新）（https://juejin.im/post/5b174de8f265da6e410e0b4e）：做項目難免回去到坑，這里你或許可以找到答案。

3. React

React我了解不多，所以就沒什么好推薦的了，大家可自行學(xué)習(xí)。

• React官網(wǎng)（https://www.reactjscn.com/）

圖形可視化

隨著日益增長的數(shù)據(jù)，如何利用高效的利用數(shù)據(jù)，是每個企業(yè)都考慮的問題，而人的眼睛看到的東西要勝過閱讀的問題，俗話說「一圖勝千言」就是這個道理，所以數(shù)據(jù)的可視化就會格外的重要，以下都是我常看的一些技術(shù)，書籍，和關(guān)注的可視化開源庫。

• 《HTML5 Canvas核心技術(shù)》（https://book.douban.com/subject/24533314/）：學(xué)習(xí) Canvas 比較好的一本書籍。
• Canvas系列（https://www.w3cplus.com/search/node/canvas）：大漠老師的 Canvas 系列。
• Echarts（https://www.echartsjs.com/index.html）
• D3（https://d3js.org/）
• Highcharts（https://www.highcharts.com.cn/）
• AntV（https://antv.alipay.com/zh-cn/index.html）
• Mapv（https://mapv.baidu.com/）

工程化與版本控制篇

1. Git

版本控制工具，很多新手往往把 git 與 github 傻傻分不清楚，二者是不同的東西，一定要去區(qū)分清楚。

• Git教程（https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000）：廖雪峰老師的教程。
• Learn Git Branching（https://learngitbranching.js.org/）：一種有趣的學(xué)習(xí) Git 的方式。
• GitHub 漫游指南（https://github.com/phodal/github）：作者是一個極客。
• git - 簡易指南：http://www.bootcss.com/p/git-guide/

2. Gulp

自動化構(gòu)建工具，項目打包部署前的壓縮合并，節(jié)省時間，提高開發(fā)效率。

• Gulp 中文網(wǎng)（https://www.gulpjs.com.cn/）：官方教程。
• gulp詳細(xì)入門教程（http://www.ydcss.com/archives/18）：非常詳細(xì)的實現(xiàn)步驟。

3. Webpack

Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。

• Webpack中文文檔：https://www.webpackjs.com/
• webpack原理：https://juejin.im/entry/5b0e3eba5188251534379615
• Webpack揭秘——走向高階前端的必經(jīng)之路：https://juejin.im/post/5badd0c5e51d450e4437f07a
• Webpack HMR 原理解析：https://zhuanlan.zhihu.com/p/30669007
• webpack 熱加載原理探索：http://shepherdwind.com/2017/02/07/webpack-hmr-principle/

4. Babel

JavaScript代碼編譯器，可以讓ES6及以上語法轉(zhuǎn)換成瀏覽器支持的語法，一般會在框架的腳手架中自行配置。

• Babel（https://babel.bootcss.com/）：官網(wǎng)教程。

5. 代碼質(zhì)量

• ESLint（https://eslint.bootcss.com/）：javascript代碼檢測工具幫助我們寫出更規(guī)范的代碼。

瀏覽器與HTTP

• 瀏覽器的常見知識點（https://yuchengkai.cn/docs/frontend/browser.html）：需要我們了解的常見知識。
• 網(wǎng)站安全（https://yuchengkai.cn/docs/frontend/safety.html）：幾種常見安全問題。
• 同源限制（https://wangdoc.com/javascript/bom/same-origin.html）
• 從URL輸入到頁面展現(xiàn)到底發(fā)生什么？（https://github.com/ljianshu/Blog/issues/24）
• 深入理解瀏覽器的緩存機制（https://github.com/ljianshu/Blog/issues/23）
• 網(wǎng)頁性能管理詳解（http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）
• 關(guān)于Http協(xié)議，你必須要知道的（https://github.com/ljianshu/Blog/issues/22）
• HTTP 協(xié)議（https://github.com/coconilu/Blog/issues/135）
• HTTP2 協(xié)議（https://github.com/coconilu/Blog/issues/134）
• 瀏覽器同源政策及其規(guī)避方法（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）
• 跨域資源共享 CORS 詳解（http://www.ruanyifeng.com/blog/2016/04/cors.html）
• 總結(jié) XSS 與 CSRF 兩種跨站攻擊（https://segmentfault.com/a/1190000004623125）

性能優(yōu)化

• 性能優(yōu)化（https://yuchengkai.cn/docs/frontend/performance.html）：常見性能優(yōu)化。
• 前端性能優(yōu)化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）
• 延遲加載(Lazyload)三種實現(xiàn)方式（https://zhuanlan.zhihu.com/p/25455672）
• 詳解懶加載和預(yù)加載（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）
• 前端優(yōu)化帶來的思考，淺談前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）
• 推薦幾本與Web性能優(yōu)化有關(guān)的書籍（https://w3ctech.com/topic/108）
• vue + webpack 前端性能優(yōu)化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）

SEO

• SEO優(yōu)化實戰(zhàn)（https://imweb.io/topic/5682938b57d7a6c47914fc00）

博客系列

1. 個人

現(xiàn)在是一個信息爆炸的時代，網(wǎng)上有很多優(yōu)秀的博客文章，每個人的精力都是有限的，不可能關(guān)注到所有的博客，每個人關(guān)注點可能不太一樣，所以關(guān)注的個人博客也會不同，這些推薦幾個我比較常看的幾個高質(zhì)量博客。而且是持續(xù)更新的。

• 阮一峰的個人網(wǎng)站（http://www.ruanyifeng.com/home.html）：阮一峰老師江湖地位不必多說，博客不止有技術(shù)，現(xiàn)在阿里任職。
• 廖雪峰的官方網(wǎng)站（https://www.liaoxuefeng.com/）：廖雪峰老師寫過很多優(yōu)秀的系列教程，值得去學(xué)習(xí)。
• 張鑫旭（https://www.zhangxinxu.com/）：專注前端技術(shù)的大牛之一，出版《css世界》一書。
• W3cplus（https://www.w3cplus.com/）：大漠老師在手淘任職，CSS，HTML 有著豐富的經(jīng)驗。
• 前端入門和進階學(xué)習(xí)筆記（https://github.com/qianguyihao/Web）：從零開始自學(xué)，然后進入京東，記錄作者一路走來的學(xué)習(xí)筆記。
• 六小登登（https://blog.csdn.net/qq_32135281）：我自己的個人博客，記錄自己的一些學(xué)習(xí)總結(jié)，個人成長，認(rèn)識思維，雖然自己還是個菜鳥，但一直在路上。

2. 團隊

• 奇舞周刊（https://weekly.75team.com/）：收集每周前端精華文章。
• 美團技術(shù)團隊（https://tech.meituan.com/）：分享一些美團的技術(shù)路線。
• JavaScript Weekly（https://javascriptweekly.com/）：每周都會分享一些 JavaScript 優(yōu)質(zhì)內(nèi)容。
• 印記中文周刊（https://weekly.docschina.org/）：如果你對英文有閱讀障礙的話，印記幫你翻譯。
• 凹凸實驗室（https://aotu.io/index.html）：京東團隊。
• 淘寶前端團隊FED（http://taobaofed.org/）：淘寶前端團隊，不必多說了。
• 網(wǎng)易FEG前端團隊（http://feg.netease.com/）：網(wǎng)易的前端團隊，網(wǎng)易的產(chǎn)品一直都是我最喜歡的。
• IMWeb前端博客（https://www.imweb.io/）：騰訊公司前端團隊，負(fù)責(zé)QQ的相關(guān)業(yè)務(wù)你就知道了，都是億級別。
• tutorialzine（https://tutorialzine.com/）：高質(zhì)量教程和文章庫。

項目資源

• 前端技能匯總（http://html5ify.com/fks/）：一個前端工程師需要的技能點和學(xué)習(xí)資料。
• You-need-to-know-css（https://lhammer.cn/You-need-to-know-css/#/）：一個CSS的優(yōu)質(zhì)項目，純 CSS 實現(xiàn)我們項目中很多常用，不常用的樣式。
• JavaScript libraries（https://www.javascripting.com/）：一些優(yōu)秀的JavaScript 開源庫。
• awesome-web-dev-books（https://github.com/jobbole/awesome-web-dev-books）：前端經(jīng)典學(xué)習(xí)書單。
• 前端 TOP 100（https://www.awesomes.cn/rank）：基本涵蓋了所有前端在用的開源項目，我覺得收藏這一個就夠了。

常用工具

• CSS Sprites Generator（https://www.toptal.com/developers/css/sprite-generator）：雪碧圖的在線制作工具。
• Lorem Picsum（https://picsum.photos/）：好用的圖片臨時占位符。
• Md2All（http://md.aclickall.com/）：優(yōu)秀的現(xiàn)在 Markdown 編輯器。
• 優(yōu)波設(shè)計（https://ubuuk.com/）：優(yōu)秀的設(shè)計導(dǎo)航網(wǎng)站，幫助你更好的尋找資料。
• 搬書匠（http://www.banshujiang.cn/）：書籍搜索下載。
• 史萊姆導(dǎo)航（http://www.slimegps.cn/）：資源搜索。
• codePen（https://codepen.io/）：在線代碼編輯工具。
• Iconfont（https://www.iconfont.cn/）：阿里的字體圖標(biāo)庫，支持多種格式，下載圖片，在線使用，SVG等等。
• Can I use（https://www.caniuse.com/）：可以查看瀏覽器兼容 CSS 情況。
• 在線工具（https://tool.lu/）：工具資源導(dǎo)航。

最后

以上是我這兩年多一路走來收藏的一些資料，整理這份資料也花了我好幾天的時間，希望能夠在自學(xué)的道路上幫到你。

再次聲明，我并不是什么大神，我自認(rèn)為技術(shù)也沒有到達這個層級，但是我會一直堅持學(xué)下去，另外一定不要誤會這里面的知識我全部都會，這些都是我學(xué)習(xí)的一些資料想整理出來，免去小白的一些不知道如何查閱資料。

這里的資源可能并不適合每一個人，你也不一定全部都需要，只需要挑選自己想要的部分就行，任何事情并不是越多越好。

作者：六小登登，個人公眾號：六小登登（ID：liuxiaodengdeng）。目前在某創(chuàng)業(yè)公司任職前端開發(fā)工作，近 3 年前端開發(fā)經(jīng)驗，愛技術(shù)、愛寫作、愛分享。

聲明：本文為作者投稿，版權(quán)歸其個人所有。

使用由Angular，React，Vue等應(yīng)用程序框架構(gòu)建的客戶端應(yīng)用程序時，您總是會處理HTML5客戶端路由，它將完全在瀏覽器中處理到頁面和組件的客戶端路由。幾乎完全在瀏覽器中...

HTML5客戶端路由在客戶端上工作的很好，但是當(dāng)深入鏈接到一個站點或在瀏覽器中按刷新時，客戶端路由有一個惡習(xí)，變成服務(wù)器HTTP請求。請求可能未配置服務(wù)器的路由。

在這篇文章中，我將討論如何使ASP.NET Core（或間接ASP.NET應(yīng)用程序）通過有效地將客戶端應(yīng)用程序重新連接到其路由來處理這些“假”請求。

Html 5客戶端路由？

如果您不知道HTML5客戶端路由是什么，請快速回顧一下。

客戶端框架實現(xiàn)他們自己的客戶端路由機制，以便他們可以 - 就像服務(wù)器應(yīng)用程序 - 在頁面或組件之間進行導(dǎo)航。

Angular支持幾種路由類型：

• 哈希路線（http：// localhost：4200 /＃！/ albums或http：// localhost：4200 /＃/ albums）

• HTML 5路線（http：// localhost：4200 / albums）

#!/ 哈希邦德路線

前者是一種較早的方法，它直接與HTTP語義一起工作，指定任何具有a的URL #在客戶端被觸發(fā)并跳轉(zhuǎn)到頁面內(nèi)的“本地”URL。框架可以攔截導(dǎo)航并檢查跟隨的URL內(nèi)容#以確定路線。散列爆炸#!\用于區(qū)分應(yīng)用程序URL和普通#錨鏈接。

散列爆炸路線的好處是，他們只是工作。沒有服務(wù)器端出血的路線，如果您書簽或刷新客戶端頁面，它只是如預(yù)期的那樣工作，因為散列邏輯是作為瀏覽器中本地URL解析的一部分執(zhí)行的。很簡單，對吧？它只是工作。

但缺點是，如果您必須手動輸入網(wǎng)址，則這些網(wǎng)址非常難看且不直觀。對于散列爆炸路線來說，這并不是一個很好的論據(jù)，但是不管它們是否對HTML5路由不利。

哈希在Angular中的Bang路由

Angular使用默認(rèn)的HTML5客戶端路由，但它是一個簡單的開關(guān)來啟用Hashbang路由，而不是HTML5路由::

// in app.module.tsproviders : [
 ..
 // make sure you use this for Hash Urls rather than HTML 5 routing
 { provide: LocationStrategy, useClass: HashLocationStrategy },] 

只要您routerLink在HTML模板中使用鏈接網(wǎng)址，并router.navigate()在代碼鏈接中使用，Angular交換機就會自動在兩種模式之間進行切換。

• 在HTML中使用<a routerLink="/albums" />鏈接

• 在代碼中使用： router.navigate(["/album",album.id])

HTML5路由

HTML5路由使用更復(fù)雜的方法 - 它使用HTML5的Pushstate API來控制客戶端的路由并管理地址欄顯示。

這種方法的優(yōu)點是，使用HTML5 API相對容易操作，并且使用標(biāo)準(zhǔn)的無延伸路由約定，使用Web應(yīng)用程序和API時，URL更加簡潔，易于控制。

但是HTML5路由需要服務(wù)器的明確支持來正確理解哪些路由是服務(wù)器路由，哪些是客戶路由。

沒有服務(wù)器處理的HTML5路由問題

問題在于HTML5客戶端路由與服務(wù)器路由無法區(qū)分。

http://localhost:4200/albums可以很容易地將客戶端URL作為服務(wù)器端URL。在完全在客戶端上導(dǎo)航時，HTML5路線工作正常 - 應(yīng)用程序可以攔截導(dǎo)航并在激活特定路線時路由到相應(yīng)的客戶端頁面。

如果您使用深層鏈接導(dǎo)航到客戶端驅(qū)動的應(yīng)用程序，然后您將該頁面書簽為書簽，然后使用該URL導(dǎo)航回到該頁面，或者刷新當(dāng)前活動頁面，則會彈出問題。在這兩種情況下，當(dāng)瀏覽器請求路由時，客戶端應(yīng)用程序不運行，因此瀏覽器向服務(wù)器請求路由URL。但是，默認(rèn)情況下不設(shè)置處理說/albums路線，所以你會得到一個錯誤。

如果您在ASP.NET Core應(yīng)用程序中沒有對HTML5路由設(shè)置進行任何特殊處理，您將在應(yīng)用程序中打開錯誤頁面，或者從Kestrel中選擇此默認(rèn)顯示：

圖1 - 未處理的客戶端路由產(chǎn)生服務(wù)器錯誤

修復(fù)服務(wù)器上的客戶端路由

那么你如何解決這個問題呢？

客戶端SPA應(yīng)用程序通常有一個或幾個啟動應(yīng)用程序的靜態(tài)頁面。對于一個典型的Angular應(yīng)用程序，該頁面是index.html啟動應(yīng)用程序并啟動客戶端路由。大多數(shù)框架都足夠聰明，可以在啟動時檢查當(dāng)前路由，并移至首次訪問請求的路由。

如果客戶端路由從書簽，鏈接或完全刷新被觸發(fā)到服務(wù)器，則需要提供index.html并保持原始URL不變。

然后，客戶端應(yīng)用程序?qū)⒆孕幸龑?dǎo)，并且內(nèi)部路由啟動，以希望將您甩回書簽/刷新位置。

從服務(wù)器提供Index.html

為了這個工作，你需要確保服務(wù)器只提供服務(wù)器負(fù)責(zé)的內(nèi)容。

有幾種方法可以做到這一點：

• 主機服務(wù)器URL重寫

• 處理ASP.NET Core應(yīng)用程序中的客戶端路由

主機Web服務(wù)器上的URL重寫

如果您在主流Web服務(wù)器上運行ASP.NET Core（或ASP.NET）應(yīng)用程序，最簡單且最有效的解決方案是重寫客戶端URL并為index.html給定的URL 提供內(nèi)容。

在IIS上，您可以使用IIS重寫模塊來執(zhí)行此操作。我最近在一篇博文中更詳細(xì)地介紹了這一點：

• ASP.NET核心應(yīng)用程序的IIS重寫規(guī)則

但是這里是相關(guān)的IIS重寫規(guī)則：

<rewrite>
 <rules>
 <!--
 Make sure you have a <base href="/" /> tag to fix the root path
 or all relative links will break on rewrite
 -->
<rule name="AngularJS-Html5-Routes" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" pattern="api/" negate="true" />
 </conditions>
 <action type="Rewrite" url="wwwroot/index.html" />
 </rule>
 </rules></rewrite>

您可以從以下任何位置安裝UrlRewrite模塊：

• Microsoft下載網(wǎng)站

• choco install urlrewrite

• Web平臺安裝程序

如果你在Linux上運行Docker和nginX或者Apache，那么類似的Rewrite選項就可以在那里使用。

讓ASP.NET Core處理客戶端路由

如前所述，我通常使用像IIS或nginX這樣的前端Web服務(wù)器來處理重定向，但是通常在測試或內(nèi)部應(yīng)用程序時，只需要Kestrel直接為應(yīng)用程序提供服務(wù)即可。如果您直接讓Kestrel處理HTTP流量，那么您需要在ASP.NET Core代碼中處理客戶端路由。

捕獲所有app.Run()處理程序

有很多方法可用，但是我發(fā)現(xiàn)了在Startup類的Configure()方法中使用一個非常簡單的后備處理程序來處理客戶端路由的最簡單的方法：

// set up whatever routes you use with UseMvc()// you may not need to set up any routes here// if you only use attribute routes!app.UseMvc(routes =>{
 routes.MapRoute(
 	name: "default",
 	template: "{controller=Home}/{action=Index}/{id?}");});//handle client side routesapp.Run( async (context) =>{
 context.Response.ContentType = "text/html";
 await context.Response.SendFileAsync(Path.Combine(env.WebRootPath,"index.html"));});

關(guān)鍵是app.Run()位于路由后的管道末端的中間件處理程序。如果服務(wù)器端路由不能找到匹配的路由，這個通用處理程序就會啟動。

上面的代碼是你可以做的最簡單的事情，只是把內(nèi)容發(fā)送index.html到客戶端。如果您有多個靜態(tài)頁面和SPA筒倉，您可以在其中添加額外的邏輯來嘗試確定需要加載哪個頁面。

請注意，內(nèi)容不會重定向到，而是作為內(nèi)嵌流發(fā)送到現(xiàn)有的URL請求，以便用戶請求的URL保持不變。這確保了當(dāng)用戶請求http://localhost:4200/albums你回到那個客戶端頁面而不是index.html。

捕獲所有路由處理程序

另一種方法是在路由定義中使用最后定義的全部捕獲的 MVC路由處理程序。這基本上拿起你的MVC路由配置無法處理的任何URL，然后路由到你指定的路線。

使用catch-all處理程序設(shè)置您的MVC路線，將此代碼放在您的Startup類的Configure()方法中：

app.UseMvc(routes =>{
 // default routes plus any other custom routes
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
 // Catch all Route - catches anything not caught be other routes
routes.MapRoute(
name: "catch-all",
template: "{*url}",
defaults: new {controller = "AlbumViewerApi", action = "RedirectIndex"}
);});

然后執(zhí)行完全相同的事情中間件處理程序使用：index.html使用以下代碼將內(nèi)容流式傳輸?shù)娇蛻舳耍?/p>

// we need hosting environment for base pathpublic IHostingEnvironment HostingEnv { get; }public AlbumViewerApiController(IHostingEnvironment env){
 HostingEnv = env;}[HttpGet]public IActionResult RedirectIndex(){
 return new PhysicalFileResult(
 Path.Combine(HostingEnv.WebRootPath,"index.html"),
 new MediaTypeHeaderValue("text/html")
 );}

Catch-All Route不使用屬性路由

確保您為回退路線指定的路線不具有分配給它的屬性路線。當(dāng)我昨天檢查出來的時候，我無法得到一條全面的路線，直到我[Route("api/RedirectIndex")]從控制器的操作中移除 了這個全部工作。

SpaServices

SpaServices提供了另一個選項，routes.MapSpaFallbackRoute()盡管我自己也沒有嘗試過，但是如果您已經(jīng)在ASP.NET Core應(yīng)用程序中使用了Spa服務(wù)，那么這可能是一個簡單的方法來實現(xiàn)這個功能，包括潛在的支持服務(wù)器預(yù)渲染。

概要

HTML5路由為客戶端應(yīng)用程序提供了干凈的URL，但它的價格必須有服務(wù)器支持才能使其工作。使用主機Web服務(wù)器中的重寫規(guī)則或直接在Kestrel的中間件管道或自定義路由處理程序中進行設(shè)置并不困難，但是您必須確保將此功能顯式添加到您創(chuàng)建的每個ASP.NET應(yīng)用程序中。

盡管舊的Hash Bang路線看起來不那么干凈，但它們工作正常，不需要任何服務(wù)器端支持。對于需要支持古代瀏覽器的非公眾應(yīng)用程序或應(yīng)用程序，在沒有服務(wù)器支持的情況下，散列邦線路仍然是提供路由的可行方式。

最后，如果您正在使用完整的Web服務(wù)器，UrlRewriting是處理非ASP.NET內(nèi)核后端直接處理的非API內(nèi)容的最干凈和最有效的方式。

選擇是好的，你有幾個選擇提供方便，干凈的網(wǎng)址或簡單的只是把它放在功能。你的選擇...