前端和后端開發(fā)，哪一個更容易上手？我們時常會在各大技術(shù)論壇看到類似的提問。話說興趣是最好的老師，不實踐，你可能很難知道自己更喜歡哪一個？
從Java開發(fā)再到前端工程師，他在轉(zhuǎn)型路上遇到過哪些困難？本文作者張旭乾分享了他的轉(zhuǎn)型經(jīng)歷，以及他在學(xué)習(xí)前端開發(fā)過程中，遇到的問題和總結(jié)出來的一些經(jīng)驗，希望對你有所啟發(fā)。
在 2008 年的時候，我進入大專學(xué)習(xí) Java 開發(fā)，HTML 和 CSS 只是專業(yè)的附屬品。那時，主要還是前后端一體化開發(fā)，HTML 和 CSS 只是為了結(jié)合 Java 里的 Servlet 生成頁面。JavaScript 則完全沒有講。
2010 年快畢業(yè)的時候，我參加了五個月的 Java EE 培訓(xùn)，在這期間了解了 HTML、CSS，以及一部分簡單的 JavaScript DOM 操作和 jQuery，能夠編寫一些帶交互的頁面和 Ajax 異步請求。
在這期間，我沒有太重視 HTML/CSS/JS 基礎(chǔ)。因為本身剛?cè)腴T，并不知道哪些重要，哪些不重要。在做項目的時候，頁面部分要自己在網(wǎng)上搜索 HTML 標(biāo)簽和 CSS 屬性的用法。對于 JS 部分，則只會 jQuery，高級的語法（例如閉包、原型鏈）完全沒有概念，只知道該怎么定義變量，處理事件，做一些基本的邏輯處理。
我的第一份工作是 Java 開發(fā)，當(dāng)時公司用的技術(shù)很新潮，算是前后端分離的雛形。頁面部分完全使用了 ExtJS 庫，它提供了一組現(xiàn)成的 UI 組件，所有的數(shù)據(jù)都是通過 Ajax 來從后端獲取，后端則用 Java 的 Servlet 提供JSON 數(shù)據(jù)。
這份工作的主要難點是一開始不了解前后端分離的開發(fā)模式。由于是第一次嘗試完全在客戶端 JS 去請求數(shù)據(jù)，所以理解起來需要一點時間，當(dāng)時閱讀了 ExtJS 相關(guān)的文檔，才大體的了解到這種開發(fā)模式?；旧鲜抢?Ajax 請求數(shù)據(jù)，然后通過它內(nèi)置的 API 來填充 UI。后面隨著開發(fā)的功能變多，對這種模式也適應(yīng)了。
努力學(xué)習(xí)還是有回報的，過了三個月試用期之后，因為工作比較出色，在拿到正式員工薪資的基礎(chǔ)上，又額外加薪了 10%。所以剛進入公司的時候不要怕上不了手，主流的技術(shù)遇到不會的地方要善于自行查找資料解決，對于公司內(nèi)部的技術(shù)要勇于向前輩請教。
2010 年底從第一家公司離職，回到家里自己充電，學(xué)習(xí)了 PHP。因為當(dāng)時建站非常流行，學(xué)了 PHP 既可以做個人站長，也可以通過自由職業(yè)，為客戶建站來賺取收入。因為部署網(wǎng)站的主機基本上都支持 PHP 和 ASP，而 PHP 更加流行，所以我就自學(xué)了 PHP，通過官方文檔，加上實戰(zhàn)并結(jié)合搜索引擎搜索問題來學(xué)習(xí)。學(xué)完了之后就在網(wǎng)上發(fā)了個廣告，提供個人建站服務(wù)，此時的我還是全棧開發(fā)。
2011 年底左右，廣告發(fā)完了我就忘了，沒把它太當(dāng)回事。大年初六突然收到一個客戶的電話，需要做一個網(wǎng)站，這讓我興奮不已。我給這位客戶一共做了兩個網(wǎng)站：
當(dāng)時 UI 部分選擇了和 jQuery 配套的 jQuery UI。jQuery UI 封裝了一組常見的 UI 組件，例如拖拽、對話框、按鈕等組件，可以少寫一些邏輯代碼。盡管如此，編寫出來的 JavaScript 文件還是亂七八糟，因為頁面上有很多表格組件，需要在獲取數(shù)據(jù)后，手動去循環(huán)展示表格，并在刪除或修改的時候，還要修改 DOM 更新表格；另外還有其它邏輯，例如登錄、查詢等。
雖然代碼分散在了不同的 JS 里，但是有的頁面因為業(yè)務(wù)邏輯比較復(fù)雜，加上當(dāng)時我也不太了解 JS 的復(fù)用方式和邏輯，導(dǎo)致了很多重復(fù)的代碼。我還有當(dāng)時的源代碼，可以感受一下代碼的長度（兩張圖片為同一 JS 文件的不同部分，這里通過縮略圖展示）：
彼時，瀏覽器主流的還是 IE，所以還是需要做一些兼容性調(diào)整。不過好在 jQuery 主打的就是兼容全部瀏覽器，所以 JS 方面沒有太大問題，剩下的就是 CSS。這個項目在 IE、Chrome、火狐下顯示的都不一致，后來查了一下，解決方法可以根據(jù)瀏覽器特定的語法，編寫只在特定瀏覽器能識別的 CSS 屬性，或者選擇器，也就是所謂的 CSS hacks。另外也可以使用瀏覽器特殊的 HTML 指令，加載不同的 CSS 文件，最終把頁面調(diào)成一致就可以了。
因為項目頁面部分處理數(shù)據(jù)比較多，加上開發(fā)經(jīng)驗有限，當(dāng)時也只是在代碼效率上進行了優(yōu)化，例如減少不必要的循環(huán)操作等。
這個是開發(fā)的軟技能了，學(xué)會如何拒絕不合理的需求。因為當(dāng)時我是第一次面對客戶，也沒有自信，所以客戶說改什么，我立刻就開始給他改。這期間客戶最常見的話術(shù)就是：“這個功能很簡單，你做一下”，或者“這個問題很容易解決，花不了你幾分鐘”。當(dāng)時我真覺得功能或者問題挺簡單的，但是實際操作起來，發(fā)現(xiàn)要比想象的難多了。做了幾次之后，知道無論多簡單的功能或問題，都會涉及很多的細節(jié)，所以后面客戶再提要求的時候，我就把這些細節(jié)先說清楚，給他一個大概的完工時間，再加上新增的功能需要額外收費，客戶就會自己斟酌要不要做了。
還有一個意外，讓我學(xué)了一部分設(shè)計知識。在給這個客戶做質(zhì)量保證系統(tǒng)的時候，還要求附帶一個產(chǎn)品的官網(wǎng)，客戶給我發(fā)了產(chǎn)品資料之后，我參考網(wǎng)上同品類的網(wǎng)站，幫他設(shè)計了一版，但是客戶以不夠大氣為由，讓我重新設(shè)計，我又設(shè)計了一次，客戶還是覺得不夠好，反復(fù)幾次，似乎無法滿足他的需求，他就把官網(wǎng)這部分給別人做了。當(dāng)時我也有點憋氣，于是買了本《寫給大家看的設(shè)計書》，專門學(xué)習(xí)了一些設(shè)計原則，努力提高自己的設(shè)計能力。后來等客戶的官網(wǎng)上線之后，發(fā)現(xiàn)設(shè)計的也一般，大概是審美不同吧。
在自由職業(yè)后半段時間學(xué)習(xí)了其它的框架，那個時候 Bootstrap 3、Foundation 之類的 HTML/CSS 框架開始爆火，因為十分喜歡學(xué)習(xí)新的技術(shù)，我就去看了看它們的介紹，看到 Bootstrap 3 內(nèi)置了很多組件，并且不怎么需要寫 CSS，就學(xué)了一下 Bootstrap 3。Bootstrap 3 內(nèi)部使用了 LESS 這個 CSS 預(yù)編譯工具來生成 CSS，如果要自定義它的樣式，還需要會 LESS。我就又看了一下 LESS 的文檔，發(fā)現(xiàn)它提供了很多實用的功能，例如變量、繼承、嵌套等，感覺很有意思也順便學(xué)了。
從這里你就可以知道：前端庫是互相依賴的。如果直接看前端需要哪些庫，那么零零散散的有一堆，但是當(dāng)你真的開始下手學(xué)習(xí)一個框架的時候，你會發(fā)現(xiàn)好多框架可以從一條線里牽出來，構(gòu)成一個完整的開發(fā)工具庫，這些自然就都掌握了。
前邊所有的經(jīng)歷，奠定了我轉(zhuǎn)型前端所需要的技術(shù)基礎(chǔ)。而在從事自由職業(yè)期間，我發(fā)現(xiàn)我還是喜歡看做得見的項目，從 0 設(shè)計界面，直至實現(xiàn)出來，很有成就感，并且我也享受在設(shè)計過程中，靈感迸發(fā)的快樂，心底就有了想轉(zhuǎn)前端的火苗。不過第 2 份工作，從 2013 年到 2016 年，我仍然做的是 Java 開發(fā)。
真正讓我對前端產(chǎn)生興趣，是 2016 年去留學(xué)之后。在 2017 年第一個學(xué)期，有同學(xué)問我 React 的問題，我不太會，于是就上網(wǎng)幫同學(xué)查，查著查著，就發(fā)現(xiàn)前端已經(jīng)獨立作為一個職業(yè)了，再接著從 React 文檔找問題的解決方案時，發(fā)現(xiàn)之前我用 jQuery 的問題在 React 中全部都解決了，可以不用手動維護數(shù)據(jù)和 UI 之間的同步了，這讓我感到很欣慰，發(fā)誓等這學(xué)期放暑假，就深入學(xué)習(xí)一下。
很快，暑假就到了，要兌現(xiàn)承諾開始學(xué)前端。當(dāng)時室友學(xué)了高級 Web 編程，主要講的是 React，React 在那個時候還非常難用，應(yīng)該還是 React 15，需要手動配置好多東西：Babel、Bower.js 之類的?？粗矣延龅揭粋€組件顯示不出來，經(jīng)過一天的搜索解決方案，才發(fā)現(xiàn)是組件名大小寫不一致導(dǎo)致的，這個讓我有點對 React 好感度降低，不想學(xué)了。
后來我就研究了一下 Vue，發(fā)現(xiàn)普遍的說法是：功能和 React 類似，但是國內(nèi)用 Vue 的多，國外用 React 的多?？戳讼?Vue 是華人尤雨溪開發(fā)的，很佩服，據(jù)說上手比較容易，于是就決定先看看 Vue?
在把 Vue 官方文檔基礎(chǔ)部分看完之后，結(jié)合 YouTube 的一些視頻所教授的開發(fā)方法，大概一周的時間，覺得可以上手了，就想了一下練習(xí)項目。當(dāng)時了解到 Vue 適合開發(fā)單頁應(yīng)用，看了一下單頁應(yīng)用的特點，發(fā)現(xiàn)似乎就是網(wǎng)頁版 App 的概念? 于是，我就想著把當(dāng)時我用的最多的網(wǎng)易云音樂模仿一下。花了一周多的時間，實現(xiàn)了首頁 UI、添加歌曲，播放、暫停、快進、快退等功能，期間學(xué)會了 CSS flex 布局。
后來發(fā)現(xiàn)網(wǎng)頁版的功能局限性比較大，想著能不能做成桌面端的。當(dāng)時室友在學(xué)校的課里學(xué) Electron，一個跨平臺的桌面開發(fā)框架，只用編寫 HTML? CSS 和 JavaScript ，就可以生成在 Mac、Windows、Linux 操作系統(tǒng)都能運行的應(yīng)用。于是我又把應(yīng)用遷到了 Electron 上面。
從 Electron 這里也了解到了，Node.js 到底和瀏覽器 JS 運行時到底有什么不同：在 Node.js 的環(huán)境下，可以訪問更底層的操作系統(tǒng)級 API，例如訪問本地文件，這樣可以方便用戶自行添加音樂。
剛剛接受這種組件化開發(fā)的方式之后，最大的難題就是怎么才知道該不該把一部分 UI 定義成組件。當(dāng)時的思路就是，我先把所有的頁面代碼都寫在入口組件里，后面再根據(jù)頁面的布局，把這個組件拆分成各個部分，例如側(cè)邊欄、播放列表、播放控制器等，這樣的分法似乎很合乎邏輯，不過這也帶來了一個問題。
項目當(dāng)時使用了 Vuex，應(yīng)用的數(shù)據(jù)全部交給了它去管理，對于項目的功能邏輯，都是直接在相關(guān)的 UI 中實現(xiàn)的，并綁定了 vuex 的數(shù)據(jù)。例如播放進度條，它和歌曲的播放時間數(shù)據(jù)綁定了，后面要實現(xiàn)音量進度條的時候，發(fā)現(xiàn)這個組件無法復(fù)用。因此，我又把 UI 和數(shù)據(jù)分離了出來，這樣的組件，可以在各處復(fù)用，之后再實現(xiàn)對應(yīng)的邏輯就好了。
這個項目使用了當(dāng)時開始流行的 CSS Flex 布局，本著學(xué)習(xí)的態(tài)度使用它，遇到了很多問題，例如父容器對 flex 縮放的影響，如何讓 flex 元素占滿容器，又或是如何讓 flex 不占滿容器等等，這些在看了 MDN 文檔的介紹，了解了 flex、align-items 和 justify-content 各個屬性值的作用和含義之后，就清楚了元素的縮放邏輯。
學(xué)完 Vue 之后暑假差不多也快結(jié)束了，最后一個學(xué)期都在努力學(xué)專業(yè)課，沒有再看前端相關(guān)的東西。2018 年回國之后，開始找工作。因為留學(xué)的主要方向是分布式和云計算，所以我還是想以 Java 開發(fā)為主。面試的時候遭到了很多不屑，大多是看我剛研究生畢業(yè)，而以前的開發(fā)經(jīng)歷也沒什么出彩的地方，就都草草了事了。這些經(jīng)歷讓我很受打擊，但是讓我清楚的知道了，縱使有一肚子墨水，但是拿不出實際的產(chǎn)品，或者出彩不了面試官的喜好，就不可能面試成功。
當(dāng)然我不會否定自己，最后一次面試失敗之后，突然就想要不要改行做一下前端，畢竟留學(xué)的時候鉆研了不少，又在自由職業(yè)的時候做過一些產(chǎn)品，更是有濃厚的興趣，于是我立刻下了決心轉(zhuǎn)前端。
下定決心之后，我一刻也沒閑著，開始看前端的工作要求。在某招聘 App 上搜了一圈，發(fā)現(xiàn) React 在大廠用的多、工資也高一點，我就又開始自學(xué) React，花了一周看了看官方文檔，寫了一個特別小的、只有一個頁面的小例子，之后就開始投簡歷了。期間還看了看 React Router、Redux，以及 ES6 的新特性。
在閱讀 React 官方文檔的時候，發(fā)現(xiàn)有一節(jié)是《Thinking in React》，里邊詳細的介紹了 React 組件化開發(fā)的步驟，并且解釋了什么時候需要定義組件，文檔提供了一個表格 UI 作為示例，把它拆解成了表格整體、搜索框、表格內(nèi)容、類別行和產(chǎn)品行組件，說明了為什么這么拆解，有沒有其它拆解的方法，以及拆解過程的方案折中，建議看一看。
覺得準(zhǔn)備的差不多了之后，就開始投簡歷了，大約 1 個月的時間，收到 3 家面試，只通過了 1 家。沒過的那兩家同樣也是見我剛畢業(yè)，連前端開發(fā)經(jīng)驗都沒有，就草草了事了。通過的這家，面試官是我工作時的技術(shù)總監(jiān)和組長，在面試的時候沒有刻意刁難，只是問了些框架方面的基礎(chǔ)問題，還問了一下我平時是怎么解決問題的。后來，我在工作的時候，問他們?yōu)楹螞Q定讓我入職，他們告訴我，看中了我的學(xué)習(xí)能力。
所以面試如果沒經(jīng)驗的話，就努力說明自己的學(xué)習(xí)能力，總會有面試官欣賞你的。我到現(xiàn)在還非常感謝兩位，讓我正式進入了前端開發(fā)的行列。
進了公司就開始了日常做項目，大大小小一共做了 3 個，這期間經(jīng)歷了邏輯混亂期、嘗到甜頭期和精進技術(shù)期，積累了大量的開發(fā)經(jīng)驗。
第 1 個項目，是改造一個傳統(tǒng)的項目，按技術(shù)總監(jiān)的建議，使用 React + dva.js 框架。UI 方面，項目之前用的是 Bootstrap，我用了 React Bootstrap 把項目遷移了過來。
這個項目里遇到的問題是：代碼混亂。這個時期因為剛剛上手 React 開發(fā)，對于代碼的管理也沒有太大的概念，加上 dva.js 的項目結(jié)構(gòu)也不同于普通的 React 項目，所以這個項目開發(fā)起來有點麻煩，再加上項目的邏輯比較多，導(dǎo)致組件的代碼很長很長，復(fù)用起來也很困難（俗稱面條式代碼），不過因為這個項目也不是完全對外公開的，并且使用頻率較低，所以就沒在優(yōu)化。
第 2 個項目，是做一個公司內(nèi)部用的運營管理后臺，時間大約是 2018 年底，當(dāng)時 React alpha 測試版出了 hooks。看了一下官方文檔，感覺很神奇，能夠清晰地分離組件 UI 和邏輯，應(yīng)該能給代碼管理提供不小的幫助。雖然是測試版，但這個項目是完全對內(nèi)的后臺項目，所以果斷的用上了。
這個項目的后端比較特殊，一位大佬同事搭建了 GraphQL 服務(wù)，之前在留學(xué)的時候就已經(jīng)聽同學(xué)提到過很多遍了，現(xiàn)在有機會體驗體驗了。在看 GraphQL 官方文檔學(xué)習(xí)、以及使用搜素引擎搜索的時候發(fā)現(xiàn)，使用 GraphQL 后可以不用 Redux，于是這個項目我只用有機會eact? React Router 和 Apollo-GraphQL 這幾個主要的庫。
這套技術(shù)加上 React hooks，讓我真正感受到了前端開發(fā)的樂趣。組件從類的形式轉(zhuǎn)換成了函數(shù)形式，代碼量減少了很多，公共的邏輯也能抽離成 Hooks，在各個組件使用，組件自身的邏輯也能抽離成 hooks，來讓功能和 UI 展示代碼分開，讓代碼更易讀。這樣，整體的開發(fā)效率提高了不少。
UI 方面則嘗試了 Ant Design，因為純后臺的，沒有設(shè)計稿，只有產(chǎn)品原型。
另外這個項目是基于 Create-React-App 腳手架創(chuàng)建，了解到腳手架提供的功能非常全面，像靜態(tài)資源（圖片、字體）管理、插件、打包構(gòu)建等都包括了，省了很多手工配置。
第 3 個項目，是一個從 0 開始、面向客戶的應(yīng)用，UI 是由設(shè)計師專門設(shè)計，有很多自定義的樣式。這是我積累最多前端開發(fā)經(jīng)驗的項目，從技術(shù)選型，到組件規(guī)劃，再到代碼復(fù)用，對前端開發(fā)的架構(gòu)有了全新的認(rèn)識。
為了研究怎么在 React 項目中管理樣式最方便，我開始研究大型項目中的 CSS 樣式管理，了解到有普通 CSS 和 CSS-in-JS 兩種方案之后，再查資料發(fā)現(xiàn) CSS-in-JS 方案更靈活，能夠在 CSS 里訪問 JS 變量，讓組件樣式可以隨著組件狀態(tài)的變化而變化。
決定用 CSS-in-JS 方案之后，我找到了 GitHub Star 數(shù)比較高的 styled-components 庫，它支持 CSS 嵌套、主題等功能，并且能夠訪問組件的屬性，而且它定義的樣式，本身也是一個 React 組件，可以直接在 JSX 中使用。
UI 庫繼續(xù)使用了 Ant Design，不過也就是利用一下它的組件功能邏輯，樣式幾乎全部都修改了。
項目后端這次沒有用 GraphQL，我又發(fā)現(xiàn)不用 GraphQL 也沒必要使用 Redux，所以就沒有再添加 Redux，結(jié)果也證明我的選擇是對的：項目本身沒太多全局狀態(tài)，舍棄 Redux 大概讓開發(fā)效率提升了 1 倍，之前像表單這樣的組件大概需要一天才能完成，現(xiàn)在只需要半天。不過項目里有個內(nèi)嵌的聊天系統(tǒng)，需要用一點全局狀態(tài)，我就從網(wǎng)上查找了一些解決方案，發(fā)現(xiàn)使用 React Context + useReducer Hooks 的方式實現(xiàn)全局狀態(tài)管理就夠了。
這個項目使用的新框架都是一邊看官方文檔一邊學(xué)習(xí)的，有不好解決的問題，就結(jié)合搜索引擎和 GitHub Issues 解決。
對于項目的結(jié)構(gòu)，這次使用了就近原則來組織代碼，每個組件放到單獨的文件夾中，組件相關(guān)的 styles、圖片、hooks 等都放在同一個文件夾，對于公用的部分，則放到項目頂級的 src目錄下。API 和其它庫的配置項也都放到單獨的文件夾里，同樣遵循就近原則，這樣管理項目就方便多了。
這個項目的圖表也比較多，為了和 App 端保持一致，選擇了 Echarts。在使用 Echarts 的時候，雖然能夠?qū)崿F(xiàn)大部分設(shè)計稿中的樣式，但是還是有小部分不能精準(zhǔn)還原，在拿著實際效果跟設(shè)計師溝通之后，有些樣式就做了些調(diào)整，或直接舍棄了。
項目最后驗收的時候，還需要跟 UI 設(shè)計師核對樣式，這期間我和設(shè)計師找了單獨的工位，每天都是在溝通哪里的設(shè)計需要修改，哪里的設(shè)計不好實現(xiàn)，怎樣取一個大家都滿意的折中方案。這些在了解設(shè)計基礎(chǔ)原則之后，你也會明白設(shè)計師設(shè)計的意圖和用意，這樣用理解的心態(tài)來溝通，再輔以技術(shù)上的難度展示和時間需求，就能夠更好的避免不必要的 UI 改動和代碼重構(gòu)。
綜合大、中、小企業(yè)的前端工程師技能需求，實際上前端工程師的職能包含以下職業(yè)中的 1 種或多種：
最重要的職能是網(wǎng)頁開發(fā)，包括小程序、APP 等跨端應(yīng)用界面的開發(fā)，雖然它們實現(xiàn)的技術(shù)不同，但本質(zhì)上還是做頁面。
下面這些技能不是必須的，但是如果能掌握，可以提高工作效率、跟后端或設(shè)計師溝通的能力，以提升求職升職的競爭力：
用戶體驗設(shè)計，了解網(wǎng)頁的動效、輔助功能對用戶體驗的影響。輔助功能（可訪問性）在國外比較重視，目的是方便有閱讀障礙的人士，使用屏幕閱讀器進行網(wǎng)站瀏覽。如果你想去外企，這些技能是必須要掌握的。
Docker，了解如何把前端項目構(gòu)建為 docker image，會編寫簡單的 docker file。
后端語言、框架、數(shù)據(jù)庫，任選一套，例如 Java + Spring + PostgreSQL，Express + Node.js + MongoDB 等，了解 RESTful API 開發(fā)過程。
乍一看要掌握的有很多，但很多庫都是隨著 React、Vue 等最重要的前端庫自然而然地引入進來的，大部分的用法都很簡單，并且我們還會在工作中持續(xù)學(xué)習(xí)，一開始只需要入門就行。下圖展示了 React 前端開發(fā)工程師，根據(jù) React 框架所衍生的技術(shù)棧（示意）：
2019 年從公司再次離職，不想再打工了，借鑒在國外留學(xué)時所學(xué)到的經(jīng)驗，轉(zhuǎn)型開始做視頻和線上教學(xué)，運營著“峰華前端工程師”賬號，同時也在CSDN發(fā)表博客。在這期間還撰寫了《JavaScript 基礎(chǔ)語法詳解》一書。
編寫書籍的時候，又是一次學(xué)習(xí)的過程，在查閱各種資料之后，對 JavaScript 有了更完全的認(rèn)識。同時也明白了，人只有存在目標(biāo)的情況下，才會有動力去完成看似不可能的事，避免渾渾噩噩度日。
如果你像我一樣，也算比較大齡的程序員，有年齡焦慮，可以適當(dāng)?shù)南胂脒€要不要在公司里繼續(xù)工作下去，是不是該拿出勇氣來嘗試做自己真正想做的事，之后利用興趣養(yǎng)活自己。這不是一條容易的路，所以在決定之前一定要做好兩年之內(nèi)沒有起色的打算，這些如果我能總結(jié)出一套經(jīng)驗之后，再來分享。
學(xué)會獨立學(xué)習(xí)。前端的框架太多了，并且經(jīng)常出現(xiàn)新奇特框架，必須要能自己獨立通過官方文檔和搜索引擎進行學(xué)習(xí)，因為前端框架多數(shù)比較小眾，不會有很多相關(guān)的教程。如果連文檔都沒有，就要學(xué)會讀源碼學(xué)習(xí)用法。
基礎(chǔ)打牢。前端庫雖然多，但萬變不離其宗，總是要回歸到 HTML、CSS 和 JavaScript 上面，所以基礎(chǔ)一定要打牢，尤其是在 ES6 以后出現(xiàn)的新特性，在前端用途非常廣泛。
實戰(zhàn)練習(xí)。學(xué)完前端庫之后，一定要找個小項目做，把學(xué)到的東西真正地掌握。Github 上有很多前端項目靈感的庫，可以搜索 “front-end project ideas 找到 ，或者你也可以改造模仿市面上的網(wǎng)站、App 等。
保持學(xué)習(xí)興趣。對于新出來的特性，語法，框架要樂于去了解并嘗試，說不定你會喜歡上，還能提高你的開發(fā)效率，或者正好碰到你學(xué)過的框架火了，直接提高你的職業(yè)競爭力。
不要把前端只局限在技術(shù)層面。向上往設(shè)計和產(chǎn)品擴一下，向下從后端和運維鉆一下，你會更能從整體角度觀望整個項目，從而在前端技術(shù)選型、開發(fā)過程以及和同事溝通的時候，懂得取舍和折衷。
線上文檔。對于 HTML、CSS 和 JavaScript 最權(quán)威的文檔就是 MDN。其它的像 React、Vue 等框架，就是官方文檔。如果遇到了問題，就去搜索引擎搜索，看其他人寫的解決方案。
書籍。對于體系化的教程，可以購買相關(guān)的書籍看，重點看專業(yè)、經(jīng)典的書籍，這些網(wǎng)上有很多推薦。書籍可以幫助你快速入門并深入，不用在網(wǎng)上東找西找了。
視頻?，F(xiàn)在視頻平臺正火爆，不要只用來消遣，上邊也會有很多編程相關(guān)的視頻，空余時間可以刷一刷，可能會獲得一些開發(fā)靈感、技巧，以及未來工作可能用到的新技能。
在線課程或培訓(xùn)。在線課程或者培訓(xùn)能幫你直接學(xué)到和就業(yè)相關(guān)的技能，積累項目實戰(zhàn)經(jīng)驗，但是要注意鑒別課程和機構(gòu)的質(zhì)量。
向有經(jīng)驗的人學(xué)習(xí)。如果你看到有高級工程師發(fā)布的博客、微博、視頻等內(nèi)容，可以嘗試和他們建立聯(lián)系，拿出你學(xué)習(xí)的誠意，讓他們幫你指點迷津，或許能少走一些彎路。
好了，這些就是我個人的前端學(xué)習(xí)過程，以及總結(jié)出來的一點經(jīng)驗，希望對你有幫助。你是如何學(xué)前端的？有什么心得總結(jié)？歡迎分享給大家！
本文來自微信公眾號“CSDN”（ID：CSDNnews），作者：張旭乾，36氪經(jīng)授權(quán)發(fā)布。
繼「丑聞」之后，再爆 Stability AI 高層大換血，網(wǎng)友：“莫非是人心渙散？”
繼 CentOS 后，紅帽又惹“眾怒”：限制訪問 RHEL 代碼，要“殺死”下游發(fā)行版？
首個國人主導(dǎo)的開源數(shù)據(jù)集成工具：揭秘 Apache 頂級項目 SeaTunnel 背后的故事
