摘要：張?chǎng)涡窭蠋煹奈恼聦懙暮馨?，解決了我的許多困惑。所以，基礎(chǔ)知識(shí)的牢固就顯得尤為重要是個(gè)不怎么聽話的孩子，總是會(huì)搞出一些奇奇怪怪的事情來(lái)張?chǎng)涡窭蠋熓昴ヒ粍?，鉆研的魔法，可見其中技術(shù)細(xì)節(jié)有多復(fù)雜。

??從實(shí)習(xí)算起，到現(xiàn)在工作了也有一年半的時(shí)間了，在這期間，深深感受到了前端領(lǐng)域的飛速發(fā)展，在這里記錄一下自己的成長(zhǎng)歷程，算是對(duì)知識(shí)的一個(gè)梳理，也希望幫助到剛?cè)胄械耐瑢W(xué)們。說(shuō)來(lái)慚愧，大學(xué)里并沒(méi)有涉及前端的知識(shí)，當(dāng)時(shí)對(duì)自己的定位很迷茫，不知道畢業(yè)之后何去何從。所以盲目的報(bào)了很多學(xué)習(xí)班，還考了思科認(rèn)證的網(wǎng)絡(luò)工程師，雖然沒(méi)走網(wǎng)絡(luò)方向，但是這一塊的知識(shí)在工作后確實(shí)對(duì)我的幫助很大，畢竟網(wǎng)絡(luò)是基礎(chǔ)。

??那時(shí)候，在我的認(rèn)知里，前端只是寫寫頁(yè)面，做做交互，切切圖。那時(shí)候，我還沒(méi)聽說(shuō)過(guò)什么腳手架，什么構(gòu)建工具，甚至沒(méi)聽說(shuō)過(guò)ES6。覺(jué)得jQuery真的是救世主一樣的存在。

??第一天進(jìn)入公司，心情是完全不一樣的，盡管那時(shí)候沒(méi)有小豬佩奇的手表，但也深感自己是個(gè)社會(huì)人了。

??入職第一天，我被要求先搭開發(fā)環(huán)境，給了我一個(gè)Excel表格，是一個(gè)長(zhǎng)長(zhǎng)的清單，一個(gè)一個(gè)安裝，然后拉取代碼，還要執(zhí)行一大堆的命令，這都是什么鬼東西！完全不知道自己在干什么。就記得一直報(bào)錯(cuò)，各種看不懂！不管怎么說(shuō)，花了整整一天，總算是搞定了！就這樣，憑著崴腳的基礎(chǔ)就上手了。剛開始看不懂別人寫的代碼，全憑自己天馬行空的想法去做，一行行流水賬似的代碼寫的我開始懷疑人生。

??直到有一天，leader看了我寫的一坨代碼之后，點(diǎn)了點(diǎn)頭，然后選中，刪除。緊接著，畫了一個(gè)下劃線，又點(diǎn)了個(gè)小數(shù)點(diǎn)，后面還跟了個(gè)單詞，寥寥幾句，代碼居然還能正常跑通！我勒個(gè)去！代碼原來(lái)還能這么寫！從此開始，我認(rèn)識(shí)了Underscore和lodash。在沒(méi)有使用ES6的時(shí)候，這個(gè)庫(kù)真的是萬(wàn)能工具箱，操作起數(shù)據(jù)來(lái)得心應(yīng)手，只要把數(shù)據(jù)結(jié)構(gòu)整明白，剩下的都是一句話的事。那時(shí)候，真的是喜歡上了操作數(shù)據(jù)的過(guò)程。但是目前看來(lái)，babel的引入，代碼里開始支持ES6、7的語(yǔ)法，很多Underscore中的高頻函數(shù)都被原生實(shí)現(xiàn)了，為了縮減代碼體積，這樣的類庫(kù)在逐漸淡出人們的視線。說(shuō)道這里，必須要提一提阮一峰老師的《ES6入門教程》了，不僅詳細(xì)介紹了語(yǔ)法內(nèi)容，還給出了大量的使用案例和技巧，可以說(shuō)是一本經(jīng)典之作了。

