我是如何從零開(kāi)始 Web 前端自學(xué)之路的？

者 | 六小登登

責(zé)編 | 屠敏

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

最后的機(jī)緣巧合下，走上了前端開(kāi)發(fā)之路，作為一個(gè)非計(jì)算機(jī)專業(yè)且低學(xué)歷的人來(lái)說(shuō)，自學(xué)編程其實(shí)不是件容易的事情，不過(guò)慶幸的是自己堅(jiān)持下來(lái)了。

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

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

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

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

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

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

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

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

前言

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

工具篇

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

1. WebStorm

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

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

2. Visual Studio Code

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

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

3. atom

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

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

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

5. Google

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

6. Github

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

7. Stack Overflow

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

8. SegmentFault

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

9. Markdown

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

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

HTML 篇

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

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

1. 基礎(chǔ)

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

2. 進(jìn)階

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

CSS 篇

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

1. 基礎(chǔ)

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

2. 進(jìn)階

書(shū)籍：

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

在線系列：

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

知識(shí)點(diǎn)：

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

JavaScript 篇

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

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

1. 基礎(chǔ)

書(shū)籍

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

在線系列

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

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

2. 進(jìn)階

JavaScript語(yǔ)言精粹（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）：對(duì) JS 一些的核心知識(shí)點(diǎn)進(jìn)行梳理講解，例如：this，閉包/作用域，構(gòu)造函數(shù)，原型等等，都是面試必考知識(shí)點(diǎn)。
ECMAScript 6 入門(mén)（http://es6.ruanyifeng.com/）：阮一峰老師ES6入門(mén)書(shū)籍，全面介紹 ECMAScript 6 新引入的語(yǔ)法特性。
JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以認(rèn)識(shí)到一些你平時(shí)沒(méi)有接觸過(guò)的小技巧。
深入理解javascript原型和閉包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：詳細(xì)解釋了原型和閉包，看完之后對(duì)原型與閉包讓你徹底明白。
大漠老師的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中的正則表達(dá)式（https://blog.csdn.net/qq_32135281/article/details/78274563）：我自己的一篇正則表達(dá)式的文章，希望對(duì)你有幫助。
30分鐘掌握ES6/ES2015核心內(nèi)容（上）（https://segmentfault.com/a/1190000004365693）
30分鐘掌握ES6/ES2015核心內(nèi)容（下）（https://segmentfault.com/a/1190000004368132）：闡述了一些常用的ES6的知識(shí)點(diǎn)。
學(xué)用 JavaScript 設(shè)計(jì)模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：闡述JavaScript編程語(yǔ)言中經(jīng)典和現(xiàn)代的設(shè)計(jì)模式。
你不懂JS（系列叢書(shū)）（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）：聚集了很多知識(shí)點(diǎn)，包括JS，瀏覽器，性能等。
30 秒就能理解的 JavaScript 代碼片段（https://www.html.cn/30-seconds-of-code/）：讓你更好的理解一些有用的JS代碼片段。

TypeScript篇

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

TypeScript 中文手冊(cè)（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)識(shí) RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁體字可能閱讀起來(lái)并沒(méi)有那么順暢。

Jquery篇

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

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

Ajax篇

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

廖雪峰AJAX（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000）：廖雪峰大佬的博客知識(shí)。
XMLHttpRequest 對(duì)象（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ā)展進(jìn)入了一個(gè)新的領(lǐng)域，并且滋生出專業(yè)的 Node 工程師，不僅如此 Node 在前端模塊化，工程化起到很重要的作用，所以了解是必須的，如果感興趣的可以深入學(xué)習(xí)，可以向全棧工程師發(fā)展。

Javascript模塊化編程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：模塊的寫(xiě)法
Javascript模塊化編程（二）：AMD規(guī)范
Javascript模塊化編程（三）：require.js的用法
前端模塊化開(kāi)發(fā)那點(diǎn)歷史（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)的開(kāi)發(fā)模式日漸的很難滿足，此時(shí)的三大框架孕育而生，讓開(kāi)發(fā)者更加高效，可復(fù)用，把關(guān)注點(diǎn)都放在數(shù)據(jù)層的操作，免去那些繁瑣而又重復(fù)的視圖操作。

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

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

1. Angular

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

2. Vue

Vue（https://cn.vuejs.org/index.html）：官網(wǎng)，最好的學(xué)習(xí)資料。
我的Vue進(jìn)階之路（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）：一個(gè)高質(zhì)量的 Vue UI 組件庫(kù)。餓了么前端團(tuán)隊(duì)出品。
Vue 項(xiàng)目里戳中你痛點(diǎn)的問(wèn)題及解決辦法（更新）（https://juejin.im/post/5b174de8f265da6e410e0b4e）：做項(xiàng)目難免回去到坑，這里你或許可以找到答案。

3. React

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

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

圖形可視化

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

