黑客技術(shù)點(diǎn)擊右側(cè)關(guān)注，了解黑客的世界！

Java開發(fā)進(jìn)階點(diǎn)擊右側(cè)關(guān)注，掌握進(jìn)階之路！

Python開發(fā)點(diǎn)擊右側(cè)關(guān)注，探討技術(shù)話題！

作者丨練識(shí)

來源丨小鹿動(dòng)畫學(xué)編程

原本想寫個(gè)更加標(biāo)題黨的：《2020年你為什么還在用10年前的思路學(xué)習(xí)前端？》

不過本文更多的還是想給大家?guī)硐乱粋€(gè)時(shí)代前端開發(fā)學(xué)習(xí)和進(jìn)階的思考，而不是純標(biāo)題黨。就像今年前端領(lǐng)域發(fā)生了很多事情，卻沒有了前幾年的熱鬧非凡的感覺：

• Angular & React & Vue三大框架穩(wěn)定發(fā)展，不再有刻意吸引眼球的無意義爭論；
• ES6普及和瀏覽器對(duì)標(biāo)準(zhǔn)支持的增強(qiáng)，各種語言和Web的基礎(chǔ)知識(shí)逐漸成為合格前端的標(biāo)配；
• Hybrid和Native并行演進(jìn)，工程化的前端架構(gòu)設(shè)計(jì)逐步在各個(gè)項(xiàng)目中普及；
• 甚至涉及后端的Node、Ngnix等，也成為技術(shù)人員必知必會(huì)的領(lǐng)域知識(shí)。

如今也甚少聽到前后端分離、前端工程化等推廣，原因無非是大型前端項(xiàng)目早已普及工程化的前端架構(gòu)，而且更多的前端大牛們都已經(jīng)在實(shí)踐大前端體系化的架構(gòu)設(shè)計(jì)。

可以預(yù)想，前端開發(fā)已經(jīng)開始像后端開發(fā)一樣，在要求語言和技術(shù)基礎(chǔ)上，對(duì)規(guī)?；膶?shí)踐和企業(yè)級(jí)的流程成為更重要的需求。

2019年縮減HC、裁員不絕于耳，大家都是人心惶惶，年前如此。想必馬上到來的2020年又是一場(chǎng)更為慘烈的江湖廝殺。各大前端社區(qū)里，面試題整理的文章層出不窮，知識(shí)整理的內(nèi)容每天都在刷屏。準(zhǔn)備面試開始變成了重復(fù)性的刷題背題，然而每次面試前都要現(xiàn)找面試題，而且答案也不是現(xiàn)成的，這樣重復(fù)的事情在不知不覺中浪費(fèi)你很多時(shí)間。

著名學(xué)者文森特·賴安·拉吉羅的《思考的藝術(shù)》一書中有這樣的總結(jié)：

人的思維過程是創(chuàng)造性思維和批判性思維的融合，前者強(qiáng)調(diào)的是思維的高大寬深，后者強(qiáng)調(diào)的是穩(wěn)準(zhǔn)狠快。

在這樣的方式指導(dǎo)下，就可以分步來重構(gòu)一套更值得借鑒的學(xué)習(xí)路徑。

Step 1 —— 基礎(chǔ)

學(xué)習(xí)固然有技巧，但絕不是走捷徑，所謂的基礎(chǔ)也不是背下來整個(gè)JS文檔，從HTML、CSS到Vue、React一個(gè)都不缺，跨平臺(tái)PC、移動(dòng)端、小程序全都覆蓋。越是吹噓全面的，反而更容易徘徊在基礎(chǔ)薄弱的邊緣。

基礎(chǔ)扎實(shí)，需要的是對(duì)前端相關(guān)領(lǐng)域都有一些基礎(chǔ)性的了解，了解各項(xiàng)技術(shù)的應(yīng)用場(chǎng)景和優(yōu)劣選擇。對(duì)于技術(shù)人員來說，理解***前端UI層、通信層、服務(wù)層和存儲(chǔ)層***的層次結(jié)構(gòu)和關(guān)系，才是最初應(yīng)該掌握的基礎(chǔ)。

前端開發(fā)如今已經(jīng)進(jìn)入工程化的階段，踐行軟件工程在前端領(lǐng)域的應(yīng)用，就需要任何一個(gè)專業(yè)開發(fā)人員理解工程領(lǐng)域的各個(gè)階段應(yīng)用。

Step 2 —— 體系

很多前端課程，都強(qiáng)調(diào)知識(shí)面的廣度與深度并行，真正去學(xué)習(xí)的時(shí)候就發(fā)現(xiàn)是單純的灌輸式學(xué)習(xí)，反正全都給你講了，聽完了就號(hào)稱有深度了……

其實(shí)在日常工作中，我們講究的是開發(fā)效率，很少會(huì)去刻意記下一些細(xì)節(jié)和概念，腦海中都是一些分散的知識(shí)點(diǎn)，無法系統(tǒng)性地關(guān)聯(lián)成網(wǎng)，一直處于似曾相識(shí)的狀態(tài)。

前端項(xiàng)目基礎(chǔ)架構(gòu).png

以如此的狀態(tài)，不論是面試還是遇到業(yè)務(wù)難題的解決，都是很難快速應(yīng)對(duì)的。其實(shí)面試就猶如考試，大家回想下高考之前所做的事，無非就是 知識(shí)點(diǎn)理解 和 體系化關(guān)聯(lián)記憶。能夠?qū)⒁呀?jīng)懂得的知識(shí)體系化，最直接的方式就是結(jié)合自身業(yè)務(wù)提出問題。舉個(gè)例子：