??入職不久后，，我接觸到了第一個(gè)前端框架Angular1.x,基于yeoman腳手架，整合了grunt，那時(shí)候才知道了前端還有構(gòu)建這個(gè)概念。相較于grunt晦澀難懂的配置文件，gulp的管道思想似乎更容易讓人理解。使用了框架，數(shù)據(jù)更新后頁(yè)面自己就變了，也不用再去操作dom。在grunt和各種插件的幫助下，代碼還可以邊修改，邊自動(dòng)刷新，哇！真的是高效！又一次刷新了我對(duì)前端的認(rèn)識(shí)。然后開始惡補(bǔ)框架的知識(shí)，各種指令，各種service，讓開發(fā)過(guò)程越來(lái)越簡(jiǎn)單。我們不再需要關(guān)注過(guò)多諸如事件委托之類的優(yōu)化，框架都會(huì)自己做掉，于是有更多的時(shí)間放在了業(yè)務(wù)本身。Angular1.x是不支持服務(wù)端渲染的，也就是說(shuō)，它對(duì)seo不友好，所以當(dāng)時(shí)我們使用jade來(lái)渲染需要服務(wù)端直出的頁(yè)面，依稀記得嚴(yán)格的語(yǔ)法縮進(jìn)搞得我痛不欲生。

??Sass和less等的使用，讓css變得更強(qiáng)大，配合postcss的使用，我不再關(guān)注不同瀏覽器的差異。在重度依賴bootstrap的時(shí)候，柵格布局的出場(chǎng)率總是那么高。后來(lái)，我認(rèn)識(shí)了flex，生活仿佛都變得更美好了！

??之后，我們開始使用UI組件來(lái)提升效率。UI組件庫(kù)可以說(shuō)是遍地開花。在PC端，Element UI和Ant Design是比較主流的。實(shí)際使用的時(shí)候，還是要結(jié)合自身業(yè)務(wù)和使用場(chǎng)景，例如是否需要支持ssr。后來(lái)我也使用過(guò)一些移動(dòng)端和小程序的組件庫(kù)，總結(jié)一下，一定要使用長(zhǎng)期維護(hù)的，issue更新較快的，不然遇到坑會(huì)很煩惱，別問(wèn)我是怎么知道的。

????再后來(lái)，我逐漸能勝任更多的任務(wù)，開始參與數(shù)據(jù)可視化這塊的開發(fā)，于是，我又見到了echarts和d3.js。說(shuō)起d3.js，真的是讓我愛(ài)恨交加。為了畫出我想要的圖形，我又找回了已經(jīng)還給老師的數(shù)學(xué)知識(shí)，每天就像在做數(shù)學(xué)卷子，似乎又回到了那個(gè)高中的時(shí)代！還把svg和canvas的基本概念也擼了一遍。張?chǎng)涡窭蠋煹膕vg文章寫的很棒，解決了我的許多困惑。

??16年小程序首發(fā)的時(shí)候，為了探索流量紅利，我們也想要搶占這個(gè)首發(fā)的優(yōu)勢(shì)，那時(shí)候，我輔助開發(fā)小程序，文檔看了好幾遍，還是理不清小程序的思想。而且由于首發(fā)之后，維護(hù)的比較少，所以也就再?zèng)]過(guò)多涉獵。今年，小程序突然大規(guī)模爆發(fā)，我又開始了重新整理小程序的內(nèi)容，時(shí)隔近一年，再次打開文檔，原先看了一周都不明白的文檔，竟然可以兩小時(shí)上手了，而且自己又獨(dú)立開發(fā)了一個(gè)完整的小程序，或許這就是成長(zhǎng)。也有很多小程序的框架涌現(xiàn)出來(lái)，比如官方的wepy,美團(tuán)的mpvue。類vue的思想讓開發(fā)者的學(xué)習(xí)成本再次降低。對(duì)于最近炒的也挺火的pwa和快應(yīng)用，個(gè)人建議需要用的時(shí)候補(bǔ)充即可，沒(méi)有業(yè)務(wù)需求自己去實(shí)踐成長(zhǎng)速度是比較慢的，而且容易遺忘。

