前端工程師-2020版

前端工程師-2020版

超清原畫 完整無密 網盤下載

前端開發相比其餘IT開發崗位，門檻更低，更易上手，更適合初學者學習
近幾年的前端職業趨勢逐漸走高。薪資可觀，前景看好，如今入行剛恰好！
章節目錄：
階段一：前端基礎入門
27門課 /課程總時長：47小時 /練習題：405 /大做業：2 /考試：2 /教輔資料：68

第1周 HTML5基礎語法與標籤
本週是入門前端的第一步，學會IDE插件安裝和使用，掌握H5語法和基礎標籤的應用，學完本週內容能夠進行簡單的頁面結構搭建。

課程安排：
一、瞭解前端行業發展
二、瞭解HTML5對於網頁的意義
三、學習經常使用標籤/屬性，進行結構搭建
四、掌握無序列表/有序列表/自定義列表
五、學習表單標籤/屬性，能建立常見表單結構
六、掌握標籤嵌套規則/行內元素/塊元素的使用
七、學習VSCode開發工具使用，能建立簡單網頁

第2周 CSS3基礎語法與盒模型
CSS3是網頁的"美容師"，本週開始學習CSS3樣式，掌握語法結構、選擇器、盒子模型、文本和字體樣式設置，可以對網頁進行簡單的樣式開發。

課程安排：
一、掌握CSS3基本語法和使用
二、掌握CSS3各種選擇器/樣式屬性，快速進行樣式設置
三、學習文本、字體等常見屬性
四、盒子模型核心知識講解，深刻理解原理
五、掌握行內元素和塊級元素設置與轉換

第3周 CSS3浮動定位與背景樣式
簡單的樣式開發還不夠，經過掌握浮動、定位、邊框、背景樣式以及2D&3D轉換，以及佈局技巧。可以進行特殊圖形繪製，開發更美觀的網頁效果。

課程安排：
一、浮動與定位核心知識，靈活運用實現網頁佈局
二、常見佈局方法，解決佈局常見問題
三、如何繪製圓角邊框/陰影框/圖片邊框等特殊圖形
四、掌握元素扭曲/移位/旋轉，更自由的裝飾HTML
五、BFC規範和瀏覽器差別

第4周 CSS3動畫與窮遊首頁開發實戰
CSS3也能實現炫酷的網頁動態效果，結合企業級上線「旅遊網」項目，綜合運用前面所學的知識，完成窮遊首頁排版佈局和CSS3動畫特效開發。

課程安排：
一、大項目：結合H5/CSS3，完成PC端仿窮遊首頁佈局開發
二、掌握不一樣佈局結構與技巧
三、掌握過渡的使用與緩動效果，實現常見小案例
四、運用動畫效果，實現炫酷動畫效果
五、大做業：慕家居網頁佈局開發

第5周 JS基礎語法與表達式
JS是網頁編程的第一步，本週開始學習JS編程語言，掌握基礎語法結構、變量聲明和命名規則、數據類型、表達式和操做符，學完本週內容能夠進行簡單的JS代碼編寫。

課程安排：
一、掌握JS基本語法使用
二、掌握JS變量聲明與提高的機理
三、掌握JS運算符操做與表達式
四、學習基本數據類型和複雜數據類型使用
五、深刻理解數據類型轉換與檢測
六、小案例：計算器和表達式綜合運用

第6周 JS流程控制語句與數組
本週繼續深刻學習JS編程語言，掌握條件分支語句、循環語句和數組，學完本週內容能夠用簡潔的代碼實現強大功能。

課程安排：
一、掌握if，if elseif，switch等條件分支語句使用
二、掌握for、while、do while循環語句使用
三、掌握數組基本使用和經常使用方法
四、break和continue語句的特色及應用
五、運用數組知識，學習基本算法
六、使用簡單的邏輯實現複雜業務邏輯
七、小案例：常見算法綜合運用

第7周 JS函數與DOM
如想實現更炫的動態效果，那麼操控網頁元素很重要，經過掌握函數編程、DOM操做、事件以及BOM對象，讓你能實現典型的觸發和動態交互效果。

課程安排：
一、掌握DOM操做和DOM事件
二、掌握函數基礎與函數高級應用
三、掌握BOM瀏覽器對象模型，與瀏覽器「對話」
四、掌握函數封裝，提高編碼質量
五、小案例：有趣的動畫效果開發

第8周 面向對象
面向對象是開發中很是重要的思想，在本週咱們將開始運用面向對象思想進行程序開發，編寫高質量代碼，解決企業級編程協同問題。

