如果身邊沒有一個(gè)能夠請(qǐng)教的人断箫，可以到這個(gè)WEB前端裙，里面有最新的學(xué)習(xí)路線和教程秋冰，可以跟著學(xué)仲义，有什么不懂的地方可以隨時(shí)在里面問，大家都會(huì)幫忙解答剑勾，下面就是這個(gè)WEB前端裙埃撵。

先是一個(gè)---518

中是一個(gè)---672

后是一個(gè)---693

NO.1

0x00 先說結(jié)論

我們可以把學(xué)習(xí)路線比作游戲中的段位上分，在不同的分段都有自己的定位和要鍛煉的事情：

青銅?-?從零開始小學(xué)生：懷著滿腔的熱血甥材，看到了這一個(gè)行業(yè)的希望和未來盯另，準(zhǔn)備開始學(xué)習(xí) Web 開發(fā)知識(shí)。

先通過 w3cschool 等免費(fèi)學(xué)習(xí)資源把 HTML洲赵、CSS 和 JavaScript 的基本操作學(xué)會(huì)了

寫一個(gè)簡(jiǎn)單的表白頁面送給你的女/男朋友，展示一下自己努力的成果商蕴，如果沒有就當(dāng)我沒說

白銀?- 懵懵懂懂初學(xué)者：懂得如何使用 HTML叠萍、CSS 和 JavaScript 三大件來實(shí)現(xiàn)基本頁面開發(fā)功能

選擇一個(gè)可以覆蓋多種場(chǎng)景、可以隨自己意愿調(diào)整難度的項(xiàng)目嘗試實(shí)現(xiàn)绪商，如博客系統(tǒng)苛谷、記賬本、Markdown 編輯器等

從 React 和 Vue 這兩個(gè)框架中選擇一個(gè)進(jìn)行學(xué)習(xí)

黃金?- 輕車熟路新玩家：懂得使用框架來實(shí)現(xiàn)上面所舉例項(xiàng)目

學(xué)習(xí) Redux格郁、Vuex 或者 MobX 等狀態(tài)管理工具腹殿，并將他們使用到前面的項(xiàng)目中

思考狀態(tài)管理工具為你的項(xiàng)目帶來了什么好處

鉑金 V?- 初出茅廬新司機(jī)：?懂得如何使用腳手架創(chuàng)建項(xiàng)目，并且能將代碼結(jié)構(gòu)根據(jù)模塊化的思想進(jìn)行安排

學(xué)習(xí) TypeScript例书，對(duì)前面的項(xiàng)目進(jìn)行重寫锣尉，注重對(duì)數(shù)據(jù)結(jié)構(gòu)和類型的控制

學(xué)習(xí) Node.js，試著配合數(shù)據(jù)庫實(shí)現(xiàn)一個(gè)比博客系統(tǒng)更為復(fù)雜的 CMS（內(nèi)容管理系統(tǒng)）决采，如 圖書館管理系統(tǒng)自沧、倉庫管理系統(tǒng)

鉑金 I?- 基本上手好司機(jī)：如果是懂得如何利用 Node.js 或 TypeScript 編寫業(yè)務(wù)代碼的

思考在前面使用框架開發(fā)的項(xiàng)目中，有哪些代碼是重復(fù)冗余的树瞭，有哪些邏輯是可以在多個(gè)組件之間共用的

學(xué)習(xí)利用 ES2015 或更新的 JavaScript 標(biāo)準(zhǔn)拇厢，逐步替換使用框架所編寫的代碼

鉆石 V?- 淡定自然老司機(jī)：如果是對(duì)邏輯抽象爱谁、模塊封裝有了一定的理解和經(jīng)驗(yàn)的

思考如何使用純 JavaScript 對(duì)業(yè)務(wù)組件中的非渲染、非 DOM 相關(guān)代碼進(jìn)行抽象

引入單元測(cè)試工具孝偎，對(duì)純邏輯代碼進(jìn)行測(cè)試访敌，爭(zhēng)取覆蓋率達(dá)到 80% 以上

