學(xué)習(xí)Web前端，是應(yīng)該自學(xué)，還是參加培訓(xùn)班？

時(shí)間：2023-04-24 02:03:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-04-24 02:03:02 來源：網(wǎng)站運(yùn)營

先說觀點(diǎn)，我強(qiáng)烈建議每個(gè)人都要自學(xué)，不要參加培訓(xùn)班。
我干web前端工程師這個(gè)職位已經(jīng)有6年多的時(shí)間，之前在螞蟻金服做過2年，后來離開是因?yàn)榧影鄬?shí)在熬不住才走的，像這些已經(jīng)上市的互聯(lián)網(wǎng)公司幾乎沒有不加班的，基本上都是996，雖然工資給的是很高，但誰也頂不住總加班沒有生活的狀態(tài)。由于自己在這行業(yè)已經(jīng)有6年的工作經(jīng)驗(yàn)，所以對這個(gè)行業(yè)的情況還是比較了解的，像在螞蟻金服、騰訊、百度、美團(tuán)、餓了么這樣的大廠中，你幾乎找不到哪個(gè)程序員是培訓(xùn)班出來的，基本都是自學(xué)出來技術(shù)很好或者是科班出身的人，因?yàn)榕嘤?xùn)班出來的人基礎(chǔ)都非常薄弱，都是經(jīng)驗(yàn)老道的面試官，只要在面試中隨便聊幾句，就可以分辨出來你是否是培訓(xùn)班剛出來的，一旦發(fā)現(xiàn)是培訓(xùn)班剛出來的，直接面試結(jié)束。但自學(xué)出來的人不一樣，一般自學(xué)出來的人時(shí)間都比較長，經(jīng)過長期的學(xué)習(xí)積累，可以把基礎(chǔ)打的很好，每一個(gè)步驟掌握的都很扎實(shí)，并且能堅(jiān)持長期自學(xué)下來的人，他們普遍都有很強(qiáng)的意志力和良好的學(xué)習(xí)能力，所以公司一定是傾向于這類人。
在我們這個(gè)行業(yè)中有一個(gè)奇怪的現(xiàn)象，就是很多做Web前端技術(shù)的人根本做不到35歲，能堅(jiān)持做10年以上技術(shù)的人非常少，基本都是干個(gè)三四年就轉(zhuǎn)行去做其他的行業(yè)，因?yàn)樗呀?jīng)很長時(shí)間沒有提升，技術(shù)一直都在原地踏步，大家都知道我們這個(gè)行業(yè)一旦不能繼續(xù)提升，就會被后來的人追上最后淘汰。而干到中途就轉(zhuǎn)行的人，可以說99%都是速成培訓(xùn)班出來的，因?yàn)樗麄儧]有良好的語言基礎(chǔ)，平時(shí)自己也不主動學(xué)習(xí)，因?yàn)闆]有養(yǎng)成良好的學(xué)習(xí)習(xí)慣，都認(rèn)為參加培訓(xùn)班后就可以一勞永逸，以后就不需要學(xué)習(xí)了，但是在任何一個(gè)行業(yè)都一樣，一直原地踏步不提升的人，一定會被他所在的行業(yè)淘汰，這是自然的規(guī)律。
有人問Web前端現(xiàn)在還能學(xué)嗎？
完全不用擔(dān)心飽和的問題，如果說Java有點(diǎn)飽和這話我是信的，畢竟Java語言已經(jīng)20多年的時(shí)間，但是Web前端的概念受到重視的時(shí)間并不長，所以目前各個(gè)互聯(lián)網(wǎng)公司都非常缺好的Web前端技術(shù)人才，像字節(jié)跳動這樣的公司前段時(shí)間放出招聘需求，月薪基本都是30K以上的，各種渠道尋求內(nèi)推人才，但是招人還是很難，各種獵頭在各種內(nèi)推群，想招聘到一個(gè)不錯(cuò)的Web前端人才還是比較難，所以就目前的Web前端市場來看，完全是可以學(xué)習(xí)的，而且前端的入門還是比較容易的，相比Java而言，要更加適合初學(xué)者。
我提倡的學(xué)習(xí)方式是：自己學(xué)習(xí)+有人指導(dǎo)
其實(shí)作為一個(gè)真的想做這行的人，首選他要對技術(shù)有一種熱愛，喜歡編程這種東西，學(xué)習(xí)的耐心和毅力是必須具備的，然后在整個(gè)學(xué)習(xí)過程中，有一個(gè)人去指導(dǎo)他，提高他的學(xué)習(xí)效率，盡量的少走彎路就可以了，剩下的其實(shí)都要靠自己去學(xué)。有的時(shí)候我覺得很可笑，為什么會有那么多的人認(rèn)為去參加了線下培訓(xùn)班就不是自學(xué)了呢？我覺得持有這樣想法的人一定是走不遠(yuǎn)的，學(xué)習(xí)這種事情最后都是自己的事，并不是別人可以掌控的。
如果覺得自己在學(xué)習(xí)過程中有很多困惑，走了太多彎路，遇到一個(gè)問題需要好幾個(gè)小時(shí)才能解決，也不知道應(yīng)該學(xué)到什么程度才能就業(yè)，可以隨時(shí)來問我，我平時(shí)工作不忙的時(shí)候給大家解答。下面是我建立的一個(gè)3000人Web前端開發(fā)交流學(xué)習(xí)群，已經(jīng)有5年的時(shí)間，聚集了2000多個(gè)前端學(xué)習(xí)者，希望大家以后一起進(jìn)步和創(chuàng)業(yè)。