《HTML5 Canvas核心技術(shù)》（https://book.douban.com/subject/24533314/）：學(xué)習(xí) Canvas 比較好的一本書(shū)籍。
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）：作者是一個(gè)極客。
git - 簡(jiǎn)易指南：http://www.bootcss.com/p/git-guide/

2. Gulp

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

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

3. Webpack

Webpack 是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(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及以上語(yǔ)法轉(zhuǎn)換成瀏覽器支持的語(yǔ)法，一般會(huì)在框架的腳手架中自行配置。

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

5. 代碼質(zhì)量

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

瀏覽器與HTTP

瀏覽器的常見(jiàn)知識(shí)點(diǎn)（https://yuchengkai.cn/docs/frontend/browser.html）：需要我們了解的常見(jiàn)知識(shí)。
網(wǎng)站安全（https://yuchengkai.cn/docs/frontend/safety.html）：幾種常見(jiàn)安全問(wèn)題。
同源限制（https://wangdoc.com/javascript/bom/same-origin.html）
從URL輸入到頁(yè)面展現(xiàn)到底發(fā)生什么？（https://github.com/ljianshu/Blog/issues/24）
深入理解瀏覽器的緩存機(jī)制（https://github.com/ljianshu/Blog/issues/23）
網(wǎng)頁(yè)性能管理詳解（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）：常見(jiàn)性能優(yōu)化。
前端性能優(yōu)化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）
延遲加載(Lazyload)三種實(shí)現(xiàn)方式（https://zhuanlan.zhihu.com/p/25455672）
詳解懶加載和預(yù)加載（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）
前端優(yōu)化帶來(lái)的思考，淺談前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）
推薦幾本與Web性能優(yōu)化有關(guān)的書(shū)籍（https://w3ctech.com/topic/108）
vue + webpack 前端性能優(yōu)化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）

SEO

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

博客系列

1. 個(gè)人

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

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

2. 團(tuán)隊(duì)

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

項(xiàng)目資源

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

常用工具

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

最后

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

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

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

作者：六小登登，個(gè)人公眾號(hào)：六小登登（ID：liuxiaodengdeng）。目前在某創(chuàng)業(yè)公司任職前端開(kāi)發(fā)工作，近 3 年前端開(kāi)發(fā)經(jīng)驗(yàn)，愛(ài)技術(shù)、愛(ài)寫(xiě)作、愛(ài)分享。
聲明：本文為作者投稿，版權(quán)歸其個(gè)人所有。

一個(gè)非專業(yè)人士看3D圖紙有多難？比如打開(kāi)一個(gè)30M的3D圖紙：

裝個(gè)UG，Solidworks吧，電腦內(nèi)存飄紅了……
手機(jī)下載一個(gè)看圖軟件，還沒(méi)打開(kāi)就要會(huì)員收費(fèi)……
剛要在手機(jī)上打開(kāi)圖紙，手機(jī)內(nèi)存卡死閃退了……

但是如果換做用網(wǎng)頁(yè)看三維，不管你手機(jī)多老舊，不論你電腦配置多平常，也不論你是否專業(yè)人員，一個(gè)鏈接或者一個(gè)超鏈接、二維碼就能解決這些問(wèn)題。選擇SView 網(wǎng)頁(yè)端，讓3D圖紙躍然網(wǎng)上，以一個(gè)鏈接的形式，自由適配你的手機(jī)和電腦，會(huì)有這幾種形式：

鏈接

https://sview.sv3d.cn/model/preview/0a7e37de-1c33-4b32-aed8-72c36584799b

超鏈接

點(diǎn)擊圖片跳轉(zhuǎn)預(yù)覽

二維碼

長(zhǎng)按識(shí)別二維碼

網(wǎng)站嵌入

為什么3D圖紙?jiān)赟View網(wǎng)站上會(huì)這么流暢呢？

因?yàn)镾View在生成3D圖紙的鏈接之前會(huì)先對(duì)3D圖紙做高性能輕量化轉(zhuǎn)換，讓圖紙的大小能夠適配手機(jī)，以H5的形式在網(wǎng)頁(yè)上瀏覽。這種形式擴(kuò)大了圖紙的復(fù)用性以及應(yīng)用范圍的廣度，出現(xiàn)了多樣化的應(yīng)用場(chǎng)景。比如：

1產(chǎn)品3D展示

在電商平臺(tái)、產(chǎn)品官網(wǎng)，用產(chǎn)品的3D圖紙代替?zhèn)鹘y(tǒng)的文字、圖片、視頻、動(dòng)畫(huà)介紹講解。通過(guò)網(wǎng)頁(yè)嵌入或者超鏈接跳轉(zhuǎn)到產(chǎn)品的三維結(jié)構(gòu)圖，讓瀏覽者更清晰更全面了解產(chǎn)品的特質(zhì)、結(jié)構(gòu)、屬性。用科技感十足的宣傳手段，提升客戶對(duì)企業(yè)實(shí)力的認(rèn)可。