鉆石 I?- 賽道新手初學(xué)者：如果上面的條件你都已經(jīng)滿足了

?思考不同的代碼哲學(xué)（OO、FP 等）衣盾、不同的代碼結(jié)構(gòu)（MVC捐顷、MVVM 等）的區(qū)別

思考不同的框架之間設(shè)計(jì)的初衷衅金，思考不同的編程語言中對(duì)同一類問題不同解法的區(qū)別

到這里我劃了一條從 0 到高級(jí)前端工程師級(jí)別的純技術(shù)路線襟衰。相信有不少有經(jīng)驗(yàn)的同學(xué)會(huì)發(fā)現(xiàn)中間我省略了不少內(nèi)容豺型，但也不難發(fā)現(xiàn)路線中從前半段的“學(xué)習(xí)”逐步變成后半段的“思考”特纤。優(yōu)秀的工程師除了需要有在純技術(shù)領(lǐng)域的沉淀以外墙贱，還需要更多對(duì)技術(shù)绩聘、團(tuán)隊(duì)镶摘、ROI（投資回報(bào)率）的思考砾脑，當(dāng)然這依然不足以支撐我們平穩(wěn)地渡過“程序員 35 歲危機(jī)”据悔，前面的路還有很長(zhǎng)传透，鉆石往上還有王者呢，誰說程序員就是青春飯碗的极颓？

回想起很多年前我也跟你一樣是一個(gè)完全的新手朱盐，從 0 開始慢慢自學(xué)摸索 Web 開發(fā)，甚至后來我也沒有進(jìn)入科班學(xué)習(xí)計(jì)算機(jī)菠隆，那么來聽聽我作為一個(gè)“前人”是如何完全靠自學(xué)至今的故事吧兵琳。

NO.2

0x01 我的從 0 開始

我是一個(gè)完全從自學(xué)開始的前端工程師，想起來第一次接觸前端就是初中那會(huì)特別流行合租 VPS 然后注冊(cè)一個(gè) .tk 的免費(fèi)域名骇径。而作為一個(gè)剛?cè)腴T Web 開發(fā)不久的小屁孩來說躯肌，用這種方式一探“大人的世界”屬實(shí)讓人興奮。而當(dāng)時(shí)最流行的博客管理軟件就是用 PHP 寫的 WordPress破衔，作為一個(gè)十分成熟的 CMS 軟件來說 WordPress 當(dāng)時(shí)就有了非常豐富的社區(qū)資源清女，比如主題、模板晰筛、插件等等嫡丙。而作為一個(gè)十分注重個(gè)性化的小屁孩來說，當(dāng)然是要自己做一個(gè)主題的岸恋凇曙博！于是我就從此踏上了 Web 開發(fā)的不歸路，在此之前我所接觸的都是 Visual Basic 這樣的 Native 的語言卦方。

以 WordPress 主題作為切入點(diǎn)羊瘩，我開始學(xué)習(xí) PHP 用于調(diào)用 WordPress 的 API 并輸出內(nèi)容、學(xué)習(xí) HTML 用于寫主題的模板、學(xué)習(xí) CSS 用于“裝潢”我的博客尘吗、學(xué)習(xí)?jQuery?用于實(shí)現(xiàn)頁面動(dòng)態(tài)效果逝她。是的，那個(gè)時(shí)候基本上大部分人接觸的是 jQuery 而不是 JavaScript睬捶，一個(gè)$?函數(shù)就可以完成非常多的效果這讓我第一次感受到了“框架”所帶來的價(jià)值黔宛。于是便一步一步地發(fā)生了以下事情（不一定完全對(duì)，畢竟時(shí)間過太久了）：

我發(fā)現(xiàn)頁面上的一些樣式效果無法在 IE 瀏覽器上正常顯示擒贸，于是我就開始到網(wǎng)上學(xué)習(xí) CSS 在 IE 的各種特殊處理臀晃，包括 reset.css、normalize.css 等工具的使用介劫；

