因?yàn)槲冶旧碓诘膶W(xué)校屬于三本野雞大學(xué)，所以幾乎環(huán)境都是封閉的，感覺回到了十年前，幸虧有互聯(lián)網(wǎng)?；径际强恐n余時(shí)間東找西湊，所以基本都是摸索著學(xué)習(xí)，之前搞過安卓，在最后的五個(gè)月轉(zhuǎn)行了前端，馬上面臨就業(yè)了，也是非常的著急，所以不得不規(guī)劃了一下這五個(gè)月的前端學(xué)習(xí)路線，最終功夫不負(fù)有心人，拿到了自己滿意的 offer，所以有很多經(jīng)驗(yàn)分享給在做的初學(xué)者和自學(xué)者，希望能夠用這大學(xué)四年總結(jié)的經(jīng)驗(yàn)分享給你們。
-------------------------------------------- 一下是正文 -----------------------------------------------------------
今天我想分享這五個(gè)月從只會(huì) HTML 到面試拿到自己滿意的 offer，要學(xué)習(xí)哪些前端知識(shí)，我是如何學(xué)習(xí)的？有什么樣的方法？踩過哪些不該踩的坑以及要掌握知識(shí)點(diǎn)到什么程度？如何準(zhǔn)備面試？統(tǒng)統(tǒng)都分享給學(xué)習(xí)前端的每一位讀者。
如果你不是學(xué)習(xí)前端的，小鹿也建議看一下，因?yàn)槔镞吙偨Y(jié)到的方法都適用，所謂換湯不換藥。
我努力的的回想我當(dāng)初學(xué)習(xí)前端的過程，從簡(jiǎn)單基礎(chǔ)到項(xiàng)目經(jīng)歷，然后到深入原理，再到準(zhǔn)備面試，這一系列前端系列，我想更詳細(xì)的寫一下，這篇文章可能會(huì)很長(zhǎng)，所以請(qǐng)做好長(zhǎng)時(shí)間閱讀的準(zhǔn)備，也希望能夠從中幫到你。
其實(shí)還有很多的技術(shù)導(dǎo)圖中沒有涉及到，對(duì)于初學(xué)者來說，能夠掌握上邊的知識(shí)點(diǎn)已經(jīng)很不錯(cuò)了。
想要入前端的坑，首先做好思想準(zhǔn)備。第一，你確定以后三年之內(nèi)做前端嗎？第二，你是對(duì)前端是真感興趣還是為了畢業(yè)之后為了找工作才去學(xué)習(xí)前端的？第三，無論遇到什么樣的困難，你真的能夠堅(jiān)持下去嗎？
這三問很有必要，當(dāng)初我學(xué)前端之間就是沒有這三問，所以學(xué)學(xué)數(shù)據(jù)分析，又去學(xué)學(xué)爬蟲和前端，不知道主攻什么才好。有了這三問，必定能確定你的方向，如果前兩問落實(shí)了，最后一問對(duì)于會(huì)中途放棄的人，有時(shí)遇到解決不了的問題，心想這個(gè)前端真難，還是去學(xué) python 吧，其實(shí)到了 python 還會(huì)有這種心理，所以說，目標(biāo)要堅(jiān)定，船桿要牢靠，船才會(huì)走正道，都是一個(gè)道理的。
在說 HTML、CSS 之前，先說一個(gè)很多人認(rèn)為的誤區(qū)。當(dāng)有人問你熟悉什么編程語言時(shí)，有人回答我熟悉 HTML + CSS，這時(shí)候有人笑著說，HTML、CSS 不是編程語言，而是標(biāo)記性語言，并不和 Java、JavaScript 這樣編程語言一樣。怎么去理解？標(biāo)記性，就是用標(biāo)簽來表示頁面的元素，他并沒有涉及到面向?qū)ο笾惖某橄蟮臇|西，很簡(jiǎn)單很易懂的理解方式。
我們聽別人最常說的一句話就是，前端太簡(jiǎn)單了，傻子看了都會(huì)，是的，前端入門那就是照葫蘆畫瓢。怎么說，
這個(gè)標(biāo)簽就代表一個(gè)頁面的元素，那好，你記住了，下次用就直接用就可以了，就是這么簡(jiǎn)單。還有很多標(biāo)簽也是這么去學(xué)習(xí)的，用多了就記住了。對(duì)于 CSS 就相當(dāng)于樣式，什么樣式？比如我們給朋友寄快遞，比如要寄一個(gè)玻璃的禮物，直接放到快遞盒子里可能會(huì)在運(yùn)輸?shù)耐局信鏊?，所以在盒子的?nèi)壁塞上軟綿綿的墊子，防止與和內(nèi)壁接觸碰碎。如果 HTML 是盒子和玻璃禮物的話，那么 CSS 就是處理玻璃與盒子內(nèi)壁的軟綿綿的墊子。如果我想把禮物包裝的更精美一些，加上蝴蝶結(jié)，這都是 CSS 來處理的，可以稱 CSS 為"裝扮師"。稱 HTML 為"搭建師"。
上邊小鹿舉的例子非常易理解，那么學(xué)到什么程度我們的 HTML 和 CSS 算合適呢？在網(wǎng)上隨便給你個(gè)網(wǎng)站，你能通過 DIV + CSS 搭建出靜態(tài)頁面，那么你的 HTML + CSS 就算合格了。如果再讓我詳細(xì)給你個(gè)學(xué)習(xí)方法，那就是我推薦一個(gè)大一學(xué)習(xí)的網(wǎng)站，這是我一直跟著我做項(xiàng)目的老師搭建的學(xué)習(xí)網(wǎng)站，里邊有十個(gè)簡(jiǎn)單的網(wǎng)站，素材什么的都可以自行下載，做完這是個(gè)靜態(tài)網(wǎng)站，那么你的 HTML + CSS 就夠格了，大一跟著他也是這么學(xué)過來的（PS：此時(shí)我該不該和老師要波廣告費(fèi)，哈哈）。
網(wǎng)址：http://www.125jz.com/special/webproject。
說起 JavaScript 大家并不陌生，這門語言很強(qiáng)大，它可以完成任何你想不到的事情。做 PC 頁面交互、微信小程序、移動(dòng)端、后臺(tái)Node.js、網(wǎng)頁爬蟲、公眾號(hào)開發(fā)，你可能會(huì)很驚奇，我咋不知道 js 能做那么多事情，因?yàn)槌鯇W(xué)者一開始學(xué)習(xí)了解到的少，所以并不知道 JS 的強(qiáng)大之處，既然那么強(qiáng)大，那么我們就分析一下怎么在短短時(shí)間內(nèi)掌握住它的命脈，然后融會(huì)貫通，一氣呵成。
無論你學(xué)習(xí)編程，都跑不了學(xué)習(xí)面向?qū)ο缶幊蹋瑢W(xué)了這么多年的編程，說實(shí)話，剛剛領(lǐng)會(huì)到面向編程的精髓所在，有了之前 JAVA 的基礎(chǔ)，學(xué) JS 那就是和玩一樣，你可能說我吹B，那我就教給你怎么去理解去把握住它的精髓。
先說面向?qū)ο?，只需理解三個(gè)概念（對(duì)象、類、實(shí)例）我想打開文章的朋友，有可能你已經(jīng)工作了，也有可能你是個(gè)學(xué)生，面向?qū)ο髮?duì)你來說可能再簡(jiǎn)單不過了，但是你是否了解到了其中的奧秘。面向?qū)ο?，首先知道什么是?duì)象，女朋友？不，你單身想對(duì)象想瘋了吧。都說“萬物皆對(duì)象”，起初好像這句話也就這么淺層面理解了，但是回過頭來想想，萬物，所謂世界上存在的東西都可以作為對(duì)象，你看到的，你聽到的、你聞到的統(tǒng)統(tǒng)都是。這樣基本都理解了吧？
那么什么是類，這個(gè)好理解，他其實(shí)是一種抽象，還是不怎么明白，將物品分類這個(gè)都清楚，那么就這樣理解。所謂的“實(shí)例”，就是分類中的個(gè)體，比如水果類中的蘋果、香蕉、橘子都是“實(shí)例”。你會(huì)發(fā)現(xiàn)你學(xué)了幾年編程，面向?qū)ο缶湍敲春?jiǎn)單，是的，本質(zhì)上就是這么簡(jiǎn)單，只不過增加了一些新的特性，比如封裝、多態(tài)、繼承，這也很好理解，所謂的繼承就好比兒子繼承父親的財(cái)產(chǎn)，父親有的，兒子會(huì)繼承過來可以花費(fèi)父親的金錢。面向?qū)ο蟮乃枷胍彩沁@樣的，不用想的太過于復(fù)雜，只不過是將現(xiàn)實(shí)中存在的東西進(jìn)行抽象化，也導(dǎo)致了初學(xué)者很難去理解。
那么 JS 就學(xué)完了，你在逗我嗎？沒逗你呀，面向?qū)ο罄斫饬?，JS 就是學(xué)完了。沒錯(cuò)，跟著小鹿繼續(xù)往下說，JS 屬于弱類型語言，它不想Java 這種強(qiáng)類型一樣，里邊埋下了好多的坑，也包括小鹿自己。既然知道了是怎么回事了，還是不知道怎么去學(xué) JS ，別急，舉個(gè)例子：
這種關(guān)系理解了，那么學(xué) JS 真的不再話下， JS 所謂的很多方法，其實(shí)就是“爸爸”、“爺爺”、“祖宗”的財(cái)產(chǎn)（屬性）。對(duì)，沒錯(cuò)，所有的自帶方法如：toString、valueOf、等常用的 JS 方法都在這條家族原型鏈上。如果你知道 DOM 結(jié)點(diǎn)對(duì)象，也是這樣的關(guān)系，子繼承父，然后調(diào)用父的方法，哇，這對(duì)于你來說沒難度了。講的這么詳細(xì)，你還認(rèn)為 JS 難嗎？給你兩個(gè)星期，你就掌握了學(xué)習(xí) JS 的技巧了。
書籍推薦，去老老實(shí)實(shí)啃完《JavaScript 高級(jí)程序設(shè)計(jì)》這是最基礎(chǔ)的一本入門 JS 的一本書。（一定老老實(shí)實(shí)踏踏實(shí)實(shí)去學(xué)完）進(jìn)行多遍學(xué)習(xí)你會(huì)受益匪淺。
四個(gè)月前，我傻到 ES6 不知道是啥東西，前端有 JS 、HTML、CSS 了怎么蹦出來個(gè) ES6？納尼！我太難了，別再折磨我了，學(xué)的東西已經(jīng)夠多了。
好吧，ES5(ECMAScript5) 是 Javascript 的一個(gè)標(biāo)準(zhǔn)，可以理解為是 JavaScript 的一種規(guī)范，JS 所作所為要準(zhǔn)守 ES5 規(guī)范的，那么 ES6 毫無疑問就是 ES5 標(biāo)準(zhǔn)的升級(jí)版，里邊增加了很多 JavaScript 用法上的規(guī)范。
很多 ES6 是在 ES5 上“進(jìn)化”而來的，高效的學(xué)習(xí) ES6 不是單純的看視頻，去使用它，而是去了解它。如何了解它？
首先 ES6 的知識(shí)點(diǎn)基本解決了 ES5 中的一些缺點(diǎn)，1、也就是所謂的 ES6 的這個(gè)知識(shí)點(diǎn)出現(xiàn)的原因是什么？2、為什么要替換它？3、以后要超哪個(gè)方向去發(fā)展？那么你學(xué)習(xí) ES6 基本沒任何問題了。
JS 中的異步編程，一開始用 ES5 中的回調(diào)函數(shù)解決，但是回調(diào)函數(shù)有很大的缺點(diǎn)，比如 AJAX 多個(gè)請(qǐng)求之間存在依賴性，用回調(diào)函數(shù)出現(xiàn)回調(diào)地獄問題，那么 ES6 怎么解決這個(gè)問題呢？Promise 和 Genertor 出場(chǎng)了，你有可能不了解這兩個(gè)是什么，但是他要解決的問題就是解決回調(diào)函數(shù)的回調(diào)地獄問題。怎么解決的就涉及到怎么使用 Promise 以及 Promise 的原理，這不，一個(gè)知識(shí)點(diǎn)貫穿起來了，就是這么簡(jiǎn)單。
第三個(gè)問題，那么 JS 異步編程朝著什么方向發(fā)展呢？其實(shí)說白了就是想要難寫的異步寫起來更像是同步代碼一樣簡(jiǎn)單，比如：ES7 又出來 async、awite，其實(shí)你了解原理的話，就是一種 ES6 中 promise 和 Genertor 的語法糖形式，盡管你不會(huì)用，但是你了解了原理，那現(xiàn)學(xué)現(xiàn)用不在話下，不是我說的那么輕松，學(xué)起來比我說的還輕松，這些都是我四個(gè)月來從零學(xué)習(xí)前端到拿到滿意 offer 的總結(jié)的經(jīng)驗(yàn)以及入過的深坑，沒有添油加醋，全是原汁原味。
前端東西涉及到的很多，這三個(gè)是考試中最?？嫉?，而且是考的最深的，所以重點(diǎn)提到這三個(gè)技術(shù)。那么你會(huì)發(fā)現(xiàn)我學(xué)到了，也理解了，但是面試就是回答不正確，回答不上來，我明明心里很清楚，導(dǎo)致每一次面試自信心遞減。下邊就是小鹿的必殺技，如何根據(jù)知識(shí)點(diǎn)準(zhǔn)備面試？
前端知識(shí)點(diǎn)系統(tǒng)龐大，零碎的知識(shí)點(diǎn)居多，我前幾天整理就花費(fèi)了一個(gè)月的時(shí)間，但是這一個(gè)月想要掌握這些龐大的前端知識(shí)體系，那么就根據(jù)我總結(jié)的“必殺技”—— 前端知識(shí)樹。
首先，我們要將前端想象為一棵樹，我們所學(xué)的所有前端知識(shí)點(diǎn)就是樹的葉子和枝干，不斷學(xué)習(xí)前端的過程就是不斷地往我們的樹上掛載葉子的過程，我們可以通過樹根，將龐大的前端知識(shí)體系串聯(lián)起來，面試官問你啥，你都能從樹根說到樹枝再到樹葉，從樹葉到樹根，躺著問、站著問、蹲著問，隨便你怎么問我知識(shí)點(diǎn)，我都給你擴(kuò)展，還可能會(huì)引著面試官在我們的知識(shí)樹上跑，那在這棵樹上，就是你的天下。
老樣子，還是舉例子，每個(gè)零碎的知識(shí)點(diǎn)都將匯聚成一顆樹枝上，每個(gè)樹枝都是不同的分類。比如下圖，有關(guān) JS 的所有原型、原型鏈的零碎知識(shí)點(diǎn)，總結(jié)為一個(gè)枝干。
我們把瑣碎的知識(shí)點(diǎn)都?xì)w類劃分為枝干，當(dāng)枝干多了起來之后，我們?cè)賲R聚成一顆主枝干。
上邊很多的知識(shí)點(diǎn)，小鹿已經(jīng)在面試的時(shí)候整理完了，包括思維導(dǎo)圖、前端的學(xué)習(xí)路線。還有更多的前端基礎(chǔ)文章，以動(dòng)畫的形式進(jìn)行總結(jié)整理，希望對(duì)你的學(xué)習(xí)有幫助。
如：JS 中分為幾大重點(diǎn)內(nèi)容？我們會(huì)想到原型、閉包、this 上下文… 然后面試官問你，閉包是什么，然后你的思維跳到有關(guān)閉包的枝干上，去回答總結(jié)的閉包那些問題。
有一點(diǎn)需要注意，目前的枝干與枝干之間是由主枝干相連接的，我們要把枝干之間產(chǎn)生必要的連接，這樣，你會(huì)帶著面試官在這個(gè)龐大的前端知識(shí)樹上遨游，我就不信它不給你 offer，offer 不到你家難道去別人家？我才不信呢，哈哈哈！
每一次面試都是掛載、完善枝干的過程，雖然可能一次兩次面試沒入取你，但是你的知識(shí)體系得到完善，那就說明下一次拿到 offer 的幾率就大了。別以為 BAT 很難，如果你有大學(xué)充足的時(shí)間去專攻一門，BAT 對(duì)你來說都是小 K 死，我不是在開玩笑，之前和一個(gè)華為的講師聊過，他就是這么說的，而且這種學(xué)習(xí)方法得到了他的認(rèn)可，所以有 BAT 的夢(mèng)你就按照這個(gè)方法去追，早晚有一天你會(huì)實(shí)現(xiàn)夢(mèng)想的。
我…, 不知不覺寫了那么多了，看了看表，加上昨天晚上，前天晚上，總結(jié) + 編輯共八個(gè)小時(shí)，這貨干的硬邦邦的，但是還有很多沒分享，那屬于次要的，后續(xù)繼續(xù)分享，如果有什么問題也可以和小鹿一起交流，畢竟每一種學(xué)習(xí)方法都是不斷的切磋總結(jié)出來的，沒有天才，就看你有沒有去用心“刻意練習(xí)”，今天的分享就到這，喜歡的朋友們點(diǎn)贊就是最大的支持。
聯(lián)系客服