2 3D產(chǎn)品電子手冊(cè)

可以擺脫圖文表達(dá)在直觀性和互動(dòng)性上的不足，銷(xiāo)售人員在拜訪客戶時(shí)直接打開(kāi)手機(jī)或者網(wǎng)頁(yè)，就能立體生動(dòng)的向客戶進(jìn)行產(chǎn)品介紹，讓銷(xiāo)售工作事半功倍；介紹產(chǎn)品只提供二維碼、鏈接就可以讓客戶全面了解產(chǎn)品。

3D產(chǎn)品手冊(cè)，操作簡(jiǎn)單，使用方便，360°全三維展示、不同視圖展示、結(jié)構(gòu)爆炸圖展示、裝配樹(shù)展示、零部件拖拽和旋轉(zhuǎn)。

3 教材內(nèi)容的3D呈現(xiàn)

把傳統(tǒng)機(jī)械制圖教材中的平面三維教學(xué)內(nèi)容，用SView展示出來(lái)。拿起移動(dòng)設(shè)備掃一掃，在移動(dòng)設(shè)備中呈現(xiàn)三維圖紙的3D立體化效果。學(xué)生可對(duì)設(shè)備中的3D模型做剖切、放大、縮小、爆炸、裝配等等自由操作，全方位立體化識(shí)得每一個(gè)模型結(jié)構(gòu)和特質(zhì)。

SView利用HTML5技術(shù)及三維大數(shù)模的輕量化技術(shù)，實(shí)現(xiàn)在網(wǎng)頁(yè)端的三維模型預(yù)覽，同時(shí)適配手機(jī)及網(wǎng)頁(yè)瀏覽，想了解更多SView三維產(chǎn)品知識(shí)或者想應(yīng)用到更廣泛的場(chǎng)景中，請(qǐng)聯(lián)系我們。

更多SView產(chǎn)品體驗(yàn)下載地址：

https://sview.sv3d.cn/tool

SView產(chǎn)品激活地址：

https://service.sv3d.cn/web/licence/applypage

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

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

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

Html 5客戶端路由？

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

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

Angular支持幾種路由類(lèi)型：

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

#!/ 哈希邦德路線

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

散列爆炸路線的好處是，他們只是工作。沒(méi)有服務(wù)器端出血的路線，如果您書(shū)簽或刷新客戶端頁(yè)面，它只是如預(yù)期的那樣工作，因?yàn)樯⒘羞壿嬍亲鳛闉g覽器中本地URL解析的一部分執(zhí)行的。很簡(jiǎn)單，對(duì)吧？它只是工作。

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

哈希在Angular中的Bang路由

Angular使用默認(rèn)的HTML5客戶端路由，但它是一個(gè)簡(jiǎn)單的開(kāi)關(guān)來(lái)啟用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交換機(jī)就會(huì)自動(dòng)在兩種模式之間進(jìn)行切換。

在HTML中使用<a routerLink="/albums" />鏈接
在代碼中使用： router.navigate(["/album",album.id])

HTML5路由

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

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

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

沒(méi)有服務(wù)器處理的HTML5路由問(wèn)題

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

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

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

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

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

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

那么你如何解決這個(gè)問(wèn)題呢？

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

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

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

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

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

有幾種方法可以做到這一點(diǎn)：

主機(jī)服務(wù)器URL重寫(xiě)
處理ASP.NET Core應(yīng)用程序中的客戶端路由

主機(jī)Web服務(wù)器上的URL重寫(xiě)

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

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

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

但是這里是相關(guān)的IIS重寫(xiě)規(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平臺(tái)安裝程序

如果你在Linux上運(yùn)行Docker和nginX或者Apache，那么類(lèi)似的Rewrite選項(xiàng)就可以在那里使用。

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

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

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

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

// 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ù)器端路由不能找到匹配的路由，這個(gè)通用處理程序就會(huì)啟動(dòng)。

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

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

捕獲所有路由處理程序

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

使用catch-all處理程序設(shè)置您的MVC路線，將此代碼放在您的Startup類(lèi)的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)我昨天檢查出來(lái)的時(shí)候，我無(wú)法得到一條全面的路線，直到我[Route("api/RedirectIndex")]從控制器的操作中移除了這個(gè)全部工作。

SpaServices

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

概要

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

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

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

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

在線咨詢

上一篇：HTML基礎(chǔ)教程：div元素實(shí)現(xiàn)布局
下一篇：Javascript模塊化

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

我是如何從零開(kāi)始 Web 前端自學(xué)之路的？

1產(chǎn)品3D展示

2 3D產(chǎn)品電子手冊(cè)

3 教材內(nèi)容的3D呈現(xiàn)

您的項(xiàng)目需求