每次點(diǎn)擊鏈接都要刷新頁面徽惋，在那個(gè)網(wǎng)速不怎么好的年代體驗(yàn)非常糟糕，于是乎就開始研究怎么用 jQuery/JavaScript 實(shí)現(xiàn)不需要刷新頁面的情況下切換頁面的內(nèi)容座韵；

通過查看文檔發(fā)現(xiàn)瀏覽器支持一種叫做 XMLHTTPRequest 的技術(shù)险绘，可以讓我們不需要通過跳轉(zhuǎn)的方式從服務(wù)器獲取到信息，從這里開始了解到 HTML誉碴、XML 和 JSON 三種不同格式的區(qū)別宦棺；

第一次知道了可以通過服務(wù)器傳遞 JSON 格式的純數(shù)據(jù)，然后前端通過 JavaScript 對(duì)數(shù)據(jù)進(jìn)行解析黔帕，并且結(jié)合前端的模板引擎渲染成完整的 HTML代咸；

從這里又可以學(xué)習(xí)到如何通過 URL 中的 path、query成黄、hash 以及 POST 和 PUT 請(qǐng)求正文等信息向服務(wù)器傳遞信息呐芥，服務(wù)器通過這些信息動(dòng)態(tài)地對(duì)各種數(shù)據(jù)進(jìn)行處理并返回結(jié)果；

SPA（Single Page Application）開發(fā)習(xí)慣初見雛形慨默；

這樣我就來到了“白銀”階段了贩耐。

NO.3

0x02 接觸 Node.js

當(dāng)我正在愉快地設(shè)計(jì)著 WordPress 的自定義主題時(shí)，偶然間我在某前端網(wǎng)站上了解到了一個(gè)新的技術(shù) —— Node.js厦取。與它的相遇改變了我以后的學(xué)習(xí)路徑，影響至今管搪。2009 年 Ryan Dahl 發(fā)布了一個(gè)基于 Chrome JavaScript V8 引擎開發(fā)的程序運(yùn)行環(huán)境 Node.js虾攻，它允許開發(fā)者在除了瀏覽器以外的地方運(yùn)行 JavaScript 語言，并且提供一些標(biāo)準(zhǔn)庫允許 JavaScript 腳本啟動(dòng)進(jìn)行啟動(dòng)一個(gè) HTTP 服務(wù)端應(yīng)用這種以前在瀏覽器無法完成的事情更鲁。

這一份代碼是 2010 年寫在 Node.js 官網(wǎng)的一段實(shí)例代碼霎箍，機(jī)緣巧合之下我被這么一段簡(jiǎn)單的代碼深深地吸引住了，雖然當(dāng)時(shí)安裝它仍需要從 GitHub 上克隆整個(gè)項(xiàng)目代碼到本地并依次運(yùn)行以下指令：

這一次編譯就得花上至少十分鐘澡为，但完成安裝后運(yùn)行上面的一段代碼漂坏，并在瀏覽器中打開http://127.0.0.1:8124/，然后在瀏覽器上看到Hello World?字樣時(shí)仿佛新世界的門打開了。因?yàn)楫?dāng)時(shí)我所接觸過的服務(wù)端程序只有 PHP顶别，而 PHP 本質(zhì)上就是一個(gè)模板引擎谷徙，它并不能很直觀地處理請(qǐng)求本身而是借助 CGI 進(jìn)行響應(yīng)。能做更多的事情驯绎，這件事情對(duì)剛學(xué)習(xí)編程不久的新手來說是具有很大誘惑力的完慧。

