??當做了3-5年的前端工作以后，我感覺我和很多人都不可避免的感到了焦慮，并且認識到了一個事情，即自己陷入了一個瓶頸。而瓶頸的來源無外乎以下幾點：

1.無法深入業務，也做不到反向推動業務

2.聽說過架構，但不懂何為架構

3.不知道自己接下來的學習及發展方向

4.無法形成自己的競爭優勢

5. .....

我接下來會從三個方面：業務、技術深度、閉環思維，去聊一下如何提升自己。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 深入業務

? ? ? ?我認為如果不去我們深入了解業務，而是去一昧的專精技術，那么我們的職業天花板將會來的很快。

? ? ? ? 首先，我主觀的認為在閱讀這篇文章的大部分人應該不是在研究院進行技術研究的學者專家，而是一些在應聘公司上班的在職員工。業務是在土壤中開花結果的植株，而技術這是提供給這株植株良好發育的土壤，它只是一個工具，如果沒有業務，那么一抔泥土將變得毫無意義，因為任何好的技術都需要通過業務去施展出來。首先，你得意識到我們去完成一個需求或者一個項目都是為了解決一個明確的問題或者痛點，只是為了提高技術而去使用技術，但卻達不成預期的結果那么這只是存粹的浪費時間而已，因為用戶不會關心背后的技術實現，只會在意呈現到他們眼前的東西。并且現在市面上有五花八門的技術、前端庫以及開發工具，等工作久以后你就會發現，如果沒有深入了解業務的去開發，結合實際場景的去盲目選擇，后期的維護開發成本都會急劇變高。

??其次，這段思考適合已經有工作多年的前端開發工程師，有一句非常雞湯的話流行在我們的行業里，“前端是離用戶最接近的崗位與工作”。但是只要有一定工作經驗的人，都會發現往往離業務有最深關聯的是在服務端，而我們前端往往對業務的了解只停留在表面。

??這是因為其實即使沒有前端，服務端也是可以直接和用戶直接交互的，因為只要服務端提供接口，只要用戶錄入對應的參數調用其接口就能完成對應邏輯的數據調整。只是這樣子的交互過程，對用戶的使用成本，所以慢慢出現了前端，前端及移動端的出現就是為了降低用戶的使用成本，提高用戶的使用體驗，所以這也是為什么往往為什么接口和頁面是一對多的情況，因為最核心的業務邏輯其實已經封裝在接口中，而前端只是為了滿足在不同場景去調用它罷了。

??在了解到以上兩點之后，我們去了解一下應該如何去深入業務。我認為有兩個步驟：

? ? ? ?首先是思考上的轉變，學會換位思考，拔高自己的思想層次。比如我們不去以員工的角度，而是以老板的角度去對待項目，那么你思考的問題就變得更多。首先，你得知道你公司的商品（手中的項目）是到底用來做什么到底要怎么來盈利，因為你連它的完整形態都沒有認知，你拿什么去和別人銷售它或者推廣它。那么這就會促使你去關注它的每個功能每個需求如何實現，能不能確切的解決痛點，思考該實現方案是不是最優解，當你在一個需求評審的會議中開始提出你的思考和方案的時候，你在這個項目中的參與度就會變得更高，甚至去主導一些方案和迭代。你也會去開始關注項目上線后的使用情況，哪個頁面或者按鈕或者功能使用量很低，到底是設計的交互鏈路不人性還是這其實根本是一個偽需求。

? ? ? ?其次是開始主動發現問題，你常常在面試中聽到的一句話就是，“你有沒有曾反向推動過業務？”。首先推動的前提一定是你發現了現在的項目有這樣那樣確實存在的問題，這就需要上面說的進行思考上的轉變，你可以從用戶的角度出發你會發現頁面的渲染很慢秒開率很低，那么就會進行各種各樣的性能優化。你也可以從開發的角度出發，發現公司某些項目和服務可以集成你的項目，可以是前端通過iframe，也可以是通過服務端改造，在這個過程你就要學會主動去和產品溝通，去和服務端進行技術評審、進行一些技術的改造后提高項目使用的數據量。也可以從產品經理的角度開發，你無法收集項目中的用戶交互數據，那么主動提出一個埋點交互系統方案，在有一個案例后甚至是做成一個通用的方案服務于公司其余業務。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 提高技術深度