不論使用Vue還是React，總需要每天編寫很多業(yè)務(wù)組件，通過看官方文檔和官方教程，我們能夠知道組件化的思想是什么，能知道父子組件以及之間如何傳遞參數(shù)，能知道組件有生命周期，也能知道組件的數(shù)據(jù)流等等。

這些知識(shí)是框架設(shè)計(jì)者所提供的功能，為了能應(yīng)付各種場(chǎng)景方便使用所做了最簡化的抽象。在開發(fā)的過程中，從0開始就需要思考：

• 如何拆分出合適的組件粒度
• 如何編寫擴(kuò)展性、通用性強(qiáng)的組件
• 如何把握數(shù)據(jù)流向，畫好數(shù)據(jù)流向圖
• 如何在業(yè)務(wù)復(fù)雜后，對(duì)數(shù)據(jù)流正確的處理
• 如何解決功能沖突和異常
• ……

在這個(gè)結(jié)合自身業(yè)務(wù)思考的過程中，才能逐步提升技術(shù)思維層級(jí)。

Step 3 —— 產(chǎn)出

也許有人會(huì)問，剛剛到思考問題這一步，怎么直接就到「產(chǎn)出」了？很多問題（包括剛剛提到的組件化問題），我還沒有想明白，怎么去做產(chǎn)出？

其實(shí)就像幾年前我一直都堅(jiān)持的一個(gè)論調(diào)：“互聯(lián)網(wǎng)上不缺垃圾！污染互聯(lián)網(wǎng)的人是在作惡！” 而經(jīng)過幾年的各種形式技術(shù)分享之后，反而開始積極推動(dòng)隨時(shí)做技術(shù)產(chǎn)出這件事。因?yàn)橹暗南敕ú粺o道理，但是實(shí)際情況是：

1. 如果你不首先有足夠多的產(chǎn)出，得不到互聯(lián)網(wǎng)上足夠的反饋和批評(píng)，那你的產(chǎn)出的質(zhì)量如何才能提高呢？
2. 不是精品的內(nèi)容其實(shí)也未必會(huì)污染到哪里，比如現(xiàn)在寫的這些文字，如果給它一個(gè)很清晰的標(biāo)題，放到我自己的名下合理的歸類，那么讀者很容易決定留下或是離開。
3. 在所謂的「自我要求不高」的內(nèi)容創(chuàng)作時(shí)，思維更加容易自由馳騁，很多臨時(shí)的想法其實(shí)可能是很有意義的。

比如，兩年前阿里巴巴推行中臺(tái)戰(zhàn)略，對(duì)技術(shù)中臺(tái)還沒有太深入實(shí)踐的我，寫過一篇《我為什么說中臺(tái)是多此一舉？》的文章，很多讀者給了反饋，并且在和我的溝通中讀到一些樂趣和啟發(fā)。同時(shí)此文備案存下之后，日后對(duì)技術(shù)有了更高層面的理解，想要?jiǎng)裾f大型項(xiàng)目思考技術(shù)中臺(tái)的優(yōu)勢(shì)的話，那這篇幼稚的文章就是極為重要的反面教材。

所以最近我在微信群、自己身邊的社群一直推動(dòng)**「行動(dòng)高于成果」**的活動(dòng)。以這樣的態(tài)度去做主動(dòng)學(xué)習(xí)，原本想要推廣自己對(duì)技術(shù)的一些思考，卻發(fā)現(xiàn)意外獲得了更多技術(shù)干貨。

將大家發(fā)布的內(nèi)容做個(gè)簡單整理，其實(shí)有很多可以隨手產(chǎn)出的知識(shí)點(diǎn)，比如：

• 業(yè)務(wù)思考：理解業(yè)務(wù)和公司的目標(biāo)，同時(shí)也要多思考業(yè)務(wù)，想著有沒有通過技術(shù)手段來提升業(yè)務(wù)價(jià)值，比如移動(dòng)端的白屏?xí)r間減少，可以帶來很好的用戶體驗(yàn)，提升用戶的留存率。
• 技術(shù)思考：思考業(yè)務(wù)開發(fā)中的一些痛點(diǎn)，如何用技術(shù)手段去優(yōu)化業(yè)務(wù)的開發(fā)流程，提升開發(fā)效率，比如為業(yè)務(wù)量身定制一款腳手架工具等。
• 優(yōu)化工作流程：不僅可以從熟悉的需求-開發(fā)-聯(lián)調(diào)-測(cè)試-上線的每個(gè)工作環(huán)節(jié)做出思考分析，還可以思考每個(gè)環(huán)節(jié)有沒有可以提升的點(diǎn)，特別是上線過程，比如能不能做到自動(dòng)化、能不能做到小流量上線、能不能及時(shí)回滾代碼。
• ……

所以技術(shù)產(chǎn)出，把工作中遇到的一些問題的解決方案、學(xué)習(xí)的一些新技術(shù)，產(chǎn)出的一些技術(shù)項(xiàng)目總結(jié)下來，作為技術(shù)分享和輸出，這樣一是可以總結(jié)沉淀你的技術(shù)，二是可以讓大家能知道你做的東西，三是鍛煉自己的表述能力，這個(gè)能力在大公司的晉升述職中非常重要。

?推薦↓↓↓?

長

按

關(guān)

注

?【16個(gè)技術(shù)公眾號(hào)】都在這里！

涵蓋：程序員大咖、源碼共讀、程序員共讀、數(shù)據(jù)結(jié)構(gòu)與算法、黑客技術(shù)和網(wǎng)絡(luò)安全、大數(shù)據(jù)科技、編程前端、Java、Python、Web編程開發(fā)、Android、iOS開發(fā)、Linux、數(shù)據(jù)庫研發(fā)、幽默程序員等。

萬水千山總是情，點(diǎn)個(gè) “在看” 行不行