從這里開始，Node.js 配合 npm 便開始了長(zhǎng)達(dá) 10 年的快速發(fā)展剩失。從純服務(wù)端應(yīng)用開發(fā)屈尼，到開發(fā)工具、工程工具拴孤，再到如今的 FaaS（Function as a Service脾歧，Serverless）開發(fā)方式。Node.js 已經(jīng)成為 Web 工程師不可或缺的一項(xiàng)技能演熟，不管是用來開發(fā)服務(wù)端應(yīng)用還是開發(fā)工具類應(yīng)用鞭执，甚至是使用 Electron 開發(fā)桌面端應(yīng)用還是配合 React Native 開發(fā)移動(dòng)端 App，Node.js 能讓前端工程師了解更多系統(tǒng)級(jí)別的概念绽媒，如網(wǎng)絡(luò)蚕冬、I/O、內(nèi)存是辕、文件系統(tǒng)等等囤热，這些很多都是原本在瀏覽器端上看不到的。而學(xué)習(xí)這些知識(shí)對(duì)你理解前端開發(fā)背后的一些原理有非常好的價(jià)值获三，就跟學(xué)習(xí)算法一樣旁蔼。

結(jié)論：請(qǐng)學(xué)習(xí) Node.js 和其中涉及到的一些基本計(jì)算機(jī)原理。

NO.4

0x03 框架時(shí)代

當(dāng)我在做 WordPress 主題的時(shí)候疙教，絕大部分的主題開發(fā)者都會(huì)在前端做一些簡(jiǎn)單的效果棺聊，甚至有甚者會(huì)通過 JavaScript 實(shí)現(xiàn)一些原本只能通過后端來完成的事情，比如文章列表贞谓、文章內(nèi)容的加載和渲染限佩。而當(dāng)年這些主題開發(fā)者基本上都會(huì)使用 jQuery 來進(jìn)行這些 JavaScript 的操作，因?yàn)榧兪謱?JavaScript 在當(dāng)時(shí)來說非常的繁瑣（ES4時(shí)代裸弦，很多現(xiàn)在被廣泛使用的原生 API 都仍未具備）所以當(dāng)時(shí) jQuery 就是大家的首選方案祟同。

從非常早的 PrototypeJS、后來的 jQuery理疙、進(jìn)入 MVC 時(shí)代的 Backbone晕城，AngularJS 開啟 MVVM 模式，React 引入 FP 的概念窖贤，Vue 成功開啟了漸進(jìn)式開發(fā)體驗(yàn)的道路砖顷。一路下來一地的雞毛贰锁，被各路人馬詬病前端領(lǐng)域一個(gè)月開發(fā)一個(gè)新框架，“學(xué)不動(dòng)了”滤蝠。然而作為一個(gè)也寫過框架豌熄、寫過工具類庫的開發(fā)者，我很喜歡用一個(gè)經(jīng)常用于泛科技領(lǐng)域的例子來類比前端領(lǐng)域：

科技的終極目標(biāo)几睛，就是讓人民感覺不到科技房轿。

jQuery 時(shí)代，前端開發(fā)者使用 JavaScript 的模式是從頁面中獲取 DOM 元素所森，添加事件囱持，然后通過class?和style?對(duì)頁面進(jìn)行動(dòng)態(tài)地變更，以完成對(duì)用戶行為的響應(yīng)焕济；

Backbone 時(shí)代纷妆，原本用在桌面端軟件開發(fā)中的 MVC 模式被引入到了前端開發(fā)中，前端開發(fā)者們發(fā)現(xiàn) Web 開發(fā)的復(fù)雜度已經(jīng)需要用這些更成熟的開發(fā)模式進(jìn)行管理了晴弃；

AngularJS 時(shí)代掩幢，從這里開始 Google 把數(shù)據(jù)雙向綁定模式帶到前端開發(fā)中，將原本需要通過 JavaScript 控制 DOM 元素這一繁瑣的操作變成了只需要關(guān)心 Model 層需要改動(dòng)什么內(nèi)容即可上鞠。而?Vue?則將這種模式的開發(fā)成本降低到了一種相當(dāng)可觀的程度际邻，讓很多新手開發(fā)者也能很簡(jiǎn)單地入手這種便捷的開發(fā)模式。React 時(shí)代芍阎，F(xiàn)acebook 的科學(xué)家們把函數(shù)式編程的思想引入到前端開發(fā)中世曾，注重的是數(shù)據(jù)鏈路的可跟蹤、可回溯谴咸、可管理轮听，讓整個(gè)數(shù)據(jù)鏈路是盡可能以單鏈路流轉(zhuǎn)。

