開篇詞 | 前端進階得打好基礎，靠近業(yè)務

zybingliu 2021-09-30

展開全文

你好，我是被刪（貝珊），或許你曾讀過我的一些文章，或許你還未曾聽說過我，我先簡單介紹下自己。

我大學畢業(yè)去了華為，后轉(zhuǎn)入騰訊，前后加入了企鵝電競、微信支付和騰訊文檔等多個業(yè)務團隊，現(xiàn)如今在騰訊文檔 Alloyteam 團隊，負責核心模塊的項目架構、技術方案設計等研發(fā)工作。

我特別喜歡分享，也常常會對自身工作進行階段性思考和總結，并通過文字的形式沉淀下來。去年收到一個贊賞，對方給我打賞的同時，附了一段話：

“抱歉只有這點錢，今年沒有找到工作，但是很喜歡您的文章?！?/p>

很感謝，很感動，卻又很難過。最近幾年，前端領域的變化可謂翻天覆地，我們從最簡單開始寫頁面，到如今的工程化、服務端、客戶端等領域，也都漸漸出現(xiàn)了前端開發(fā)的蹤影。很多前端開發(fā)在認真埋頭干活，再抬頭的時候卻發(fā)現(xiàn)自己所了解的前端，早已變了樣。

不僅如此，又由于業(yè)務簡單、工作內(nèi)容局限等問題，很多前端開發(fā)即使把所有前端開發(fā)技術中的知識點都學習一遍，最終依然會因為工作繁忙、實踐的缺失等情況只停留于“看過”的層面，工作陷入困境。

如何破局，快速進階？

這些年來，我面試過各式各樣的應屆生和社招人員，最大的感受是：準備充分的應屆生在面試過程中反而表現(xiàn)更好。

原因也很好理解，大多數(shù)公司對應屆生的要求是基礎不差、能干好學，即使缺乏項目實踐經(jīng)驗，影響也不會很大。

但對于工作 1~3 年的前端開發(fā)，不僅要可以熟練使用各種前端框架、工具庫，還要知其原理，能夠舉一反三。

但就我面試的大多數(shù)人來說，在被問及框架和工具的實現(xiàn)原理、在怎樣的場景下該如何選擇等問題時，大都缺乏自身的理解與想法。

這也是職場人普遍面臨的常態(tài)：他們在日常工作中更傾向于解決問題，卻很少去深度思考，比如問題“為什么”會產(chǎn)生。

但試想，對于一些工具的使用，大多數(shù)應屆生都可以通過官方文檔或百度來快速學習，如果我們還只關注完成工作內(nèi)容本身，那么幾年后，我們的競爭優(yōu)勢在哪里？

因此，我想從過來人的角度，給初中級前端同學提供兩個建議。

1. 掌握前端核心專業(yè)知識，深入了解常見解決方案

打好基礎，打好基礎，打好基礎！沒有基礎，進階毫無可能。

我之前碰到過的一個例子很能說明這個問題。有一天，某個團隊突然接到不少用戶反饋小程序很卡很慢，其中，剛進團隊的一個小伙二話不說，直接拿出常見的前端性能優(yōu)化套裝，一項項地比對，測試各種機型的首屏耗時、頁面渲染和交互響應速度，等等，但卻沒有發(fā)現(xiàn)重點原因。

當他咨詢自己的導師時，卻發(fā)現(xiàn)導師打開了小程序開發(fā)工具一頓分析操作，不到半小時就定位了卡頓問題并解決了。

原來由于雙線程的設計，小程序在setData的時候，如果過于頻繁且數(shù)據(jù)量較大，就會造成卡頓，而這些問題都可以通過小程序開發(fā)工具提供的體驗評分功能來發(fā)現(xiàn)。

你看，如果沒有深入了解過小程序本身的設計原理，對它的認知只停留在前端 Web 開發(fā)中，就壓根不會想到是小程序本身設計導致的性能問題。

掌握前端核心專業(yè)知識，你才能胸有成竹，快速分析定位問題，并結合項目本身給出解決方案。