疑問解答+資料分享+學(xué)習(xí)方法

給那些其他專業(yè)或者行業(yè)想學(xué)習(xí)Web前端做技術(shù)的人一些建議：
1、 稍微了解一點(diǎn)的人都知道，Web前端的技術(shù)更新是非常快的，所以我們在學(xué)習(xí)的時(shí)候一定要學(xué)最新的技術(shù)體系。
2、 Web前端并沒有特別完整的內(nèi)容，因?yàn)榍岸藢儆谝粋€(gè)職位，想要做這個(gè)工作都需要學(xué)習(xí)哪些內(nèi)容要明確，并不是要把所有的內(nèi)容學(xué)完才能去找工作，知識是學(xué)不完的，但它有一些主流的技術(shù)是必須掌握的，如果是初級的前端開發(fā)工作，把主要的技術(shù)學(xué)好后就可以嘗試去找工作，盡量在工作中去學(xué)習(xí)你才能學(xué)到更多。
3、 語言基礎(chǔ)才是核心競爭力，無論以后前端開發(fā)出多少框架，它們都只是工具而已，而你只需要掌握使用工具的技巧就可以，做前端開發(fā)的人，學(xué)好JavaScript是重中之重，如果你JavaScript學(xué)的不好，就不要往下繼續(xù)學(xué)了，沒有任何意義。
4、 有機(jī)會找大佬帶你入門就找大佬帶你，自己一個(gè)人想要達(dá)到就業(yè)的水平很低，每個(gè)自己摸索的人必然走的是彎路，有的人走完了彎路還能回來，但是大部分人的結(jié)果都是由于“積重難返”最后放棄，其實(shí)并不是你智商不夠，而是因?yàn)槟銓Υ瞬涣私猓耆敲^過河。
最后給大家總結(jié)了一下2021年web前端的學(xué)習(xí)內(nèi)容，可能內(nèi)容過于多，但是從具備競爭力的角度考慮，我盡量把大前端全棧工程師要學(xué)習(xí)的內(nèi)容都給大家列了出來，按照我這個(gè)標(biāo)準(zhǔn)去學(xué)，保底就業(yè)薪資在15K以上，如果在網(wǎng)上找不到這些學(xué)習(xí)資源，可以加我的Web前端開發(fā)群，我私發(fā)給大家。