雖然前端領(lǐng)域常被說“一個(gè)月一個(gè)新框架”岭佳，但實(shí)際上每一個(gè)框架在迭代的過程中都是解決了它們所在業(yè)務(wù)場(chǎng)景的實(shí)際需求的血巍，并不是“拍腦袋”地想要把每一個(gè)技術(shù)細(xì)節(jié)做出一個(gè) break change。

而目前我目前推薦的學(xué)習(xí)的框架是 React 和 Vue：

同樣都是目前最流行的框架之一珊随，而且可以預(yù)見未來 3~5 年內(nèi)都是能滿足找工作的需求的述寡；

React：引入函數(shù)式編程（Functional Programming）的概念，使得寫代碼的思路更加嚴(yán)謹(jǐn)叶洞，更具有可維護(hù)性和邏輯可導(dǎo)性辨赐；

Vue：將 MVVM 模式變得非常簡(jiǎn)單易于入手，把 Progressive JavaScript Framework 的定位實(shí)踐得非常到位京办。且如今 Vue 3.0 的 Composition API 更是在某種程度上將 Hooks 的玩法實(shí)現(xiàn)得比 React Hooks 更優(yōu)；

結(jié)論：請(qǐng)不要害怕學(xué)習(xí)帆焕！不要懼怕新技術(shù)惭婿！

NO.5

0x04 工程之路

雖然我在接觸了框架和 Node.js 之后不恭，發(fā)現(xiàn) JavaScript 除了能實(shí)現(xiàn)一般只用于展示內(nèi)容和呈現(xiàn)簡(jiǎn)單交互以外還能做更多的事情。但本質(zhì)上還是圍繞著多個(gè)頁面進(jìn)行頁面上 DOM 元素的控制财饥，而直到我打開了 Google 的一些網(wǎng)站時(shí)换吧，我才發(fā)現(xiàn)原來網(wǎng)站除了能叫頁面以外，還能稱之為“應(yīng)用”钥星。自從 Google 上線了一個(gè)完全不需要刷新頁面就能完成所有事情而且體驗(yàn)很不錯(cuò)的 GMail 之后沾瓦，我們發(fā)現(xiàn)網(wǎng)頁原來也是可以承載那么復(fù)雜的邏輯和應(yīng)用場(chǎng)景的。大家的熱情異常地高漲谦炒，想著能不能讓自己所負(fù)責(zé)的項(xiàng)目也有這么厲害高級(jí)的樣子贯莺。但隨著項(xiàng)目不斷地復(fù)雜，代碼規(guī)模也變得非常難以管理宁改，而這個(gè)時(shí)候就需要工程化的引入缕探。工程化協(xié)作

對(duì)于企業(yè)來說除了研發(fā)效率要足夠高以外，研發(fā)鏈路的安全还蹲、合規(guī)也是同樣重要的爹耗。什么叫安全合規(guī)？可管理的代碼版本谜喊、可控制的發(fā)布流程潭兽、可管控的灰度機(jī)制，都是大廠用于保證項(xiàng)目流程穩(wěn)定進(jìn)行的必要工具斗遏。有很多初學(xué)者或者還沒有大公司經(jīng)驗(yàn)的同學(xué)在寫項(xiàng)目時(shí)都是單打獨(dú)斗的山卦，但更多的一線項(xiàng)目都需要至少 2~3 個(gè)甚至更多的人員一同參與開發(fā)的。而這種時(shí)候最易，因?yàn)槊總€(gè)人的水平和開發(fā)習(xí)慣都是不一致的怒坯，而這些不一致就直接導(dǎo)致整體研發(fā)效率和項(xiàng)目進(jìn)度受到極大的影響。所以就需要一種能夠讓大家在一個(gè)水平線上進(jìn)行開發(fā)的模式藻懒，工程化需求便應(yīng)運(yùn)而生剔猿。