? ? ? ?技術深度的前提一定是你的技術基礎足夠扎實，包括計算機基礎、網絡協議、算法思維、設計模型、框架思想等等，這就和地基一樣，沒有地基的房子就會格外的脆弱不堪，基礎不扎實會導致你的后續學習事倍功半，這個在從業多年會慢慢體現出來。

? ? ? ?就像前面所說的，現在的行業技術五花八門，每天都有新的技術或者新的文章產出，等你打好地基以后，你才有能力去甄別什么樣的技術是目前的你需要的或者去了解的。

? ? ? ?首先，要關注一些行業潮流以及咨詢，你可以通過去訂閱一些前端或者更大范圍的技術雜志《Fronted Weekly》或者大廠的一些技術微博等方式。

? ? ? ?比如我隨便挑選幾篇文章舉例：

? ? ? ? 《Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax!》

? ? ? ? ? ?講的是與TS相結合的代碼風格編排工具，如果你剛好在做公司內部的前端代碼規范的工作可以閱讀，否則也可以跳過。

? ? ? ? 《Remix: A Newly Open Sourced React-Based Framework for Web?Apps》?

? ? ? ? ? 這個講的是一種新開源的基于React的web app框架，如果你在仔細關注react相關的生態，可以瀏覽，不然可能對你用處不大。

? ? ? ?其次，去專精一些有需求場景的技術，為什么說需要有需求場景，就像我上面說的，只有解決痛點的技術才不會成為無垠之花，就比如你想做富文本的開發，或者項目的秒開率優化，讓某某項目的網頁的白屏時間從1s優化到了0.5s，因為項目是你技術的載體，只有能拿得出具體數據及案例的技術才是有價值的，才能被別人認可。而具體的實踐則是可以通過和公司里的其他感興趣的小伙伴組成一個技術team，或者在部門會議中說出自己的想法拉壯丁等等，然后制定具體的計劃分工以及時間節點去完成，最后盡量進行經驗總結，把技術沉淀出來形成自己的競爭優勢。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?形成閉環思維

? ? ? ? ?我常常聽到一個詞就是架構，很多人想成為架構師又不知道該如何成為。我對架構的理解就是——對一個系統的抽象描述指導。

? ? ? ? 什么是系統，前端有很多復雜的系統，比如發布系統，比如埋點及數據上報系統，比如工作流系統等等。而我們需要努力攻克的系統，往往都是像這些包含著復雜模塊劃分，涉及到的知識點非常多的這么一個閉環集合。

? ? ? ? 什么是抽象描述，首先你需要一個自上而下的角度去俯瞰整個系統的構成，有更高更廣的視野，把他們從各種各樣的具體的技術實現轉化為一個是抽取出共同的、本質性的特征，通過抽象可以讓你不會局限于用某種工具、某種框架甚至是某種語言去實現功能，然后清晰的模塊區分會使你在真實開發中條理更加清晰。

? ? ? ? 當然，很多人可能一直沒有機會去深入參與開發這樣一個大型系統，但是你可以通過去網上、或者公司內部獲取相關的架構圖獲取相關資源，理解每一個抽象層所表達的意義和大概實踐原理，這就像在大腦里拼拼圖，把每一塊空的版塊進行填充，直到形成一個完整的閉環。然后對于每一塊內容的具體技術實現就是給拼圖上色，因為總體的一個框架已經有了，你是會有大概思路的，當然每一個具體的技術細節其實都是值得深挖的。

? ? ? ? 我一直提到了閉環，我認為一個好的架構思想應該是完整的，不單單是單個架構的理解，而是可以從單個架構中進行延伸，舉一反三。

? ? ? ?在本文中幾乎沒有涉及到任何代碼，但是我卻覺得這對一部分人非常重要，我覺得遇到瓶頸是好事情，起碼你知道自己在停滯不前，都渴望達到下一個階段，而大家都常常因為被繁重的業務麻木了大腦，停止了“思考”。永遠不要停止思考，有時候停下來想一想接下來的方向再去做，接下來的路會走的更好，你我共勉。