課程安排：
一、學習this規則與使用
二、掌握構造函數概念以及建立、調用與使用
三、理解原型和原型鏈的關係與運用
四、閉包和做用域應用
五、熟練使用面向對象思想進行DOM編程
六、掌握JS模塊化編程方式，編寫高質量代碼
七、掌握模塊化開發技巧，解決企業級編程協同問題
八、小案例：俄羅斯方塊遊戲開發

第9周 項目實戰：仿窮遊JS特效開發
實戰出真知，本週綜合運用H五、CSS3和JS所學知識，從0到1完成一個具有CSS3動畫和JS特效的多特效旅遊網頁。掌握企業常見的網頁開發方式和各種特效實現方案。

課程安排：
一、結合H5/CSS3/JS，完成PC端仿窮遊首頁特效開發
二、項目動畫效果分析，幫助更快梳理思路
三、實現典型JS特效效果：Banner輪播圖、返回頂部動畫、垂直菜單
四、學習正則表達式，完成常見手機號、郵箱、姓名等功能驗證
三、大做業：慕家居網頁JS特效開發

階段二：組件化與移動WebApp開發
24門課 /課程總時長：53小時 /練習題：137 /大做業：3 /考試：2 /教輔資料：89

第10周 ES6基礎入門
ES6是JavaScript新的語法規範，讓代碼更規範、可讀性高、方便操做。本週將開啓ES6的學習，這是學習前端必備的一步。掌握ES6相關知識後，可以更便捷的編寫代碼，提升開發效率。

課程安排：
一、ES6基本語法與使用
二、掌握ES6中變量和常量的使用與區別
三、學習能夠嵌入表達式的字符串字面量--模板字符串
四、掌握箭頭函數的特色與應用
五、掌握如何自動解析數組或對象中的值
六、瞭解對象字面量更加簡潔與靈活的表達方式
七、掌握參數默認值的使用

第11周 ES6語法擴展
本週將繼續學習ES6的基礎，經過進一步學習ES6引入的新特性，瞭解ES6的新方法，掌握新的集合類型，更深刻的瞭解數據的遍歷。

課程安排：
一、剩餘參數與展開運算符的對比進行學習
二、瞭解如何實現減小邏輯或操做符的使用
三、認識ES6中新增的數據結構
四、瞭解ES6中新增的方法
五、瞭解遍歷原理，以及學習新的循環方式

第12周 ES6之Promise與Class類
Promise 和 Class（類）是ES6中很是重要的知識點。Promise 是異步編程的一種解決方案，比傳統的回調函數更合理和更強大。Class（類）來做爲對象的模板使用，強化面向對象的使用。

課程安排：
一、學習如何高效解決回調地域問題
二、瞭解如何運用ES6 Promise進行異步編程
三、掌握Class基本語法的使用
四、掌握更加清晰與便捷的對象繼承方式
五、掌握更高級的面向對象編程思想

第13周 ES6之Module模塊與Babel編譯
ES6 在語言標準的層面上，實現了模塊功能。能夠實現將一個大程序拆分紅互相依賴的小文件。而babel的使用，完美的解決了ES6的兼容性問題，讓ES6有更多可能性，使先後端差別愈來愈小。

課程安排：
一、瞭解企業級的開發形式——模塊化的使用
二、學習將一個複雜的功能拆分，從而提升複用率
三、瞭解如何更好的維護代碼
四、掌握babel轉換器的使用，解決ES6的兼容問題
五、學習如何將Webpack與配合Babel使用，完成更高效的開發
六、掌握Webpack項目構建配置

第14-15周 HTTP 協議、存儲、Ajax
本週將開啓先後端數據交互的學習，來理解先後端開發的區別，瞭解網絡通訊的相關概念，並對與後臺通訊、獲取數據有一個初體驗。概念比較抽象，先做爲了解。在後面項目開發環節，隨着對知識的運用，對概念會有更深一步的理解。

課程安排：
一、瞭解如何區分先後端
二、理解HTTP協議，熟悉網絡通訊相關概念
三、學習本地存儲的多種方式，瞭解數據緩存機制
四、瞭解JOSN數據的幾種書寫格式
五、熟悉原生Ajax請求流程與細節
六、掌握常見的跨域技巧
七、學習如何本身封裝Ajax
八、瞭解基於promise的Ajax插件——Axios

第16周 項目實戰：仿窮遊組件化開發
組件化開發是一種高級編程思想，適用於團隊協做開發，是企業中常見的一種開發模式。本週會使用組件化方式來完成「仿窮遊商城首頁」的重構。掌握組件化開發可以更好的促進團隊協做，提升開發和調試效率，可維護性更高。