版本控制

Git：GitHub、GitLab嬉荆、Coding……

SVN：BitBucket归敬、Google Code……

代碼樣式檢查工具 JavaScript/TypeScript：ESLint

測(cè)試工具

單元測(cè)試：Karma、Jest鄙早、Mocha……

持續(xù)集成：CI

……

工程化開發(fā)工具

從直接將 JavaScript 代碼用<script>?標(biāo)簽汪茧，到需要將 jQuery 文件和主要程序文件分別引入，再到 Node.js 出現(xiàn)后使用 npm 進(jìn)行依賴庫管理并使用 webpack 進(jìn)行打包和壓縮限番。工程類工具的發(fā)展見證著前端工程近十年的發(fā)展歷史舱污，對(duì)目前我們所常用的工程工具有更好的了解和實(shí)踐，絕對(duì)是通往優(yōu)秀路上不可或缺的一步弥虐。

依賴包管理工具：npm扩灯、yarn

打包工具：webpack媚赖、rollup

腳手架工具：create-react-app……

工程化開發(fā)語言

相信很多同學(xué)都聽說過 JavaScript 誕生之初的一些軼事，比如根本沒有特別多的嚴(yán)謹(jǐn)思考珠插，或者在非常多的場(chǎng)景中十分地晦澀惧磺，比如隱性轉(zhuǎn)換等。有人認(rèn)為 JavaScript 能發(fā)展到如今的地位跟它的這種“靈活度”或者“松散度”有關(guān)聯(lián)捻撑，雖然在某種程度上確實(shí)因?yàn)檫@種特性造成的 JavaScript 學(xué)習(xí)門檻比較低而間接導(dǎo)致磨隘。但就如我上面所說，當(dāng)項(xiàng)目規(guī)模和人員規(guī)模不斷發(fā)展乃至膨脹過后顾患，這些特性會(huì)逐漸表現(xiàn)出來非常糟糕的體驗(yàn)：

團(tuán)隊(duì)之間因?yàn)闆]有良好的技術(shù)文檔沉淀番捂，信息不對(duì)等的情況直接導(dǎo)致代碼在沒有良好的單元測(cè)試時(shí)出現(xiàn)邏輯沖突；

第三方依賴庫的 API 在設(shè)計(jì)上大量使用了 JavaScript 松散的特性描验，導(dǎo)致使用方在引用時(shí)頻繁出現(xiàn)“迷惑”的狀態(tài)白嘁；

當(dāng)需要使用 JavaScript 與其他語言（特別是強(qiáng)類型語言）進(jìn)行交互時(shí)，JS 過于松散的習(xí)慣會(huì)讓對(duì)接方感到非常迷惑膘流，對(duì)于雙方的實(shí)際接入成本會(huì)比前期預(yù)估的大得多絮缅；

為了解決這種情況，來自不同編程領(lǐng)域的大牛們都紛紛開始想辦法呼股，于是乎便誕生了非常多的“輪子”：

Java 系：Scala.js耕魄、ClojureScript

Go 系：GopherJS

Microsoft：TypeScript

Facebook：Flow、Reason

目前?TypeScript?已經(jīng)影響了前端乃至整個(gè) Web 領(lǐng)域的開發(fā)生態(tài)彭谁，TypeScript 之父 Anders Hejlsberg 創(chuàng)造過 Turbo Pascal吸奴、Delphi、C# 等在整個(gè)計(jì)算機(jī)科學(xué)領(lǐng)域都舉足輕重的語言缠局，而 TypeScript 又再次創(chuàng)造出翻天覆地的變化：

強(qiáng)類型的引入能讓我們?cè)趯懘a的時(shí)候從值優(yōu)先的思維轉(zhuǎn)變成類型優(yōu)先则奥；