2. 跳出技術執(zhí)行，靠近業(yè)務搞項目

縱然我們具備完善的前端專業(yè)知識體系，如果無法應用和落地到項目中，那就是空口白話。

特別是想要進階中高級前端開發(fā)時，足夠的項目經(jīng)驗，獨立完成技術選型、項目設計和管理等能力，以及推動方案落地和執(zhí)行，就是重點了。

比如，小李接手了一個快速上線 H5 活動頁面配置平臺的任務，他對活動頁面和自定義配置都有較豐富的開發(fā)經(jīng)驗，因此花一天時間就給出了這個平臺的技術方案。

老板也覺得不錯，然后追了一句：需要給你多少人力，可以在兩周內(nèi)上線這個平臺？小李愣了，他平時都只關注技術，很少關注項目上線的過程是怎樣的，一時有點進退兩難。

最后小李決定嘗試一下。但開發(fā)期間由于團隊分工不明確、協(xié)作不順暢、代碼風格不一致、Bug 較多等問題，導致項目多次返工，在全員加班的情況下，依然延期了一周才上線。所以，我們在日常開發(fā)過程中，也不能只局限于專業(yè)知識，也得學會如何管理和搭建項目。

現(xiàn)階段中、高級的前端開發(fā)，項目設計和管理經(jīng)驗更是必不可少。所以要想進階，你得知道如何從 0 開始搭建前端項目、如何進行技術調(diào)研和選型、如何提升項目中各個階段的開發(fā)效率，以及如何通過項目復盤而不斷優(yōu)化自身的項目管理經(jīng)驗。

課程設計

為了讓你快速掌握前端核心專業(yè)知識和項目經(jīng)驗，我在設計課程時，主要圍這兩大塊來講的。

專業(yè)知識篇：核心基礎。HTML、CSS、JavaScript 和瀏覽器作為前端最最最最核心的基礎，看似簡單，但很多前端開發(fā)對它們的理解不夠深入。在這里，我會帶你重新梳理其中的關鍵點，比如 JavaScript 代碼是如何被執(zhí)行的，比如網(wǎng)絡請求的過程，以及瀏覽器頁面的加載和渲染流程是怎樣的，這個過程中瀏覽器內(nèi)部是如何協(xié)作完成的，等等。

這些內(nèi)容對于幫你夯實前端開發(fā)的語言和技能，以及深入理解其中的設計、機制和原理，非常有幫助。

專業(yè)知識篇：能力進階。在掌握了核心基礎內(nèi)容后，我會帶你了解前端開發(fā)中經(jīng)常用到的工具和框架，并深入講解它們的實現(xiàn)原理。同時，我還會介紹一些實用的開發(fā)技巧和思維，幫助你提升開發(fā)效率、編寫出更具可讀性和維護性的代碼。

最后，我還會用一個實戰(zhàn)項目來讓你實學實用前面的開發(fā)技巧。這樣你才會融會貫通，在開發(fā)時事半功倍，更重要的是，你在未來遇到業(yè)務問題時想到更優(yōu)解。

項目經(jīng)驗篇：技術方案選型。這部分我會介紹一些前端項目中經(jīng)常遇到的技術方案，比如應用狀態(tài)管理、路由管理、監(jiān)控體系搭建等。沉淀了足夠的技術方案進行對比，你更能結合自身項目找到最優(yōu)解。

其次，我還會教你如何進行前端技術調(diào)研，讓你具備獨立設計方案并落地實現(xiàn)的能力，從而幫助團隊解決現(xiàn)有問題，更好地體現(xiàn)自身價值。

項目經(jīng)驗篇：項目設計與管理。當你作為一個項目的 Owner 去推動項目從搭建到上線時，你還需要了解如何進行前端項目的設計、搭建、開發(fā)，以及保證項目順利上線。同時，我還會介紹在大型的項目中、多人的協(xié)作中，存在的一些問題和解決方案。掌握了這些解決方案和技能之后，你可以提升自己在項目中的 Owner 意識和重要性。