課程安排：
一、綜合運用H5/CSS3/ES6等知識，使用「組件化的開發思想」重構旅遊網首頁
二、瞭解項目組件化劃分方式
三、瞭解模塊化與組件化區別
四、採用模塊化與組件化結合的開發方式
五、使用Webpack構建項目
六、運用 art-template 模板引擎，高效開發
七、真實的數據接口，實現先後臺聯動
八、經過本身封裝的Ajax向後端請求數據
九、使用Class、Module模塊完成輪播圖的基類，實現模塊化，提升複用率

第17周 移動基礎
移動開發基礎是進行webApp開發第一步。本週將開啓前端學習的新篇章。經過移動端基礎知識的學習，可以獨立實現適配不一樣移動端終端的頁面。

課程安排：
一、學習移動基礎概念
二、理解移動端與pc端web開發的區別
三、掌握移動端經常使用的Rem適配方案
四、掌握Flex佈局的使用
五、學習響應式佈局開發
六、不一樣的適配方法
七、學習柵格系統的使用
八、瞭解移動端屏幕、移動端瀏覽器、操做系統的不一樣

第18周 移動進階之高效開發
移動端高質量的開發，是移動端開發的必備技能。本週繼續移動端的學習，學習移動端的事件、開發中的常見問題，以及如何使項目的性能更加優化。

課程安排：
一、掌握移動端經常使用的事件
二、小案例：移動端幻燈片的實現
三、移動端開發中常見的問題
四、主流移動端頁面開發技術選型與解決方案
五、學習如何從HTML、CSS、JavaScript三方面優化性能

第19周 項目實戰：仿窮遊移動webapp開發
接下來的一週，咱們將迎來webApp項目的開發，實現從PC端開發邁向移動端。從項目分析、組件劃分、結構搭建、功能實現、性能優化。體驗真實企業中移動端項目的開發流程

課程安排：
一、綜合運用H5/CSS3/ES6/移動知識，重構旅遊網WebAPP的首頁、目的地頁
二、符合企業標準的開發流程，從項目分析、項目搭建、模塊開發到數據對接
三、採用模塊化與組件化結合的開發方式
四、使用Webpack構建項目
五、運用 art-template 模板引擎，高效開發。
六、完成 18 個典型組件開發（搜索、商品、導航等組件）
七、運用Swiper高效移動端插件開發輪播圖
八、使用Ajax 處理與獲取數據
九、如何處理屢次請求的解決方案
十、如何運用組件化思惟，拆分和複用組件
十一、完成各組件性能的優化

階段三：小程序與主流框架開發
14門課 /課程總時長：48小時 /練習題：175 /大做業：3 /考試：1 /教輔資料：10

第20周 小程序基礎與慕課小程序實戰
本週開始學習爆火的輕應用開發技術——小程序 。經過對小程序知識的學習，可以獨立開發企業級小程序，擁有解決主流小程序功能需求的能力。

課程安排：
一、大項目：結合Flex/Template模板，開發慕課小程序首頁/活動頁/熱門排行頁
二、瞭解小程序註冊流程/註冊方式/註冊主體
三、小程序的全局生命週期和頁面級生命週期
四、小程序基礎語法與經常使用API
五、小程序開發工具的調試辦法
六、小程序多頁面下的開發工做流及目錄結構

第21周 React.js基礎語法與新聞網站實戰
React.js是企業開發熱門框架之一 。經過對React.js基礎和項目的學習，具有構建企業級項目和解決核心業務問題的能力，快速接入企業項目。

課程安排：
一、大做業：運用React組件完成新聞網站項目常見功能開發
二、理解React的開發理念與內部原理
三、React的基本使用及Ant Design組件庫進行項目開發
四、使用React封裝項目中用到組件，實現複用
五、React項目中常見問題的解決方案
六、如何運用React-Redux進行狀態管理
七、聲明式編程的思想與組件化開發的思想

第22-23周 Sass基礎與Vue.js基礎語法
Vue.js是企業開發另外一熱門框架，易用、靈活、高效，對於初學者很友好。本週經過對Vue.js基礎和Sass佈局技術的學習，爲後續的全棧項目開發打下基礎。

課程安排：
一、大做業：訂單列表和購物車列表頁
二、掌握Webpack項目構建配置
三、掌握基礎語法與常見API
四、組件的使用及組件的生命週期
五、Axios網絡請求及路由使用
六、Vuex的引入、應用場景及項目中的實現
七、使用Vue.js技術棧進行項目開發的方式方法
八、掌握Sass佈局基礎