強(qiáng)類型的引入能幫助開發(fā)工具（IDE 等）更好地為開發(fā)者提供便利性能力，如智能補(bǔ)全狭园、類型檢測(cè)读处、編譯時(shí)檢查等等；

TypeScript 可以讓 JavaScript 更好地與其他語言進(jìn)行交互唱矛，甚至轉(zhuǎn)換為其他語言罚舱；

工程化通用組件

當(dāng)需求不斷變多后，“愛偷懶”的工程師們就會(huì)把經(jīng)常用到的內(nèi)容進(jìn)行抽象绎谦，比如從很早以前就有的 ExtJS管闷、Twitter 工程師發(fā)布的 Bootstrap 再到今天的 Ant Design、Element UI 等窃肠，都幫助我們更快更好更穩(wěn)定地完成一些通用頁面能力的開發(fā)包个。

React：Ant Design、Fusion Design

Vue：Element UI冤留、iView赃蛛、Ant Design of Vue

NO.6

0x05 邏輯抽象能力

隨著我對(duì) JavaScript 應(yīng)用的編寫經(jīng)驗(yàn)不斷增加恃锉，我所嘗試的技術(shù)和場(chǎng)景也在不斷地變得更加復(fù)雜。而當(dāng)邏輯代碼變得越來越復(fù)雜時(shí)我也漸漸發(fā)現(xiàn)一個(gè)新的問題呕臂，很多時(shí)候我所編寫的邏輯代碼是相似的，但相似之余其中的一些細(xì)節(jié)不盡相同肪跋，而這些代碼往往是后期維護(hù)成本最高的歧蒋。這就讓我感到十分困惑，如何讓我的代碼寫起來沒有那么繁瑣的同時(shí)州既，又不丟失原本代碼的應(yīng)有邏輯呢谜洽？這就讓我想起了之前學(xué)習(xí)的框架，它們的實(shí)現(xiàn)原理不就是把原本我們寫得非常繁瑣的邏輯代碼進(jìn)行壓縮吴叶，讓我們寫起來更加簡(jiǎn)潔直觀嗎阐虚？

這是我曾經(jīng)面試過的一位校招候選人寫的代碼，其背景是用于快速判斷自走棋類游戲中不同的增益能力（Buff）的成立狀態(tài)蚌卤。但顯然這樣的代碼在實(shí)際開發(fā)中是絕對(duì)不允許存在的：

代碼邏輯過于冗余实束；

一旦通用判斷邏輯出現(xiàn)變動(dòng)，需要每一個(gè)都進(jìn)行手動(dòng)維護(hù)逊彭；

沒有良好的可維護(hù)性咸灿；

所以我便提出如何讓這些代碼寫得更加“優(yōu)雅”和利于維護(hù)。

我們不難發(fā)現(xiàn)這幾個(gè)xxxBuff?函數(shù)中的邏輯都非常接近侮叮，但也各有不同避矢。那么如何能將這段代碼進(jìn)行優(yōu)化和抽象呢？我當(dāng)時(shí)給 TA 提出了一份示例代碼：

這份代碼中的每一個(gè)數(shù)字在上面的beastBuff?函數(shù)中都可以一一找到囊榜，那么要怎么將它們復(fù)用到邏輯代碼中审胸，實(shí)現(xiàn)與原本的代碼一樣的功能呢？

我同樣給他寫了一份參考答案：