??17年是Vue輝煌的一年，這一年來(lái)，它的生態(tài)系統(tǒng)如雨后春筍般的發(fā)展。webpack也似乎成了前端er的標(biāo)配。Vuex借助Flux的思想而設(shè)計(jì)。它改變了我對(duì)狀態(tài)數(shù)據(jù)管理的認(rèn)識(shí)。在龐大的應(yīng)用面前，狀態(tài)管理變得讓人頭疼。Vuex集中化的管理可謂是一劑良藥！為了支持SEO，我在項(xiàng)目中使用了Nuxt實(shí)現(xiàn)了前后端同構(gòu)。第一次聽說(shuō)同構(gòu)這個(gè)概念還是在17年的全國(guó)前端開發(fā)者大會(huì)上，那時(shí)候感覺(jué)離自己很遙遠(yuǎn)?，F(xiàn)在回憶，當(dāng)時(shí)會(huì)議分享的很多內(nèi)容都在一年內(nèi)飛速的發(fā)展并逐漸應(yīng)用起來(lái)。所以，多參加一些交流分享會(huì)還是很有必要的。

??后來(lái)嘗試自己去做一些東西的時(shí)候，開始涉及到服務(wù)端和運(yùn)維相關(guān)的知識(shí)，一點(diǎn)一滴去優(yōu)化每一個(gè)環(huán)節(jié)。逐漸去提升性能。從頁(yè)面上的小圖標(biāo)開始。不再使用大量的png小圖片，而是使用iconfont，減少http請(qǐng)求，而且矢量可以保障顯示的清晰度；代碼打包壓縮合并，自動(dòng)上傳到對(duì)象存儲(chǔ)，減小服務(wù)器壓力，并使用cdn進(jìn)行加速；使用gzip壓縮代碼減少網(wǎng)絡(luò)傳輸量；nginx做反向代理和緩存；pm2守護(hù)node進(jìn)程，保證服務(wù)的可用性；使用docker鏡像部署服務(wù)簡(jiǎn)化部署流程而且避免環(huán)境差異導(dǎo)致的問(wèn)題等等。總之每個(gè)環(huán)節(jié)都是一門學(xué)問(wèn)。

??個(gè)人感覺(jué)這一年多來(lái)，除了學(xué)會(huì)了不少新東西，更重要的是學(xué)會(huì)了如何去學(xué)習(xí)新知識(shí)，如何去發(fā)現(xiàn)未知的領(lǐng)域，如何去解決問(wèn)題。剛開始，遇到問(wèn)題直接百度或者谷歌關(guān)鍵詞，或者stackoverflow找一把，選出高票回答，總能有效的解決問(wèn)題。但是，很多時(shí)候都不知道具體的原因。

??在同事的引導(dǎo)下，我逐漸開始重視文檔這個(gè)東西。最初我認(rèn)為他只是寫給初學(xué)者看的，枯燥乏味。但事實(shí)上，文檔寫明了需要的大部分東西。特別是第三方插件的文檔，如果遇上問(wèn)題解決不了，那就把文檔過(guò)一遍。還沒(méi)有解決？那么，再細(xì)致地看一遍！還是不行？打開github，去插件的issue里面搜一搜，如果還是不行，再去借助搜索引擎等的幫助。如果源碼不復(fù)雜，就看看源碼怎么寫的吧！這是我總結(jié)的比較快速定位和解決問(wèn)題的方式，屢試不爽。在使用現(xiàn)成的插件的時(shí)候，嘗試猜測(cè)代碼的實(shí)現(xiàn)原理，有條件可以閱讀源碼，這樣會(huì)有利于規(guī)避錯(cuò)誤的的使用方式，也更容易提升自己。所謂錯(cuò)誤的使用方式，我這么解釋一下吧，如果你發(fā)現(xiàn)你的代碼變得復(fù)雜而又難看，像流水賬，那么嘗試去換個(gè)角度實(shí)現(xiàn)它吧，要始終相信代碼里有魔法的存在！

