目前web前端工程師日均崗位缺口已經(jīng)超過(guò)50000，隨著互聯(lián)網(wǎng)+的深入發(fā)展，html5作為前端展示技術(shù)，市場(chǎng)人才需求量將呈直線上漲。
Web前端工程師的崗位職責(zé)是利用HTML、CSS、Java、DOM等各種web技能結(jié)合產(chǎn)品的界面開(kāi)發(fā)，制作標(biāo)準(zhǔn)化純手工代碼，并增加交互功能，豐富互聯(lián)網(wǎng)的Web開(kāi)拓，致力于改進(jìn)用戶體驗(yàn)。現(xiàn)如今，Web前端工程師已經(jīng)成為各大互聯(lián)網(wǎng)公司不可或缺的熱門(mén)職位，從業(yè)者隊(duì)伍日漸龐大，這其中不乏零基礎(chǔ)學(xué)習(xí)者和轉(zhuǎn)行人士。為了方便大家系統(tǒng)而全面的掌握前端基礎(chǔ)知識(shí)，小編特意整理了web前端開(kāi)發(fā)入門(mén)學(xué)習(xí)線路圖，涵蓋20大實(shí)戰(zhàn)項(xiàng)目的知識(shí)點(diǎn)詳細(xì)講解，希望對(duì)大家的學(xué)習(xí)有所幫助。
項(xiàng)目一：PC端網(wǎng)站布局
所含知識(shí)點(diǎn)：HTML基礎(chǔ)，CSS基礎(chǔ)，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢出及元素類(lèi)型，瀏覽器兼容與寬高自適度，定位，錨點(diǎn)與透明，圖片整合，表格，CSS屬性與濾鏡
項(xiàng)目二：HTML5+CSS3基礎(chǔ)項(xiàng)目
所含知識(shí)點(diǎn)：HTML5新增的元素與屬性，表單域增強(qiáng)元素，CSS3選擇器，文字字體相關(guān)樣式，CSS3位移與變形處理，CSS3 2D轉(zhuǎn)換與過(guò)度動(dòng)畫(huà)，CSS3 3D轉(zhuǎn)換與關(guān)鍵幀動(dòng)畫(huà)，彈性盒模型，媒體查詢，響應(yīng)式設(shè)計(jì)
項(xiàng)目三：WebApp頁(yè)面布局項(xiàng)目
所含知識(shí)點(diǎn)：移動(dòng)端頁(yè)面設(shè)計(jì)規(guī)范，移動(dòng)端切圖，文字流式/控件彈性/圖片等比例/特殊設(shè)計(jì)的100%布局，等比縮放布局，viewport/meta，rem/vw的使用，flexbox詳解，移動(dòng)web特別樣式處理（reset, 1px border, 高清圖片）
項(xiàng)目四：原生Java交互功能開(kāi)發(fā)項(xiàng)目
所含知識(shí)點(diǎn)：基本語(yǔ)法，循環(huán)語(yǔ)句，函數(shù)與數(shù)組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲(chǔ)，正則表達(dá)式，Ajax，面向?qū)ο蠡A(chǔ)，運(yùn)動(dòng)與游戲開(kāi)發(fā)
項(xiàng)目五：面向?qū)ο筮M(jìn)階與ES5/ES6應(yīng)用項(xiàng)目
所含知識(shí)點(diǎn)：Promise/A+，設(shè)計(jì)模式（觀察者模式等），原型鏈，構(gòu)造函數(shù)，執(zhí)行上下文棧與執(zhí)行上下文，變量對(duì)象與活動(dòng)對(duì)象，作用域鏈，閉包，this，ES5，ES6
項(xiàng)目六：Java工具庫(kù)自主研發(fā)項(xiàng)目
所含知識(shí)點(diǎn)：DOM庫(kù)，事件庫(kù)，AJAX庫(kù)，原型和繼承庫(kù)，MVVM核心庫(kù)，基于SPA的路由庫(kù)
項(xiàng)目七：jQuery經(jīng)典交互特效開(kāi)發(fā)
所含知識(shí)點(diǎn)：時(shí)間軸特效，tab頁(yè)面切換效果，網(wǎng)頁(yè)定位導(dǎo)航特效，滑動(dòng)門(mén)特效，焦點(diǎn)圖輪播特效，導(dǎo)航條菜單效果，瀑布流特效，彈出層效果，倒計(jì)時(shí)效果，抽獎(jiǎng)效果
項(xiàng)目八：PHP+MySQL后端基礎(chǔ)項(xiàng)目
所含知識(shí)點(diǎn)：PHP，MySQL，HTTP(s)協(xié)議詳解，Ajax進(jìn)階、跨域與Defered，Apache與Nginx 環(huán)境搭建與配置，接口的定義，Mock數(shù)據(jù)，Restful，前后端聯(lián)調(diào)，前端安全(XSS,CSRF,JSON注入)
項(xiàng)目九：前端工程化與模塊化應(yīng)用項(xiàng)目
所含知識(shí)點(diǎn)：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模塊化
項(xiàng)目十：PC端全棧開(kāi)發(fā)項(xiàng)目
所含知識(shí)點(diǎn)：大首頁(yè)、列表頁(yè)與詳情頁(yè)展示與交互特效、搜索、登錄與注冊(cè)、購(gòu)物車(chē)、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平臺(tái)系統(tǒng)前端
項(xiàng)目十一：應(yīng)用Vue.js開(kāi)發(fā)WebApp項(xiàng)目
所含知識(shí)點(diǎn)：Vue.js基礎(chǔ)，模塊化，單文件組件，路由，與服務(wù)器通信，狀態(tài)管理，單元測(cè)試與生產(chǎn)發(fā)布，服務(wù)端渲染SSR與Nuxt.js，基于Vue.js企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)(Mint UI, Element UI)
項(xiàng)目十二：應(yīng)用React.js開(kāi)發(fā)WebApp項(xiàng)目
所含知識(shí)點(diǎn)：ReactJS基礎(chǔ)，JSX語(yǔ)法，組件，flux+Redux，React，Router路由，動(dòng)畫(huà)效果，基于React 企業(yè)級(jí)項(xiàng)目研發(fā)( Antd, Antd Mobile）
項(xiàng)目十三：應(yīng)用Angular開(kāi)發(fā)WebApp項(xiàng)目
所含知識(shí)點(diǎn)：Type 基礎(chǔ)與進(jìn)階，開(kāi)發(fā)環(huán)境配置，Hello World，架構(gòu)、模塊與組件，模板，元數(shù)據(jù)、數(shù)據(jù)綁定與數(shù)據(jù)顯示，表單，服務(wù)與指令，依賴注入，路由，Ionic 3 MUI框架
項(xiàng)目十四：微信公眾號(hào)開(kāi)發(fā)
所含知識(shí)點(diǎn)：初識(shí)微信公眾號(hào)，訂閱號(hào)的基本功能，使用百度BAE實(shí)現(xiàn)代碼的快速上線，使用Git完成線上代碼部署，公眾號(hào)開(kāi)發(fā)權(quán)限及功能接入，微信JSSDK接口API，微信場(chǎng)景項(xiàng)目開(kāi)發(fā)與接入
項(xiàng)目十五：微信小程序開(kāi)發(fā)
所含知識(shí)點(diǎn)：微信小程序初探，小程序入門(mén)必學(xué)，小程序組件體驗(yàn)，小程序大功能，項(xiàng)目實(shí)戰(zhàn)帶你征服小程序
項(xiàng)目十六：React Native
所含知識(shí)點(diǎn)：React Native 初探，React Native 項(xiàng)目導(dǎo)航，React Native 項(xiàng)目文本框，React Native 項(xiàng)目滾動(dòng)分頁(yè)，React Native 項(xiàng)目第三方登錄，React Native 其他組件
項(xiàng)目十七：各類(lèi)混合應(yīng)用開(kāi)發(fā)
所含知識(shí)點(diǎn)：自主原生Navtive Hybrid(iOS、Android)，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架MUI + HTML5+
項(xiàng)目十八：NodeJS全棧開(kāi)發(fā)
所含知識(shí)點(diǎn)：
（1）Node.js基礎(chǔ)項(xiàng)目——NodeJS介紹，開(kāi)發(fā)環(huán)境搭建，模塊與包管理工具，CommonJS模塊，URL網(wǎng)址解析，QueryString參數(shù)處理，HTTP模塊，HTTP小爬蟲(chóng)，request方法，事件 events模塊，文件 fs模塊，Stream 流模塊，原生路由與參數(shù)接收，讀取圖片文件，npm s，Yarn 與 PM2
（2）MongoDB——MongoDB介紹與環(huán)境搭建，數(shù)據(jù)庫(kù)常用命令，Collection聚集集合，document文檔操作，聚集集合查詢，NodeJS連接MongoDB
（3）GraphGL——GraphQL初探：從REST到GraphQL，GraphGL安裝，準(zhǔn)備數(shù)據(jù)源，搭建GraphQL服務(wù)器，數(shù)據(jù)查詢
（4） Express——express 介紹，安裝和創(chuàng)建基于Express的項(xiàng)目，Express 4.1x 初始化項(xiàng)目詳解，路由簡(jiǎn)介，模板引擎EJS，模板引擎Pug（Jade）
（5）Koa——Koa入門(mén)、Koa應(yīng)用、中間件、Context、async await、請(qǐng)求與響應(yīng)
（6）測(cè)試框架mocha——搭建框架、斷言assert、項(xiàng)目測(cè)試、運(yùn)行多個(gè)測(cè)試
（7）socket 即時(shí)通信項(xiàng)目——Socket簡(jiǎn)介和通訊流程，基于net模塊實(shí)現(xiàn)socket，WebSocket，Socket.io
項(xiàng)目十九：Node.js高級(jí)全棧項(xiàng)目
所含知識(shí)點(diǎn)：基于Vue+Node+MongoDB+微信的高級(jí)全棧項(xiàng)目開(kāi)發(fā)
項(xiàng)目二十：大數(shù)據(jù)可視化
所含知識(shí)點(diǎn)：數(shù)據(jù)可視化入門(mén)，數(shù)據(jù)可視化基礎(chǔ)，零編程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門(mén)，D3.js 高級(jí)應(yīng)用，D3.js 應(yīng)用工具：NVD3、n3，charts，Highcharts，F(xiàn)usionCharts，Polymaps
在前端學(xué)習(xí)的起步階段，最重要的就是要有明確目標(biāo)和合理的學(xué)習(xí)規(guī)劃，為此小編特別為大家總結(jié)了web前端基礎(chǔ)學(xué)習(xí)階段的四大學(xué)習(xí)要點(diǎn)，希望能讓大大家的學(xué)習(xí)變得更加高效：
一、基本知識(shí)的掌握 在我們梳理的知識(shí)架構(gòu)中，按照我們分析的兩個(gè)維度里最前置的、最淺顯的部分，作為打基礎(chǔ)的階段，必須要在這個(gè)過(guò)程中更多投入到實(shí)踐中去，我們通常做的多了、熟練了，就認(rèn)為這部分知識(shí)和內(nèi)容掌握。
二、常用工具的掌握 對(duì)于常用工具的掌握應(yīng)該掌握一些有大公司或?qū)I(yè)團(tuán)隊(duì)背景的流行工具，這些工具的熟練掌握能夠提升專(zhuān)業(yè)度、職業(yè)度，同時(shí)，能提升我們的工作效率。
三、溝通技巧的掌握 在國(guó)內(nèi)，技術(shù)人員通常都是自己制定方案、自己執(zhí)行方案，在執(zhí)行過(guò)程中又缺乏相關(guān)產(chǎn)品、交互設(shè)計(jì)等人員的溝通，大多是在自己的思路貫徹下進(jìn)行開(kāi)發(fā)，久而久之，我們習(xí)慣于信任自己的觀點(diǎn)、在自己的視角看問(wèn)題，對(duì)于挑戰(zhàn)總是百般地“據(jù)理”力爭(zhēng)。我們需要更多提升的是，如何在對(duì)方的視角看問(wèn)題、如何在用戶的視角看問(wèn)題。
四、良好的開(kāi)發(fā)習(xí)慣 開(kāi)發(fā)習(xí)慣是養(yǎng)成的，一旦有不好的習(xí)慣，對(duì)于將來(lái)去修正帶來(lái)的將是很大的麻煩，培養(yǎng)良好的開(kāi)發(fā)習(xí)慣一定要從起步時(shí)做起，例如：寫(xiě)代碼之前先分析、先寫(xiě)文檔、先寫(xiě)注釋等等。
最后希望大家通過(guò)自己的努力與學(xué)習(xí)，都能成為一名能力全棧的web前端工程師。
聯(lián)系客服