原本代碼里面通過 hard code 實(shí)現(xiàn)的判斷邏輯卸勺，通過觀察其中的共同點(diǎn)砂沛，并思考能否通轉(zhuǎn)換為可抽象部分，這同樣也是一名優(yōu)秀的工程師所必須具備的能力孔庭。Be D.R.Y.! (Don't repeat yourself)

NO.7

0x06 更高層次的思考能力

隨著我對(duì)不同業(yè)務(wù)尺上、不同場(chǎng)景和不同代碼難度的不斷探索和研究，我發(fā)現(xiàn)在前端領(lǐng)域乃至整個(gè)編程領(lǐng)域里圆到，不同的框架和架構(gòu)層出不窮地發(fā)展怎抛，其實(shí)在根本上就是各種實(shí)際業(yè)務(wù)場(chǎng)景在尋找更合適的 Better Practice（更好實(shí)踐）。就如前面的所說的那樣芽淡，不同的框架作者在開發(fā)的時(shí)候會(huì)采取不同的代碼結(jié)構(gòu)甚至代碼哲學(xué)马绝，這些不同的思維角度可能在框架的源碼中并不會(huì)直接表現(xiàn)出來。但我不會(huì)說研讀源碼完全沒有用挣菲！因?yàn)檠凶x源碼最起碼可以學(xué)習(xí)其中的一些 trick 或者代碼習(xí)慣富稻。

但更重要的是理解從 API掷邦、系統(tǒng)架構(gòu)上進(jìn)行思考，因?yàn)橹挥卸嗨伎剂送指常悴拍苤饾u變得比其他人更加對(duì)不同的技術(shù)游刃有余抚岗。

NO.8

EOF

這一個(gè)流程并不是嚴(yán)謹(jǐn)?shù)膶W(xué)習(xí)路線，更多的是我個(gè)人的一些經(jīng)驗(yàn)總結(jié)哪怔。當(dāng)然除了我所提到的學(xué)習(xí)知識(shí)點(diǎn)以外宣蔚，還有很多不同的分支對(duì)應(yīng)著不同的實(shí)際業(yè)務(wù)和場(chǎng)景，比如配合 Electron 開發(fā)桌面端應(yīng)用认境、配合 React Native/Flutter 開發(fā)移動(dòng)端應(yīng)用胚委、配合 Node.js/QuickJS/FibJS 開發(fā)嵌入式應(yīng)用、配合 TensorFlow.js 開發(fā)適用于前端甚至適用于邊緣計(jì)算的機(jī)器學(xué)習(xí)應(yīng)用叉信、配合 WebAssembly 將 Web 應(yīng)用的使用體驗(yàn)提升到接近原生應(yīng)用的境界……

關(guān)于 JavaScript 有一個(gè)很有名的預(yù)言：

凡是能用 JavaScript 重寫的亩冬，終將會(huì)使用 JavaScript 重寫

無論這句話會(huì)不會(huì)最終完全實(shí)現(xiàn)，但目前我們已經(jīng)能看到很多應(yīng)用逐漸通過 Web 應(yīng)用的形式云端化硼身，比如 Photoshop硅急、音視頻編輯軟件、代碼編輯器甚至是大型游戲等等原本我們完全沒想到可以運(yùn)行在瀏覽器中鸠姨。前端開發(fā)困難嗎铜秆？不困難、門檻相對(duì)比較低讶迁。簡(jiǎn)單嗎连茧？不簡(jiǎn)單，通過相信看到這里的你也已經(jīng)有所體會(huì)了巍糯。當(dāng)然實(shí)際要如何選擇路線和方向啸驯，還是你自己所遇到的經(jīng)歷和機(jī)遇來決定的。

打算深入了解這個(gè)行業(yè)的朋友祟峦，可以領(lǐng)取2020年最新前端基礎(chǔ)精講視頻教程分享罚斗！我們的前端學(xué)習(xí)Q裙：（518672693）?，里面都是學(xué)習(xí)前端的宅楞，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效针姿，游戲，插件封裝厌衙，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理距淫，送給每一位前端小伙伴。2020最新技術(shù)婶希，從企業(yè)招聘人才需求 到怎么學(xué)習(xí)前端開發(fā)榕暇，和學(xué)習(xí)什么內(nèi)容都有免費(fèi)系統(tǒng)分享。好友都在里面學(xué)習(xí)交流，每天都會(huì)有大牛定時(shí)講解前端技術(shù)! 希望可以幫助你快速了解前端彤枢，學(xué)習(xí)前端