??前端這個(gè)領(lǐng)域的發(fā)展日新月異，不必要精通每個(gè)前端框架，而是要理解框架的設(shè)計(jì)思想，理解他們的差異。而且無(wú)論現(xiàn)代前端技術(shù)再怎么玩，終歸還是要回歸到html，css和javascript上來(lái)。所以，基礎(chǔ)知識(shí)的牢固就顯得尤為重要！

??css是個(gè)不怎么聽話的孩子，總是會(huì)搞出一些奇奇怪怪的事情來(lái)！張?chǎng)涡窭蠋熓昴ヒ粍?，鉆研css的魔法，可見其中技術(shù)細(xì)節(jié)有多復(fù)雜。當(dāng)然，對(duì)于大部分開發(fā)者來(lái)說(shuō)，可能沒(méi)那么多時(shí)間與精力來(lái)投做到這樣，但是大部分的基礎(chǔ)概念還是要爛熟于心的。javascript嘛，業(yè)界經(jīng)典的兩本書（紅寶書、犀牛書）選一本啃好了（慚愧慚愧，我還沒(méi)啃完）！但是對(duì)于入門者來(lái)說(shuō)，《head first》系列的可能更適合，一上來(lái)就讀經(jīng)典，難免會(huì)望而卻步。入門的時(shí)候還讀過(guò)《JavaScript DOM編程藝術(shù)》，也推薦給初學(xué)者。

??設(shè)計(jì)模式這個(gè)東西不算神秘，如果你是一個(gè)有追求的人，很可能不知不覺(jué)已經(jīng)在代碼里面使用到了，只不過(guò)你不認(rèn)識(shí)他而已。比起后端，前端對(duì)于設(shè)計(jì)模式的使用不算太多。多了解一下，可以讓你更容易理解大神的代碼，而且，自己寫的代碼也會(huì)越來(lái)越漂亮。這里安利一把曾探老師寫的《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》。

??數(shù)據(jù)結(jié)構(gòu)就不多說(shuō)了，還是推薦一本書吧，《學(xué)習(xí)javascript數(shù)據(jù)結(jié)構(gòu)與算法》，這本書很適合入門者，進(jìn)階的話，大家給我推薦推薦啦。

??http也是比較重要的一門知識(shí)，比如http緩存，緩存的重要性我就不多講了。之前讀過(guò)《圖解http》這本書，讀漫畫一樣的就下來(lái)了，通俗易懂。

??突然間意識(shí)到，文章里安利了太多的書籍，有點(diǎn)打廣告的嫌疑。各位看官莫見怪，這里列出的都是本人讀過(guò)而且覺(jué)得有幫助的，大家選擇性采納。聲明一下，我真不是賣書的！

??我有個(gè)習(xí)慣，就是每隔一段時(shí)間就回去看一波招聘的JD和面經(jīng)，并不是為了跳槽，而是關(guān)注一下最近大家都需要什么樣的人才，需要補(bǔ)充自己哪方面的知識(shí)。知己知彼，方能百戰(zhàn)百勝！平日里還喜歡逛技術(shù)論壇，看看大家都在玩啥黑科技。有什么技術(shù)沙龍偶爾也去參加一下，得時(shí)刻關(guān)注技術(shù)的發(fā)展，學(xué)習(xí)大廠的解決方案。

??最后感謝那些一路走來(lái)給予我?guī)椭娜耍?/p>

??好了，今天的分享就到這里，欲知更多技術(shù)細(xì)節(jié)，且聽下回分解！