第24周 項目實戰：Vue.js仿京東到家電商全棧項目前端開發（上）
從本週開始進入到電商全棧項目開發，首先使用Vue.js前端實戰的第一部分首頁和商家詳情頁，還原實際開發流程，綜合運用所學知識，完成頁面開發，掌握開發中常見問題解決技巧。

課程安排：
一、綜合運用Sass和Vue.js完成登陸頁/註冊頁/首頁/商家詳情頁
二、使用vue-cli4.0建立開發環境
三、使用axios發送Mock請求
四、使用路由守衛實現基礎登錄校驗功能
五、動態路由/異步路由與組件拆分複用
六、首頁/商家詳情頁數據渲染
七、Vue.js項目中常見問題的解決方案

第25-26周 項目實戰：Vue.js仿京東到家電商全棧項目前端（下）
Vue.js前端項目實戰的第二部分，實現電商核心業務訂單和地址管理模塊，掌握開發中常見問題解決技巧，真實數據訪問，開發完整的Vue.js電商前端項目。

課程安排：
一、綜合運用Sass和Vue.js完成訂單提交頁/地址列表頁/地址編輯/地址新建頁
二、使用axios發送Mock 請求
三、動態路由/異步路由與組件拆分複用
四、訂單提交頁/地址列表頁數據渲染
五、Vue.js項目中常見問題的解決方案
六、步驟大做業：完成訂單列表頁和購物車列表頁開發

階段四：Node.js全棧開發
11門課 /課程總時長：42小時 /練習題：56 /大做業：1 /考試：1 /教輔資料：59

第27周 全棧必備基礎Node.js
學前端不至於前端，從本週開始學習服務端基礎知識，掌握什麼是服務端以及服務端必備node.js，夯實基礎，邁進前端全棧開發。

課程安排：
一、案例：搭建node.js服務器及建立MongoDB數據庫
二、瞭解什麼是服務端，服務端與前端的關係
三、掌握commonjs模塊化與npm插件使用
四、掌握inspect調試方法

第28周 koa2中間件與MongoDB數據庫
真實企業開發離不開數據庫，Koa2框架有效的提升開發效率，本週掌握前端必備的前端全棧開發知識，爲後面開發全棧項目蓄力。

課程安排：
一、瞭解koa2中間件與洋蔥圈模型
二、瞭解關係型數據庫與MongoDB基礎API詳解
三、掌握node.js操做MongoDB方法與mongoose規範數據模型

第29-30周 項目實戰：node.js仿京東到家電商全棧項目後端開發
本週開始進入到電商全棧項目的後端開發，對標企業標準開發流程。從登陸實現方案、項目需求分析、接口和數據結構設計到業務開發，幫你打通先後端任督二脈，突破全棧技術瓶頸，爲就業加碼。

課程安排：
一、綜合運用Node.js+koa2+MongoDB，實現電商全棧項目的後端
二、掌握企業的開發流程與技巧，從0到1一步步實現
三、項目採用先後端分離開發模式
四、核心業務的數據庫設計與實現
五、真實數據接口和設計與實現
六、Koa工做流程及常見Koa中間件使用
七、掌握先後端數據聯調技巧，打通先後的數據交互
八、常見MongoDB與nodejs集成
九、瞭解cookie 和session的關係
十、大做業：訂單和購物車列表頁的數據庫和接口設計

第31周 就業必備基礎技術面試分析
面試是通往成功就業的關鍵一步，本週包含佈局基礎以及JS和ES6等常見考點和經典面試題分析，帶你把知識串成線，掌握前端面試技巧，順利通關基礎技能面試。

課程安排：
一、H5語義化/CSS佈局/定位/圖文樣式/響應式面試解題技巧
二、原型和原型鏈的5個原則與面試解題技巧
三、變量類型/計算/構造函數的面試解題技巧
四、做用域和閉包的執行上下文/this面試解題技巧
五、異步和單線程/常見的內置對象面試解題技巧
六、DOM本質/節點操做/BOM操做面試解題技巧
七、AJAX與事件解面試題技巧

第32周 就業必備框架與全棧技術面試分析
框架、小程序以及全棧相關內容也是面試必考。本週帶你們梳理的常見考點和經典面試題分析，理清面試解題方法論，完成最後一釐米的衝刺。

課程安排：一、Vue.js原理/MVVM面試解題技巧二、組件生命週期/父子組件傳值面試解題技巧三、組件異步加載/緩存/抽離公共邏輯面試解題技巧四、vue-router/data監聽面試解題技巧+5道Vue.js真題演練五、React基礎語法/事件面試解題技巧六、React組件生命週期/父子組件通信面試解題技巧七、React函數組件與class組件區別面試解題技巧八、Redux/react-router面試解題技巧