疑問解答+資料分享+學(xué)習(xí)方法

一、HTML/CSS3 部分
前端概念總覽、vscode開發(fā)工具使用、markdown文檔工具使用、瀏覽器平臺環(huán)境、標(biāo)簽基礎(chǔ)、DTD與META
語義化、選擇器、權(quán)重與優(yōu)先級、匹配規(guī)則、浮動與清除、BFC、類名組合規(guī)則、SEO前端技巧、定位、疊加技巧、
偽類、偽元素、盒子模型、代碼規(guī)范、性能優(yōu)化、渲染原理、CSS Sprites 、 iconfont字體圖標(biāo)、布局思路、布局定式
css3動畫、 css3選擇器、 css3過渡、flex布局、背景漸變、css3實(shí)用動效、3D模塊、css3變量、em/rem/vw
企業(yè)內(nèi)部多頁面項(xiàng)目實(shí)戰(zhàn)（非仿站）有完整PSD與切圖
二、JavaScript 部分
JavaScript概念、基礎(chǔ)認(rèn)知、發(fā)展歷史、應(yīng)用范圍、優(yōu)缺點(diǎn)。
ECMAScript
語言概覽、語句語法、數(shù)據(jù)類型、運(yùn)算符、隱式轉(zhuǎn)換、運(yùn)算規(guī)則、控制流程、作用域、作用域鏈、作用域解析、js解釋引擎、字符串屬性方法、for of/for in
數(shù)組屬性方法、對象、廣義對象概念、對象特性、存儲機(jī)制、深拷貝、對象實(shí)際應(yīng)用、工廠模式、構(gòu)造函數(shù)、原型、原型鏈、原型指向、封裝、
多種繼承、包裝對象、this、this指向、js數(shù)據(jù)處理、垃圾GC、閉包原理與應(yīng)用、debug方法論、瀏覽器控制臺工具應(yīng)用、面向?qū)ο箝_發(fā)、函數(shù)式開發(fā)、
純函數(shù)、遞歸函數(shù)、回調(diào)函數(shù)、組合函數(shù)、緩存函數(shù)、柯里化函數(shù)、偏函數(shù)、函數(shù)防抖與節(jié)流、高級函數(shù)、IIFE函數(shù)、模塊化、
數(shù)學(xué)對象、高級數(shù)組方法（reduce、filter、map、every、some、forEach、find、findIndex、include）等、
高級對象方法（entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty）等
this通過bind、call、apply指向偏移、同步與異步、閉包模塊化、數(shù)據(jù)形變處理、性能處理
DOM/BOM
DOM對象與方法、節(jié)點(diǎn)與遍歷樹、DOM選擇器、DOM節(jié)點(diǎn)增刪改查、DOM樣式操作、DOM位置獲取與偏移、DOM對象與標(biāo)簽區(qū)別、DOM虛擬化、DOM事件、
Event對象、定時(shí)器與監(jiān)聽器、事件委托、事件代理、事件分流、事件冒泡、默認(rèn)行為、事件捕獲、防抖、節(jié)流、滾動、鍵盤行為、事件降頻、行為鎖機(jī)制、
拖拽模組、碰撞檢測、距離判斷、三角函數(shù)、方向判斷、運(yùn)動框架、彈性運(yùn)動、重力加速度、DOM樹、CSSOM樹、渲染解析、加載、回流、重繪、瀏覽器線程與阻塞。
BOM深入、window對象、navigator、history、screen、location、spa概念、本地傳參、日期對象使用、日期格式化封裝、隨機(jī)封裝、DOM分片容器
JS業(yè)務(wù)應(yīng)用擴(kuò)展
JSON對象、數(shù)據(jù)解析、JSON方法、模板渲染、緩存懶加載、正則表達(dá)式RegExp、元字符、修飾符、正向預(yù)查、貪婪模式、replace方法、分組與不分組、test、match與exec
正則庫封裝、表單校驗(yàn)、圖片預(yù)存懶加載、自定義封裝滾動組件、多重輪播（循環(huán)、視差、旋轉(zhuǎn)木馬）、選項(xiàng)卡切換、樓梯導(dǎo)航、吸頂導(dǎo)航、拖拽導(dǎo)航 、
JavaScript編碼風(fēng)格指南、console應(yīng)用技巧
ECMAScript5 --- ECMAScript9擴(kuò)展
版本解讀、應(yīng)用環(huán)境、let、const、解構(gòu)賦值、箭頭函數(shù)、對象解構(gòu)、reset參數(shù)解構(gòu)、class、set、get、extends、super、static、private實(shí)現(xiàn)、symbol、promise、proxy代理攔截、async/await
對象新增API、數(shù)組新增API、字符串新增API、原型屬性、對象修飾、代理攔截、鏈?zhǔn)皆儐?、空值合并運(yùn)算符、泡泡龍面向?qū)ο笥螒蜷_發(fā)

