自學前端，學多久可以入職前端工程師

假如有那麼殘酷的一天，我不小心喝錯了一瓶藥，一下子抹掉了我這十多年的編程經驗，把我變成了一隻小白。我想自學前端，並且想要找到一份工作，我預計需要 6 個月的時間，前提條件是每天都處於高效率的學習狀態當中，並且每天的學習時間至少在 12 個小時以上。

即便是這樣，我敢肯定，找到的工作肯定不會太好，勉強能夠維持生活吧，畢竟是零基礎入門啊。

如果想更進一步，真正成爲一名不可或缺的高級前端工程師，時間需要更久，兩年、三年、五年，直到禿的那天。

想着想着，我就覺得有必要爲那一天做點準備，以備不時之需。

01、第一個階段，環境和工具準備

準備一臺電腦，要能聯網
下載、安裝 node、npm、webpack、webpack-cli、cnpm，配置前端開發環境
下載、配置MySQL
下載、安裝 vscode
準備一個 GitHub 倉庫（或者碼雲），管理前端源代碼

前端是一門計算機編程語言，學它的話，連臺電腦都沒有，學個屁。我有個親戚家的孩子想學編程，就只看書，家裏連臺電腦都不配，說什麼“先打好理論基礎，再實操”，我真的是有點醉。

有了電腦，還得聯網，自學的過程中肯定會遇到很多問題，遇到問題的時候先問搜索引擎，推薦谷歌和必應；實在沒有答案的話，也可以來找我，申請加入技術交流羣，問問羣裏面的大佬們。

千萬不要使用記事本編寫源代碼了，對於小白來說，時間是寶貴的，記事本只適合大牛們用來裝逼，不適合小白用來編程（入門），純浪費時間。

有了 vscode，後面學習源碼的話，就會方便很多。

爲什麼還需要 GitHub 倉庫或者碼雲倉庫呢？它們可以用來在線雲同步源代碼，防止版本丟失。學到最後，還可以形成一套自己的工具庫，輪子就有了，上班的時候工作效率就會高很多，能直接用的代碼再也不用重新寫了。

02、第二個階段，前端基礎入門

1）HTML

2）CSS

3）javascript初階

變量和運算符
邏輯控制
數據類型基礎
Math類
函數
定時器
Array類
String類
Date類
Object類

4）JavaScript進階

JavaScript DOM基礎
this
事件
事件流
JavaScript BOM 基礎
call&apply&bind
自定義屬性
面向對象編程

5）ES6/7/8/9

ECMAScript6簡介
let和const
ES6+的作用域
對象的擴展
函數的擴展
字符串的擴展
Symbol
Set&Map
Promise對象
async&awiat
箭頭函數
模板字符串
rest參數
Class
Module模塊

6）JavaScript高階

閉包
立即執行函數
惰性函數
插件開發
多人協作
深複製與淺複製
數組扁平化
遞歸
正則表達式全解
函數防抖
函數節流

7）HTML5

HTML5簡介
HTML5新語法
HTML5新語義化標籤
HTML5新表單元素屬性
HTML5手機端新事件處理
HTML5新增多媒體實戰
Canvas
HTML5地理組件GeoLocation

8）CSS3

CSS3新增屬性
圓角製作企業級方案
CSS3背景屬性
過渡動畫 transition
變化屬性 transform
特效輪播圖實戰
企業級flex佈局實戰
grid佈局實戰

03、第三個階段，前端核心技術

1）bootstrap

響應式
媒體查詢
柵格系統
柵格參數
組合模式
列偏移/列排序/自動列
列對齊/列嵌套
文本與顏色
按鈕
導航
圖文混排
模態框
輪播圖
企業級案例講解

2）移動端

移動端簡介
移動端視口約束
移動端flex移動端實踐
rem
vw

3）Ajax

AJAX簡介
AJAX作用
封裝AJAX
創建XMLhttpRquest對象
同步和異步
AJAX分頁

4）jQuery

jQuery介紹
jQuery鏈式語法
jQuery選擇器
jQuery核心
jQuery工具
jQuery事件
jQuery事件對象
jQuery特效
jQuery回調函數
jQuery文檔處理
jQuery篩選
jQuery屬性
jQueryCSS

5）Echarts

Echarts概述
Echarts使用
座標系
雷達圖/餅狀圖/折線圖

04、第四個階段，前端進階升級

1）Webpack

Webpack的安裝和使用
項目模塊打包
靜態打包模塊器
Webpack入口
Webpack輸出
Webpack插件
webpack模塊

2）vue

Vue使用
Vue響應式
Vue雙向數據綁定
Vue相關指令
vue-resource
axios
template選項
Vue生命週期
Vue組件
自定義指令
過濾器
computed屬性
Vue-cli 2.x和3.x 腳手架配置
Vue-router
Vuex
Element UI

3）微信小程序

uni-app
mpvue
微信小程序註冊
APPID申請
生命週期
小程序調試
微信小程序框架組件
微信小程序佈局框架
微信小程序條件渲染和列表渲染
媒體組件audio
視圖容器
網絡api
相機api
地圖api

4）數據結構和算法

uniapp基礎
uniapp初始化配置
uniapp視圖模板使用
uniapp生命週期
uniapp路由跳轉
uniapp常用組件
uniappScrollView的使用
uniapp-ui使用
uniapp-Vuex使用

我目前是在職前端開發，如果你現在也想學習前端開發技術，在入門學習前端的過程當中有遇見任何關於學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我所在的前端學習交流裙：前面：42137 後面：4697。裏面聚集了一些正在自學前端的初學者,轉行者，初階者，裏面也有我整理的一些前端書籍PDF、前端面試題、前端開發源碼教程等PDF文檔書籍教程,需要的話都可以找裙豬獲取。

05、第五個階段，活着最重要

技術是沒有終點的，也是學不完的，最重要的是活着、不禿。

零基礎入門的時候看書還是看視頻，我覺得成年人，何必做選擇題呢，兩個都要。喜歡看書就看書，喜歡看視頻就看視頻。

最重要的是在自學的過程中，一定不要眼高手低，要實戰，把學到的技術投入到項目當中，解決問題，之後進一步錘鍊自己的技術。

自學最怕的就是缺乏自驅力，一定要自律，杜絕“三天打魚兩天曬網”，到最後白忙活一場。

高度自律的同時，要保持耐心，不拋棄不放棄，切勿自怨自艾，每天給自己一點點鼓勵，學習的勁頭就會很足，不容易犯困。

技術學到手後，找工作的時候一定要好好準備一份簡歷，不要無頭蒼蠅一樣去海投簡歷，容易“竹籃打水一場空”。好好的準備一下簡歷，畢竟是找工作的敲門磚。

拿到面試邀請後，在面試的過程中一定要大大方方，盡力把自己學到的知識舒適地表達出來，不要因爲是自學就不夠自信，給面試官一個好的印象，面試成功的機率就會大很多，加油吧，騷年！