三、HTML5 / 移動端開發(fā) 部分

HTML5標(biāo)簽與API
HTML5概念、定義、新增特性、DTD對比、新增H5標(biāo)簽、新增語義化H5標(biāo)簽、H5表單
H5拖拽事件 video、audio、fullScreen、FileReader文件流、Blob對象、sessionStorage、localStorage、
網(wǎng)絡(luò)狀態(tài)、頁面生命周期、網(wǎng)頁狀態(tài)監(jiān)聽、地理信息與定位、canvas畫布、worker多線程、Notifications桌面通知
播放器開發(fā) canvas交互特效開發(fā)
移動端適配/事件
移動端適配概念、尺寸與分辨率原理、PPI與DPI計(jì)算、DIP與DPR設(shè)備像素概念、視口viewport概念、布局視口、視覺視口、理想視口
視口適配方案（Meta viewport）縮放設(shè)置 、screen窗口大小API、媒體查詢@media、rem適配、vw vh適配
移動端適配方案、flexible rem方案、 vh vw方案 、復(fù)合方案、高清適配方案、移動端字體縮放解決、1px邊框問題解決、半像素線
圖片高清適配、image-set、srcset、js拼接URL技巧、IPhonex劉海屏適配、安全區(qū)域、fit與env
Meta權(quán)限管理、兼容優(yōu)化、IOS頭部底部閃屏回退輸入框問題、輸入法空格問題、默認(rèn)首字母大寫問題、滑動卡頓問題等
終端樣式美化與訪問判斷
Touch事件組封裝、click延遲處理、FastClick使用、禁用縮放設(shè)置理想視口
常用類庫/工具
jquery: 元素選擇、增刪改差、事件處理、位置獲取、動畫過渡、高級方法、特效應(yīng)用
zepto：移動端的jquery、DOM操作、移動端事件、click延遲處理、touch事件組
基礎(chǔ)UI庫: layerUI 、easyUI、bootStrap、UI模塊化、UI庫使用技巧、文檔解讀、案例調(diào)試、表單系統(tǒng)
iScroll、touchjs等移動端事件庫使用
swiper：移動端網(wǎng)站觸摸滑動、輪播圖插件、模塊化應(yīng)用、源碼解讀
art-template: 模板引擎 模板語法、渲染方法、原生模板引擎實(shí)現(xiàn)
CSS預(yù)處理：sass、less使用 stylus深入學(xué)習(xí) 、預(yù)處理語法、css編程、 Minxin 、預(yù)處理函數(shù)、繼承、嵌套
vscode高級插件與配置 liveserver sass
模板化應(yīng)用 、預(yù)處理應(yīng)用
date-picker移動端原生組件開發(fā)
需求分析、業(yè)務(wù)規(guī)則、技術(shù)棧選型、文件輸出規(guī)則、技術(shù)分析
MVC模型概念與設(shè)計(jì)、業(yè)務(wù)邏輯分類
view層適配方案 原型布局搭建 模板化生成
工具函數(shù)開發(fā)、面向?qū)ο笫綐I(yè)務(wù)設(shè)計(jì) 功能類日期對象開發(fā)
交互業(yè)務(wù)封裝 模塊對接 優(yōu)化設(shè)計(jì) 面向?qū)ο蟾呒壋绦蛟O(shè)計(jì)
四、Nodejs與工程化開發(fā) 部分
Node原生基礎(chǔ)
Node基礎(chǔ)概念、NPM命令、V8引擎概念、JavaScript模塊化 CMD AMD UMD、EventLoop事件循環(huán)、同步異步、 阻塞非阻塞 、任務(wù)隊(duì)列、宏任務(wù)、微任務(wù)、
原生Node模塊、核心模塊與require、module、觸發(fā)器events與path模塊、fs模塊、Buffer對象、URL模塊、HTTP模塊 、stream流
Node原生封裝HTTP與文件服務(wù)器
Node框架
express框架使用、中間件、核心對象、路由配置、模板引擎、數(shù)據(jù)腳本、Router核心、CORS配置、錯(cuò)誤處理、校驗(yàn)封裝、PM2管理、nodemoon管理
MORGAN日志處理、查詢正則捕獲、中間件開發(fā)、bodyParse等第三方中間件使用 、文件流上傳下載、文件流切分
webpack工程化構(gòu)建
工程化概念、工程化工具介紹、webpack基礎(chǔ)知識、webpack配置與運(yùn)行、plugin插件、loader使用、入口出口配置、模塊modules、依賴處理、dev Server
target 、文件切分、build打包、熱處理、package管理、性能優(yōu)化、測試處理 、第三方插件使用、babel等
前后端數(shù)據(jù)交互
HTTP通信交互原理、請求響應(yīng)、MIME、URI地址、報(bào)文解析、端口、報(bào)文流、測試監(jiān)聽抓包、TCP/IP握手機(jī)制、網(wǎng)絡(luò)業(yè)務(wù)模型
代理、緩存、網(wǎng)關(guān)、隧道等概念、method與請求頭分類
基礎(chǔ)XMLHTTPRequest對象方法屬性、方法、ajax異步交互 、同源策略原理
原生js封裝ajax交互、 jquery的ajax封裝交互、jsonp跨域處理、cors跨域處理、攜帶cookie與跨域處理、代理服務(wù)器跨域處理、
cookie驗(yàn)證與通信 、axios庫的使用 代理、封裝、攔截、合并、二次封裝
通信加密策略、數(shù)據(jù)對稱加密、數(shù)據(jù)非對稱加密、RSA加密實(shí)踐、MD5加密實(shí)踐
登錄注冊與鑒權(quán)機(jī)制、Authenticity認(rèn)證、Token認(rèn)證、JWT認(rèn)證、session狀態(tài)管理、 oauth認(rèn)證
RESTful接口設(shè)計(jì)
RESTful設(shè)計(jì)原則、狀態(tài)碼設(shè)計(jì)與規(guī)范、服務(wù)器響應(yīng)規(guī)則與格式、前后端接口協(xié)議制定、傳統(tǒng)RESTful改進(jìn)
API設(shè)計(jì)規(guī)范、 資源定位、JSON模式、合約說明、資源標(biāo)識符、緩存友好API、HTTP頭管理、文檔定義、松耦合原則、一致性、重用、穩(wěn)定性原則
數(shù)據(jù)庫存儲
MongoDB基礎(chǔ)概念、NoSQL與SQL、CAP定理、RDBMS、MongoDB語法、指令、監(jiān)控與GUI、MongoDb驅(qū)動、Mongoose應(yīng)用
數(shù)據(jù)庫創(chuàng)建、集合增刪改查、文檔增刪改查、數(shù)據(jù)庫查詢、高級查詢操作、通道查詢、多條件查詢、反向篩選、索引處理、aggregate聚合管道、
validation驗(yàn)證、population聯(lián)表、middleware中間件處理、查詢ERROR類二次封裝
博客后臺項(xiàng)目實(shí)戰(zhàn)
數(shù)據(jù)庫設(shè)計(jì)、服務(wù)端路由搭建、接口設(shè)計(jì)與API管理、通信交互管道封裝、注冊登錄、路由導(dǎo)航、前端路由管理、權(quán)限管理、用戶管理、分類管理、標(biāo)簽管理
、文章管理、模塊化功能封裝、校驗(yàn)庫封裝、promise鏈?zhǔn)叫袨榉庋b、
異步模塊處理、SPA單頁面應(yīng)用初級實(shí)現(xiàn)、原生集中行為控制器、模板化+模塊化+預(yù)處理+工程化實(shí)現(xiàn)前端頁面
組件化封裝
組件化基礎(chǔ)概念、組件設(shè)計(jì)原則、組件封裝、組件耦合與解耦、工程化+模板化+模塊化實(shí)現(xiàn)原生組件化功能、
五、Vue框架部分
vue基礎(chǔ)
vue開發(fā)準(zhǔn)備、工具與插件、mvc mvp mvvm設(shè)計(jì)理念、原生js實(shí)現(xiàn)MVVM核心框架、vue設(shè)計(jì)模式、生命周期、命令與屬性、組件化
數(shù)據(jù)驅(qū)動與雙向綁定、虛擬DOM概念原理、模板語法、條件與列表、數(shù)組監(jiān)測、計(jì)算屬性、事件處理、修飾與表單、監(jiān)聽器、過濾器、
methods watch computed filter對比、組件化開發(fā)、動態(tài)組件、組件通信、高級組件通信、插槽、vue動畫 、實(shí)例對象、set、get、nextTick、vue插件
vue工程化
Babel、webpack配置vue、vue單文件組件、vue-cli、工程平臺處理、postCss、animate、core、socket、lodash工具、vue-cli插件、preset、靜態(tài)資源處理、
環(huán)境變量與膜還是切換、工程化部署、工程構(gòu)建
vue Router
vue路由概念、嵌套路由、路由視圖、動態(tài)路由、路由匹配、編程式導(dǎo)航、history、hash模式管理、命名視圖、重定向與別名、導(dǎo)航守衛(wèi)、路由元信息、滾動與懶加載、導(dǎo)航故障處理
vuex
vuex核心概念、EventBus對比、狀態(tài)管理模式、Store、state、getter、mutation、action、moudule
vuex輔助函數(shù)與API功能、vuex環(huán)境選擇、vuex模塊化處理規(guī)則與技巧、對象風(fēng)格提交方式、模塊重用等
vue項(xiàng)目實(shí)戰(zhàn)
vue博客項(xiàng)目實(shí)戰(zhàn) PC + 移動端、 elementUI、vantUI、websocket聊天室、虛擬人偶、vueScroll、store、qs、nprogress、editor、
文章分類、詞云效果、spa單頁面應(yīng)用、移動PC無縫切換、完整注冊登錄、vue加密鑒權(quán)、http封裝管理、錯(cuò)誤處理封裝、vuex核心狀態(tài)管理、本地存儲狀態(tài)更新、令牌處理、
文章富文本編輯、點(diǎn)贊、收藏、訪問、評論、組件封裝、組件復(fù)用、組件混合、高級組件開發(fā)、復(fù)合性組件通信、vue中處理原生DOM行為、vue常見錯(cuò)誤處理、
重置vue數(shù)據(jù)響應(yīng)、個(gè)人信息修改、頭像上傳、通知組件封裝、postcss應(yīng)用、項(xiàng)目打包優(yōu)化。