未經授權，不得轉載
| 總階段名稱 | 階段分支名稱 | 技術名稱 | 技術內容 | 學習目標 |
|---|---|---|---|---|
| 前端基礎階段 | WEB基礎 | HTML基礎 |
1.安裝webstorm 2.設置webstorm 3.HTML介紹 4.HTML屬性和值 5.HTML註釋 6.HTML基本結構（DTD文檔模型） 7.標題標籤h1-h6 8.段落標記p 9.強制換行br 10.水平線hr及其屬性 11.圖片img 12.超鏈接a 13.address和pre標籤 14.文本格式化標籤b,i,u,em等 15.無序列表 16.有序列表 17.自定義列表 18.表格 19.實體字符 20.內聯框架iframe 21.form表單及其action、method、name屬性 22.input 23.input常用屬性value，checked，readonly，disabled 24.下拉列表 25.多行文本框textarea 26.HTML5新增input類型 27.HTML5新增屬性 28.HTML5新增結構標籤 29.視頻和音頻 |
1.掌握WebStorm的使用 2.瞭解HTML對於網頁的意義 3.掌握HTML標籤與屬性 4.掌握常用標籤 5.掌握無序列表、有序列表和自定義列表 6.掌握表單的使用 7.掌握div與標籤的嵌套規則 8.掌握行內元素與塊元素的使用 9.掌握實體字符 10.掌握HTML5新增標籤與屬性 |
| CSS基礎 |
1.css介紹和基礎語法 2.引入css的方式 3.link和@import的區別 4.css基本選擇器 5.背景屬性 6.字體屬性 7.文本屬性 8.列表屬性 9.關係選擇器 10.屬性選擇器 11.僞類選擇器 12.僞對象選擇器 13.css hack 14.標準盒子模型、怪異盒子模型、彈性盒子模型 border、margin、padding屬性 15.IE和模型 16.box-sizing屬性 17.彈性盒 18.瀏覽器內核及廠商前綴 19.浮動及其原理 20.清除浮動的方法 21.display屬性 22.position定位（相對定位佈局、絕對定位佈局、固定定位佈局） 23.z-index屬性 24.圓角 25.陰影 26.漸變 27.轉換 28.過渡 29.動畫 30.媒體查詢 31.多列 32.滑動門 33.雪碧圖：小圖標合成雪碧圖，雪碧圖取法錨點、透明、相框模型等 34.溢出：單行溢出、多行溢出解決方案 |
1.掌握CSS基礎 2.掌握CSS引入方式 3.掌握選擇器的使用 4.掌握CSS盒子模型 5.掌握CSS彈性盒子模型 6.掌握浮動與定位 7.掌握字體常見屬性 8.掌握CSS Sprite 雪碧圖優化站點 9.掌握滑動門展示形式 |
||
| JavaScript階段 | JavaScript基礎語法 |
1.JavaScript簡介 2.JavaScript變量 3.JavaScript變量類型 4.JavaScript類型轉換 5.JavaScript運算符 6.JavaScript條件分支語句 7.JavaScript循環語句 8.內存問題 9.垃圾回收機制 |
1.熟知JavaScript介紹 2.掌握JavaScript變量聲明 3.掌握JavaScript變量類型與轉換 4.掌握JavaScript運算符操作 5.掌握JavaScript條件分支語句 6.掌握JavaScript循環語句 |
|
| 數組與對象 |
1.數組定義 2.數組的本質 3.數組屬性與運算符 4.數組的循環遍歷 5.數組靜態方法 6.數組的實例方法 7.對象概述 8.對象屬性操作 9.對象的靜態方法 10.對象的實例方法 |
1.掌握數組定義 2.掌握數字的應用 3.掌握數組的屬性和方法 4.掌握對象的概念 5.掌握對象的屬性和方法 6.熟練應用對象 |
||
| 函數及相關 |
1.函數的概念 2.函數的聲明 3.函數的屬性和方法 4.函數作用域 5.函數參數 6.函數返回值 7.閉包基本概念 8.閉包實現 9.閉包應用場景 10.自執行函數 |
1.瞭解函數概念 2.掌握函數的聲明 3.掌握函數的屬性和方法 4.掌握JavaScript中的作用域 5.掌握函數的參數與返回值 6.掌握閉包的應用場景 7.熟練使用閉包 |
||
| JavaScript標準庫 |
1.包裝對象 2.Number對象 3.String對象 4.Math對象 5.Date對象 6.JSON對象 7.RegExp對象 8.console對象 9.屬性描述對象 |
1.掌握包裝對象 2.掌握Number對象 3.掌握String對象 4.掌握Math對象 5.掌握Date對象 6.掌握JSON對象 7.掌握正則對象 8.熟悉console對象 |
||
| DOM模型與事件 |
1.DOM概述 2.Doucment節點 3.Element節點 4.屬性的操作 5.Text節點 6.DoucmentFragment節點 7.事件模型 8.事件類型 9.事件代理 10.CSS操作 11.自定義事件 12.this關鍵字 13.Event對象 14.移動端事件類型 15.事件實例操作 16.三級聯動 17.實例：模擬鍵盤 |
1.掌握JavaScript DOM操作 2.掌握JavaScript 節點操作 3.掌握事件模型 4.掌握事件操作 5.掌握this關鍵字 5.掌握Event對象 6.熟練編寫自定義事件 7.理解三級聯動邏輯 |
||
| BOM對象詳解 |
1.window對象 2.location對象 3.navigator對象 4.screen對象 5.history對象 6.BOM操作 7.定時器 8.實例：心形跳動、模擬時鐘、Tab自動切換 |
1.掌握JavaScript BOM操作 2.掌握BOM對象：Windows、location等 3.掌握定時器操作 |
||
| this、call、apply使用 |
1.this關鍵字 2.call和apply使用 3.bind綁定 4.變量作用域 5.閉包Closure 6.實例：Tab切換和實時時鐘 |
熟悉this、call、apply的用法 | ||
| 網絡請求與專題 |
1.瀏覽器類型區分 2.網絡請求基礎 3.HTTP協議 4.XHR對象 5.XHR實例屬性 6.XHR實例方法 7.XHR實例事件 8.文件上傳 9.封裝網絡請求 10.異步操作 11.錯誤處理機制 12.編程風格 13.跨域處理 14.本地存儲Cookie 15.本地存儲WebStorage |
1.掌握HTTP協議 2.掌握XHR對象 3.掌握Ajax 4.能夠獨立封裝Ajax網絡請求 5.瞭解錯誤處理機制 6.建立良好的編程風格 7.掌握本地存儲 |
||
| 實戰輪播圖、瀑布流 |
1.實例：JS原生封裝輪播圖 2.實例：JS原生封裝瀑布流 |
通過實例來熟悉JS原生代碼 | ||
| 原型、原型鏈、面向對象、設計模式、JSON |
1.對象簡介 2.構造函數 3.new 關鍵字 4.實例對象創建 5.Prototype對象 6.原型prototype與原型鏈 7.instanceof運算符 8.對象與繼承 9.對象操作與拷貝 10.多重繼承 11.模塊與封裝 12.設計模式:：工廠模式、構造函數模式、原型模式、混合模式、動態原型模式 13.工廠模式 14.觀察者模式 15.單例模式 16.MVC與MVVM 17.JSON解析 |
1.瞭解面向對象 2.熟悉構造函數 3.掌握new關鍵字 4.掌握原型與原型鏈的使用 5.掌握對象和常見操作 6.掌握繼承與封裝 7.掌握基本設計模式原理 8.掌握觀察者模式 9.掌握MVC和MVVM |
||
| 前端高級階段 | HTML5新特性 | HTML5新特性 |
1.HTML5語義化標籤 2.HTML5語義化標籤佈局 3.HTML5狀態標籤 4.HTML5列表標籤 5.HTML5註釋標籤 6.HTML5標記標籤 2.HTML5本地存儲 3.HTML5離線Web應用 4.HTML5連貫性 5.HTML5多媒體（video、audio、source） 6.HTML5性能提升 7.HTML5調用原生API 8.input新屬性 9.placeholder 10.autocomplete 11.autofocus 12.required 13.音階導航 14.自定義播放器 15.響應式佈局 16.媒體選擇器 17.子元素選擇器 18.相鄰兄弟選擇器 19.通用兄弟選擇器 20.伸縮盒模型新版本 21.伸縮盒模型老版本 22.伸縮盒模型佈局 23.多列布局 24.粘連佈局 25.聖盃佈局 26.雙飛翼佈局 27.僞等高佈局 28.bfc兩列布局 |
1.掌握HTML5新特性有哪些 2.掌握HTML5的語義化標籤實現方式 3.掌握HTML5的本地存儲方式 4.掌握HTML5提供的多媒體使用 5.掌握HTML5的各種佈局 |
| Canvas專列 |
1.Canvas基本使用 2.Canvas繪製矩形 3.Canvas橡皮擦 4.Canvas線段 5.Canvas三角形 6.Canvas五角星 7.Canvas簽名 8.Canvas圓形 9.Canvas圓弧 10.Canvas位移 11.Canvas縮放 12.Canvas旋轉 13.Canvas變換基點兩種形式 14.Canvas時鐘效果 15.Canvas加載圖片 16.Canvas飛鳥效果 17.Canvas線性漸變 18.Canvas徑向漸變 19.Canvas填充文字 20.Canvas鏤空字 21.Canvas文字水平垂直居中 22.Canvas文字陰影 23.Canvas和陰影 24.Canvas圖片合成 25.Canvas刮刮卡 26.Canvas讀取像素 27.Canvas寫入像素 28.Canvas創建像素對象 29.Canvas操作單個像素 30.Canvas馬賽克效果 31.HTML5 Canvas遊戲-連連看 32.HTML5 Canvas遊戲-消消樂 |
1.掌握HTML5 Canvas標籤應用 |
||
| CSS3新特性 | CSS3新特性 |
1.羣組選擇器 2.交集選擇器 3.基本屬性選擇器 4.包含屬性選擇器 5.錨點僞類 6.用戶行爲僞類 7.目標僞類 8.目標僞類實現圖片切換 9.checked狀態僞類 10.自定義單選按鈕 11.CSS3結構類 12.CSS3結構類實現尺子效果 13.否定選擇器 14.僞元素::first-line 15.僞元素::first-letter 16.僞元素::before 17.僞元素::after 18.僞元素::selection 19.僞元素實現文章列表 20.使用純css製作繪製三角形、梯形、圓形 21.子元素選擇器 22.相鄰兄弟選擇器 23.通用兄弟選擇器 24.羣組選擇器 25.交集選擇器 26.基本屬性選擇器 27.包含屬性選擇器 28.錨點僞類 29.用戶行爲僞類 30.目標僞類 |
1.掌握特殊圖形繪製 2.掌握CSS3過渡與動畫 3.掌握CSS3的媒體查詢 4.掌握選擇器的使用 |
|
| CSS3進階 |
1.目標僞類實現圖片切換 2.checked狀態僞類 3.自定義單選按鈕 4.CSS3結構類 5.CSS3結構類實現尺子效果 6.transition-property 7.transition-duration 8.transition-timing-function 9.transition-delay 10.2d變換旋轉 11.2d變換平移 12.2d變換縮放 13.2d變換扭曲 14.2d變換基點 15.綜合2d變換 16.transform-style 17.animation綜合使用 |
1.掌握CSS3圖像樣式變換 2.掌握CSS3動畫效果 |
||
| CSS預處理語言Less與Sass |
1.Less環境搭建與編譯 2.Less服務器端渲染 3.Sublime Text安裝插件 4.Less語法-變量、混合、嵌套 5.Less語法-計算、函數 6.Less語法-繼承、引導判斷 7.Sass使用 |
1.瞭解CSS預處理語言的優勢 2.掌握Less環境搭建 3.瞭解Less的服務器端渲染 4.掌握Less的使用語法 5.掌握Sass的基本使用 |
||
| CSS3實例演練 |
1.使用純css製作三角形 2.圓角邊框的使用 3.實現圓形 4.實現橢圓形 5.實現扇形 6.太極圖效果實現 7.風車效果實現 8.文字陰影，模糊，背景，排版，描邊 9.浮雕文字 10.標準盒子模型與怪異盒子模型 11.盒陰影使用 12.模糊盒陰影 13.立體球效果 14.倒影效果 15.盒子大小調節效果 16.背景裁剪 17.背景模糊 18.線性漸變基本使用 19.重複線性漸變 20.髮廊燈效果 21.馬賽克地磚 22.光斑動畫 23.徑向漸變基本使用 24.重複徑向漸變 25.3d變換旋轉 26.3d變換位移 27.3d變換縮放 28.3d變換基點 29.綜合3d變換 |
通過實例演練進一步加深對CSS3的理解與掌握 | ||
| jQuery階段 | jQuery |
1.jQuery簡介 2.jQuery DOM操作 3.jQuery事件 4.jQuery表單 5.jQuery CSS操作 6.jQuery核心API 7.jQuery特效 8.jQuery尺寸 9.jQuery內部函數 10.jQuery選擇器 11.jQuery遍歷操作 12.jQuery數據操作 13.jQuery Ajax 14.jQuery雜項 15.jQuery實戰練習 （1）實例：返回頂部、對聯廣告、發表說說、動態導航、延時動畫 （2）實例：模擬下拉框 |
1.熟悉jQuery常見操作 2.熟悉jQuery DOM操作 3.掌握jQuery 核心API 4.掌握jQuery Ajax操作 5.掌握jQuery 選擇器 6.掌握jQuery特效 7.掌握jQuery實戰練習 |
|
| 第三方UI組件庫 |
1.BootStrap介紹 2.BootStrap引入 3.BootStrap柵格系統 4.BootStrap全局CSS樣式 5.BootStrap組件應用 6.BootStrap JavaScript插件 7.BootStrap定製需求 9.BootStrap實例操作 10.Swiper3.x應用 11.Swiper4.x應用 12.快速簡潔圖標可視化庫Echarts應用 13.兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫highcharts 14.REM移動端適配 15.BootStrap 柵格系統原理響應式設計 16.流行圖標可視化庫D3 17.移動端類JQuery庫Zepto |
1.掌握BootStrap使用 2.掌握BootStrap柵格系統 3.掌握BootStrap全局樣式 4.掌握BootStrap組件應用 5.掌握BootStrap插件應用 6.掌握BootStrap定製需求 7.掌握Swiper的應用 8.掌握REM移動端適配 9.掌握Echarts圖表 10.掌握highcharts圖表 11.掌握D3的使用 12.地圖API 13.全屏滾動插件 |
||
| 版本控制工具 | Git實戰應用 |
1.SVN介紹 2.SVN客戶端與服務器端搭建 3.SVN關聯倉庫 4.SVN客戶端提交與更新 5.SVN衝突解決 6.Git介紹 7.GIt創建倉庫 8.Git版本回退管理 9.Git分支管理 10.Git衝突解決 11.linux常見命令 12.創建本地倉庫 13.檢出、克隆本地倉庫 14.拉取遠程代碼 15.分支的操作 16.處理衝突實戰 17.svn與git對比 18.git中差異對比 19.git中版本回退 20.github的使用 21.github創建組織 22.github的pullRequest操作 23.github的issues 24.githubPages的使用 25.Git關聯Github 26.Git關聯Gitee |
本階段主要掌握SVN和Git的應用，在工作中，團隊協作，代管管理，版本控制全部依賴於這兩個工具，尤其是Git更爲主要掌握工具。課程同樣偏向Git的應用，同時關聯遠程倉庫。 | |
| 後臺技術階段 | 服務器端 | 服務器端開發 |
1.Node優勢及發展趨勢 2.Node中的時間輪詢機制 3.npm、cnpm、yarn包管理器 4.Node.js核心基礎 5.Buffer緩衝器 6.Node文件系統（簡單、流式文件操作） 7.原生Node搭建服務器 8.Express搭建服務器 9.ejs模板渲染 10.cookie、session的使用 11.實時通信聊天庫Socket.io的使用 12.GraphGL 13.測試框架mocha |
1.理解node中npm、cnpm、yarn包管理器的使用 2.掌握ejs模板渲染 3.掌握實時通信聊天庫Socket.io的使用 |
| Nodejs與Express |
1.安裝Node於CMD命令 2.Node創建服務器 3.Node相關操作 4.Commonjs規範 5.Express安裝 6.Server基本操作 7.Express路由基礎 8.Express路由配置 9.Express路由應用 10.實現前後端交互 11.Post參數請求 12.Get參數請求 13.JSONP跨域處理 14.過濾數據 15.Nodejs鏈接數據庫 16.Server增刪改查 17.基於node.js平臺的下一代web開發框架koa（Express原班人馬打造） |
1.瞭解Nodejs 2.獨立安裝Nodejs環境 3.熟悉CMD命令行操作 4.掌握Express安裝 5.掌握Express路由的應用 6.掌握請求方式POST與GET 7.掌握JSONP的使用 8.掌握數據過濾 9.掌握數據庫基本操作 10.掌握鏈接數據 11.掌握服務器端搭建 12.瞭解基於node.js平臺的下一代web開發框架koa |
||
| 數據庫 | 數據庫操作 |
1.HTTP協議與報文 2.基於Express的路由、中間件 3.MongoDB數據庫基礎 4.數據庫搭建 5.數據庫建表 6.數據庫增刪改查 7.mongoose的使用 8.非關係型數據庫特點 9.服務器同數據庫交互 10.sha1、MD5加密隱私數據 |
||
| PHP與數據庫 |
1.PHP基礎語法 2.PHP類與繼承 3.PHP中理解面向對象 4.MySQL基礎 5.MySQL數據庫操作 6.MySQL Form表單 7.PDO鏈接數據庫 8.事務處理與時間戳 9.PHP+MySQL創建接口 10.前後端交互處理 11.Get與POST請求 12.前後端實戰練習 13.Apache 14.HTTP(s)協議詳解 15.Ajax進階、跨域與Defered 16.接口的定義 17.Mock數據 18.Restful 19.前後端聯調 20.前端安全(XSS,CSRF,JSON注入) |
1.掌握PHP基礎語法 2.掌握PHP類與繼承 3.掌握MySQL操作 4.掌握PHP鏈接MySQL 5.熟悉PDO鏈接數據庫 6.熟悉前後端交互 7.掌握get和post請求 8.理解前後端交互過程 |
||
| 前後端交互核心 | Ajax階段 | ajax |
1.原生Ajax（xhhr） 2.基於框架的Ajax（jquery） 3.JSON/XML 4.跨域問題 5.JSONP解決跨域問題 6.JSONP底層原理深入剖析 7.CORS解決跨域問題 8.nginx的簡單使用 9.GET,POST請求區別 10.新型ajax請求方式fetch 11.前後臺ajax請求庫axios 12.rest api |
1.學會使用原生ajax與戴框架的ajax傳值 2.學會解決跨域問題 3.掌握get、post請求 4.瞭解nginx服務器的使用 5.掌握新型ajax請求方式fetch與前後臺ajax請求庫axios的用法 |
| Ajax實戰項目-藍莓派 |
1.藍莓派項目設計 2.藍莓派環境構建 3.藍莓派頁面登錄Ajax 4.藍莓派頁面登錄與PHP與MySQL 5.藍莓派網絡請求封裝 6.藍莓派頁面加載 7.藍莓派模態框處理 8.藍莓派分頁器實現 9.藍莓派瀑布流效果實現 10.藍莓派動態加載數據 11.藍莓派音頻控制 12.藍莓派業務邏輯實現 13.藍莓派進度條實現 14.藍莓派第三方UI庫引入 15.藍莓派項目優化 |
本項目名稱爲藍莓派，主要爲音樂社區類型。包含較多的交互功能，例如滑動門，雪碧圖使用，模態框，瀑布流和焦點輪播圖等效果。當然，前後端交互也是不可少的，主要理解前後端交互流程與練習各種交互實現。 | ||
| 接口 | 接口問題 |
1.mock後臺數據接口的庫Mock.js/EsayMock 2.接口調試神器：postman |
1.掌握接口文檔的製作 | |
| JavaScript高級階段 | JavaScript高級 | JavaScript基礎深入 |
1.基礎深入: 數據類型及判斷 2.基礎深入: 數據, 變量與內存 3.基礎深入: 對象 4.基礎深入: 函數 5.斷點調試 6.debugger調試 7.JS線程機制: 進程與線程 8.JS線程機制: 單線程JS 9.JS線程機制: 多線程JS 10.JS事件循環機制: 再看定時器 11.JS事件循環機制: 模型分析 12.原型/鏈: prototype 13.原型/鏈: __proto__ 14.原型/鏈: 內存結構分析 |
1.掌握JS線程機制 2.掌握JS事件循環機制 3.掌握原型/鏈 |
| JavaScript面向對象編程 |
1.執行上下文/棧: 變量/函數提升 2.執行上下文/棧: 執行上下文 3.執行上下文/棧: 執行上下文棧 4.作用域/鏈: 作用域 5.作用域/鏈: 作用域鏈 6.閉包: 閉包是什麼 7.閉包: 產生閉包的條件 8.閉包: 閉包的生命週期 9.閉包: 閉包的應用 10.閉包: 閉包的缺點及解決 11.數組與對象 12.棧 13.隊列 14.編程模擬進出棧 |
熟悉作用域與作用域鏈，以及閉包的基本知識 | ||
| JavaScript異步編程 |
1.同步與異步 2.回調函數 3.Promise 4.Generator 5.async與await 6.宏隊列與微隊列 7.宏任務和微任務 8.JS事件循環機制: 再看定時器 9.JS事件循環機制: 模型分析 10.同步異步的優缺點 11.JS編程環境和模型 12.JS事件隊列 13.JS管理模塊說明 |
掌握JavaScript同步與異步的概念以及回調函數、隊列等知識 | ||
| JavaScript函數式編程 |
1.各種編程範式 2.基本理解和使用 3.高階函數 4.純函數 5.函數柯里化 6.代碼組合 7.函數化封裝 8.如何使用好函數 9.鏈表 10.常用排序算法1: 冒泡 11.常用排序算法2: 選擇 12.常用排序算法3: 插入 |
1.瞭解各種編程範式 2.掌握幾種特殊的函數以及函數化封裝 3.掌握常用的三種排序算法 |
||
| JavaScript設計模式與本地存儲 |
1.面向對象編程 2.常用模式介紹 3.單例模式 4.工廠模式 5.建造者模式 6.原型模式 7.代理模式 8.代理模式 9.觀察者模式 10.享元模式 11.繼承模式1: 原型鏈 12.繼承模式2: 借用構造函數 13.繼承模式3: 組合式 14.繼承模式4: 原型式 15.繼承模式5: 寄生式 16.繼承模式6: 寄生組合式 17.會話存儲sessionStorage 18.本地存儲localStorage 19.worker線程 20.基於SPA的路由庫 |
1.瞭解面向對象編程 2.掌握常用的幾種設計模式 3.掌握六中繼承模式 4.瞭解本地存儲概念 |
||
| 模塊化 | 模塊化 |
1.作用域回顧 2.模塊 3.私有屬性與公有屬性 4.模塊擴展 5.Commonjs規範 6.Requirejs引入 7.Requirejs的使用 8.Requirejs的shim模塊 9.Requirejs應用-音樂列表播放 |
1.掌握作用域 2.掌握模塊的定義規範與使用 3.瞭解私有與公有概念 4.掌握Commonjs規範 5.掌握Requirejs的應用 |
|
| 模塊化規範 |
1.模塊化規範1：CommonJS 2.模塊化規範2：ES6 3.模塊化規範3：AMD |
掌握三種模塊化規範 | ||
| ECMAScript6 | ES5/ES6/ES7介紹、入門 |
1.ES6簡介 2.環境搭建 3.ES6兼容 4.ES6在線轉換和本地轉換 5.let命令 6.const命令 |
||
| ES6解構 |
1.解構賦值 2.數組解構 3.對象解構 4.字符串解構 5.數值和布爾值解構 6.模式匹配 7.不完全解構 8.默認值 9.圓括號問題 10.使用場景 |
|||
| ES6對象擴展 |
1.Number數值擴展 2.二進制和八進制 3.指數運算 4.Number新增方法 5.字符串擴展 6.多字節支持 7.新Unicode表示法 8.正則u 9.遍歷器接口 10.擴展方法 11.模板標籤 |
|||
| ES6新增對象和屬性 |
1.正則擴展 2.新增flags、新增u、新增y 3.數組擴展：spread展開、map、raduce等 4.Map操作 5.Map遍歷 6.WeakMap 7.Set操作 8.WeakSet |
|||
| ES6函數擴展 |
1.函數擴展 2.默認參數 3.length屬性 4.默認參數作用域 5.rest參數 6.spread展開運算符 7.Arrow Function箭頭函數 8.對象擴展 9.簡潔屬性 10.屬性遍歷 11.對象擴展方法 |
|||
| ES6 Symbol、Promise對象 |
1.Symbol對象 2.Symbol屬性和方法 3.內置Symbol 4.Symbol使用場景 5.Promise對象 6.鏈式操作 7.Promise狀態 8.Promise基本使用方法 |
|||
| ES6 遍歷 |
1.Iterator遍歷器 2.next()、return()、throw() 3.Generator函數 4.yield表達式 5.Generator循環使用 6.yeild*表達式 7.優點和使用場景 |
|||
| ES6異步 |
1.異步 2.async函數 3.class類 4.構造函數 5.實例化 6.class表達式 7.私有方法 8.setter和getter 9.static靜態類 10.class繼承 |
|||
| ES6模塊化、代理、反射 |
1.module模塊 2.export命令 3.import命令 4.模塊繼承 5.Reflect反射 6.Reflect判斷、獲取、設置 7.Reflect實例化 8.Proxy代理 9.創建代理 10.代理行爲 11.代理實例 |
|||
| ECMAScript6 |
1.babel轉換器 2.Let和Const命令 3.字符串擴展 4.解構賦值 5.Object擴展 6.Array擴展 7.Function擴展 8.Class類 9.類的繼承Extends 10.Promise 11.Module模塊 12.Proxy 13.Generator 14.Generator |
1.掌握ES6與ES5的區別 2.掌握babel轉換器的使用 3.掌握ES6聲明新特性 5.掌握數組，對象，字符串函數的擴展 6.掌握箭頭函數的應用 7.掌握Class類的聲明 8.掌握繼承的實現 9.掌握Promise的使用 10.掌握Module模塊的使用 |
||
| TypeScript | 核心概念 |
1.TypeScript介紹 2.TypeScript基本類型 3.TypeScript變量聲明 4.TypeScript接口 5.TypeScript類 6.TypeScript泛型 7.TypeScript類型推斷 8.TypeScript模塊 9.TypeScript命名空間 10.Gulp解析TypeScript 11.Webpack解析TypeScript |
TypeScript的有點不言而喻，到目前爲止，TypeScript被使用的頻率越來越高，而且我們知道的時候，Vue即將發佈的3.0版本就是修改爲TypeScript來實現 | |
| TypeScript&React |
1.TS&Vue環境搭建 2.TS&Vue組件引入 3.TS&Vue Data變化 4.TS&Vue Props變化 5.TS&Vue 事件 6.TS&Vue 生命週期 7.TS&Vue 計算屬性 8.TS&Vue 集成Axios 9.TS&Vue集成 Element-UI 10.TS&Vue集成Vuex |
使用TypeScript編寫Vue程序是非常方便的，靜態類型檢查給我們編程帶來了非常大的優勢。一次性編寫400行代碼，編譯通過！！！ | ||
| TypeScript&Vue |
1.TS&Vue環境搭建 2.TS&Vue組件引入 3.TS&Vue Data變化 4.TS&Vue Props變化 5.TS&Vue 事件 6.TS&Vue 生命週期 7.TS&Vue 計算屬性 8.TS&Vue 集成Axios 9.TS&Vue集成 Element-UI 10.TS&Vue集成Vuex |
使用TypeScript編寫Vue程序是非常方便的，靜態類型檢查給我們編程帶來了非常大的優勢。一次性編寫400行代碼，編譯通過！！！ | ||
| 構建工具 | 構建工具之Grunt |
1.入門介紹 2.合併js任務 3.壓縮js任務 4.js語法檢測 5.合併壓縮css 6.實現watch監視任務實現自動打包編譯 |
使用構建工具去對 JS、CSS、HTML、LESS、IMG 等進行合併壓縮構建到最後實現自動化構建項目。是前端工程師必備的技能之一。 從理解什麼是構建工具，爲什麼要用構建工具，到如何去使用構建工具。 | |
| 構建工具之Gulp |
1.Gulp環境搭建 2.Gulp壓縮JavaScript 3.Gulp壓縮CSS 4.Gulp壓縮HTML 5.Gulp壓縮Image 6.Gulp壓縮合並重命名 7.Gulp監聽 8.Gulp打包處理 9.Gulp熱更新 |
1.掌握構建工具的作用 2.瞭解工程化概念 3.掌握Gulp的環境搭建 4.掌握Gulp的壓縮操作（js、css、html、image） 5.掌握壓縮合並重命名系列操作 6.掌握Gulp監聽提高工作效率 7.掌握熱更新提升開發者體驗 |
||
| 構建工具之Webpack |
1.Webpack3.x安裝 2.Webpack config配置文件 3.Webpack服務器搭建 4.Webpack Loaders配置 5.Webpack構建React環境 6.Webpack處理CSS和圖片 7.Webpack Less-loader添加 8.Webpack插件添加 9.Webpack生產環境 10.Webpack4.x版本升級 |
1.掌握目前前端工程化方式 2.掌握Webpack3.x環境搭建 3.掌握Webpack配置文件編寫 4.掌握Webpack Loaders的配置 5.掌握Webpack獨立構建React環境 6.掌握Webpack的配置文件修改 7.掌握Webpack插件的添加 8.掌握Webpack生產環境 9.掌握Webpack4.x版本迭代升級 |
||
| 前端新型Web框架階段 | AngularJS | angularjs入門 |
1.Angular簡介 2.表達式 3.指令 4.模型 5.作用域 6.控制器 7.過濾器 8.開發環境配置 9.結構、模塊與組件 10.元數據、數據綁定與數據顯示 11.依賴注入 12.路由 13.lonic3框架 |
掌握angularjs基礎語法 |
| angularjs服務 |
1.Service服務 2.Http請求 3.Select 選擇下拉 4.表格處理 5.DOM操作 |
掌握AngularJS的網絡服務以及DOM操作 | ||
| angularjs指令 |
1.系統常用命令 2.自定義指令 3.事件 4.模塊 5.表單 6.動畫 |
1.掌握AngularJS系統常用命令以及事件 2.掌握AngularJS常用指令 3.掌握AngularJS模塊化操作 |
||
| React | React框架基本使用 |
1.React的基本認識 2.React的基本使用 3.React JSX 4.模塊與模塊化和組件與組件化 5.React組件的基本使用 6.組件三大屬性1: state 7.組件三大屬性2: props 8.組件三大屬性3: refs 9.React事件處理 10.React組件的組合使用 11.React受控與非受控組件 12.組件生命週期 13.React腳手架的使用 14.項目的打包與發佈 |
||
| React框架進階 |
1.React ajax之axios 2.React ajax之fetch 3.React DEMO: github users 4.React Router4基本路由 5.React Router4嵌套路由 6.React Router4向路由組件傳遞數據 7.React Router4編程式路由導航 8.ReactUI組件庫之material-ui 9.ReactUI組件庫之ant-design 10.redux庫: 管理組件狀態 11.react-redux庫: 簡化使用 12.redux-thunk庫: redux異步 13.redux調用插件 14.自定義redux: createStore 15.自定義redux: combineReducers 16.自定義react-redux:Provider 17.自定義react-redux:connect |
|||
| React |
1.Hello React基礎 2.JSX語法解析 3.React基礎組件 4.React組件嵌套 5.組件數據交互Props 6.PropTypes與DefaultProps的應用 7.樣式添加與事件 8.React State狀態 9.props，state與render函數的關係 10.深入瞭解React虛擬DOM 11.虛擬DOM中的Diff算法 12.State和Props 13.組件生命週期函數與使用場景 14.Form表單和React中ref的使用 15.Fetch網絡請求 16.封裝Http網絡請求 17.Mock數據模擬Node服務器 18.使用Charles實現本地數據mock 19.React中實現CSS動畫效果 20.react-transition-group實現動畫 21.Rudux概念簡介和工作流程 22.Action和Reducer的編寫 23.ActionTypes的拆分 24.使用actionCreactor統一創建action 25.UI組件和容器組件及無狀態組件 26.Redux-thunk中間件實現ajax數據請求 27.Redux-saga中間件使用 28.React-redux中間件使用 29.網絡請求跨域代理配置 30.引入Antd UI框架 31.Antd樣式應用 32.Antd樣式修改 33.Router3.x引入 34.Router3.x路由嵌套 35.Router3.x路由參數傳遞 36.Router4.x路由升級 37.React腳手架 38.React修改腳手架配置 39.React引入字體圖標 |
1.掌握React基礎語法 2.瞭解React的優勢 3.掌握React的組件交互 4.掌握React組件的的生命週期 5.掌握React的網絡請求fetch 6.掌握數據模擬方式Mock 7.掌握React路由的應用 8.掌握Antd UI組件的使用 9.掌握React腳手架的使用 |
||
| React Native |
1.React Native初探 2.React Native項目導航 3.React Native項目滾動分頁 4.React Native其他組件 |
|||
| 應用Reat開發WebApp項目 |
1.Ant Design組件庫 2.React Router4路由 3.項目組件編寫 4.使用Immutable.js來管理store中的數據 5.項目的聯調、測試與發佈上線 |
|||
| React項目實戰-新聞類型 |
1.News-環境搭建 2.News-響應式設計 3.News-路由配置 4.News-引入Antd樣式 5.News-適配移動端 6.News-登錄UI實現 7.News-登錄接口實現 8.News-登錄功能實現 9.News-本地存儲 10.News-功能模塊實現 |
本項目根據新聞類接口實現新聞類站點與APP的常見形式展示，項目專注於練習React基礎的應用，組件的創建分離與嵌套，實現登錄註冊等功能。同時針對移動端和PC端實現響應式設計。 | ||
| React-Redux |
1.Redux基礎 2.Redux原理 3.React-Redux引入 4.React-Redux共享數據 5.React-Redux應用場景 |
1.掌握React-Redux應用場景 2.掌握React-Redux的實現 3.掌握React-Redux的原理 |
||
| NextJS |
1.next安裝 2.樣式的使用 3.數據獲取與生命週期 |
Next.js是一個基於React的一個服務端渲染簡約框架。它使用React語法，可以很好的實現代碼的模塊化，有利於代碼的開發和維護。 | ||
| React項目實戰-O2O類 |
1.環境搭建-添加Less環境 2.環境搭建-路由功能實現 3.環境搭建-全局樣式與字體圖標 4.首頁-頭部實現 5.首頁-輪播導航實現 6.首頁-超值特惠廣告服務器端實現 7.首頁-超值特惠前端訪問實現 8.首頁-超值特惠前端UI實現 9.首頁-推薦列表數據獲取 10.首頁-推薦列表數據加載 11.首頁-推薦列表加載更多數據 12.首頁-推薦列表加載更多實現 13.首頁-推薦列表滾動加載 14.首頁-底部導航 15.城市-路由配置 16.城市-Header 17.城市-當前城市 18.城市-城市信息Redux添加 19.城市-Redux數據共享 20.城市-城市選擇 21.城市-城市修改 22.城市-城市本地存儲 23.城市-根據城市適配數據 24.搜索-路由配置 25.搜索-服務器模擬數據 26.搜索-SearchHeader組件 27.搜索-搜索數據獲取 28.搜索-搜索頁面UI適配 29.搜索-重複搜索處理 30.詳情-路由配置 31.詳情-服務器端數據適配 32.詳情-詳情數據適配 33.詳情-添加星星 34.詳情-商品評論 35.登錄-路由配置 36.登錄-判斷用戶登錄 37.登錄-登錄實現 38.登錄-登錄驗證 39.購買與收藏-購買功能 40.購買與收藏-解決路由參數問題 41.購買與收藏-收藏按鈕添加 42.購買與收藏-Store添加Redux 43.購買與收藏-收藏功能實現 44.用戶中心-個人信息加載 45.用戶中心-訂單加載 46.用戶中心-訂單信息優化 47.評論-添加評論狀態 48.評論-添加完整流程 49.評論-評論提交 |
本項目爲目前常見O2O類項目的展示形式與功能，項目主要包含功能有首頁展示，城市切換，搜索實現，詳情展示，登錄與註冊，購買與收藏業務，用戶中心和評論等功能。主要針對學者練習React基礎應用和React高級組件的創建，React中使用Redux掌握應用場景，並且熟悉項目業務邏輯的實現，更快更合適宜的接入企業級項目。 | ||
| Dva |
1. dva介紹與環境搭建 2. dva中引入antd 3. dva路由配置 4. dva瞭解路由原理 5. dva編寫UI Component組件 6. dva Model創建 7. dva 路由跳轉 8. dva Model異步處理 9. dva Mock數據處理 10. dva 網絡請求 11. dva Model API 12. dva redux-actions |
dva 首先是一個基於 redux 和 redux-saga 的數據流方案，然後爲了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解爲一個輕量級的應用框架。易學易用，僅有 6 個 api，對 redux 用戶尤其友好，配合 umi 使用後更是降低爲 0 API,elm 概念，通過 reducers, effects 和 subscriptions 組織 model,插件機制，比如 dva-loading 可以自動處理 loading 狀態，不用一遍遍地寫 showLoading 和 hideLoading,支持 HMR，基於 babel-plugin-dva-hmr 實現 components、routes 和 models 的 HMR。 | ||
| Vue | Vue框架基本使用 |
1.Vue的基本認識與使用 2.模板語法 3.計算屬性和監視 4.class與style綁定 5.條件渲染與列表渲染 6.事件處理與表單數據收集 7.Vue實例生命週期 8.過渡與動畫 9.自定義過濾器 10.內置指令與自定義指令 11.自定義Vue插件 12.使用vue-cli創建模板項目 13.eslint編碼規範檢查 14.組件定義與使用 15.組件間通信1: props 16.組件間通信2: vue自定義事件 |
||
| Vue框架進階 |
1.組件間通信3: 消息訂閱與發佈 2.組件間通信1: props 3.組件間通信4: slot 4.Vue ajax: axios與vue-resource 5.Vue DEMO: todo list 6.Vue DEMO: user search 7.Vue UI組件庫: mint-ui 8.vue-router: 基本路由 9.vue-router: 嵌套路由 10.vue-router: 向路由組件傳遞數據 11.vue-router: 緩存路由組件 12.vue-router: 編程式路由導航 13.vuex: 理解與基本使用 14.vuex: 相關API與結構分析 15.vuex: 計數器應用 16.vuex: todo list應用 |
|||
| Vue源碼分析 |
1.vue源碼分析: 數據代理 2.vue源碼分析: 數據劫持 3.vue源碼分析: setter,getter分析 4.vue源碼分析: Object.defineProperty 5.vue源碼分析: 斷點調試 6.vue源碼分析: 數據劫持 7.vue源碼分析: 插值解析 8.vue源碼分析: 指令解析 9.vue源碼分析: 單向數據綁定 10.vue源碼分析: 雙向數據綁定 11.vue源碼分析: MVVM原理圖 12.MVC和MVVM區別 |
|||
| Vue |
1.Vue環境搭建 2.Vue基本指令 3.Vue事件處理 4.Vue計算屬性 5.Vue的Class與Style樣式 6.Vue的表單與偵聽器 7.Vue的基本組件 8.Vue的組件之間數據交互 9.Vue組件加載的keep-alive 10.Vue的Props驗證 11.Vue組件深入 12.Vue 插槽 13.Vue實例生命週期 14.Vue過渡與動畫 15.Vue自定義指令 16.Vue過濾 17.Vue網絡請求Axios 18.Vue Axios請求應用 19.Vue Axios常用配置 20.Vue 跨域處理 21.Vue路由基礎 22.Vue路由跳轉 23.Vue路由嵌套 24.Vue編程式導航 25.Vue路由參數傳遞 26.Vue路由雜項 27.Vue路由高亮 28.Vue路由實例 29.Vue Element UI組件 30.Swiper組件應用 31.VueX引入 32.Vue-VueX-創建Store倉庫 33.Vue-VueX-狀態更改 34.Vue-VueX-getters過濾 35.Vue-VueX-Actions異步處理 36.Vue-VueX-Module 37.動態組件與v-once指令 |
1.掌握Vue環境搭建 2.掌握Vue框架的優點 3.掌握Vue基礎語法 4.掌握Vue常見API 5.掌握Vue組件的使用 6.掌握Vue組件的生命週期 7.掌握Vue網絡請求Axios 8.掌握Vue的路由使用 9.掌握Vue中常見第三方組件使用 10.掌握VueX的引入 11.瞭解VueX的應用長江 12.掌握VueX在項目中的實現 |
||
| Vue服務器端渲染：NuxtJS |
1.環境搭建 2.項目目錄結構介紹 3.路由配置 4.視圖修改 5.異步數據 6.資源文件管理 7.插件處理 8.模塊處理 9.Vuex狀態樹 10.TypeScript支持 |
前後端拆分，後端專注於數據接口服務，前端專注接口調用，頁面渲染，雙劍合璧，相得益彰。這時，使用vue框架之後，SEO優化變成了很重要的問題，所以，此時要引入服務器端渲染來解決SEO和首屏加載問題是非常合理的。 | ||
| Vue實戰項目-移動端-VueMusic |
1.VueMusic-首頁-路由配置 2.VueMusic-今日推薦-數據獲取 3.VueMusic-今日推薦-視圖適配 4.VueMusic-首頁-視圖適配 5.VueMusic-首頁-音樂榜單 6.VueMusic-首頁-熱門榜單 7.VueMusic-更多-數據適配 8.VueMusic-更多-下拉刷新 9.VueMusic-播放-路由配置 10.VueMusic-播放-播放功能 11.VueMusic-播放-歌詞加載 12.VueMusic-播放-歌詞適配 13.VueMusic-播放-歌詞滾動 14.VueMusic-歌手-歌手列表 15.VueMusic-搜索-搜索實現 16.VueMusic-測試-真機測試 |
本項目爲音樂類項目，主要實現音樂首頁展示，今日推薦類別，歌曲列表，歌曲播放及歌手列表和搜索功能。主要練習Vue的基礎應用和組件如何設計。項目如何構架與測試。通過本項目可以讓學者更快的熟悉Vue框架的使用。並且熟練的構建整個項目需求的架構。 | ||
| Vue實戰項目-PC |
1.Vue-VuePC-環境搭建 2.Vue-VuePC-導航實現 3.Vue-VuePC-登陸註冊接口編寫 4.Vue-VuePC-封裝Axios與API 5.Vue-VuePC-登陸註冊接口實現 6.Vue-VuePC-Token驗證 7.Vue-VuePC-調試路由驗證登陸流程 8.Vue-VuePC-Vuex引入 9.Vue-VuePC-Vuex與本地存儲保存token10.Vue-VuePC-3.x命令行工具引入Element 11.Vue-VuePC-導航效果優化 12.Vue-VuePC-引入Echarts與封裝 13.Vue-VuePC-Echarts地圖加載與參數調試14.Vue-VuePC-Echarts網絡數據適配與參數調試 15.Vue-VuePC-封裝SVG加載進度條 16.Vue-VuePC-Mock數據處理 17.Vue-VuePC-輪播圖添加 18.Vue-VuePC-列表數據 19.Vue-VuePC-詳情頁 20.Vue-VuePC-自定義組件 21.Vue-VuePC-訂單詳情 22.Vue-VuePC-Vuex訂單共享 23.Vue-VuePC-Element組件修改樣式 24.Vue-VuePC-打包環境 |
本項目與上面的移動端項目類似，但是針對的是PC端類展示產品，包含功能有導航，輪播圖，數據列表，詳情頁，訂單頁和購買功能。通過本項目讓學者快速掌握此類項目的常見功能和功能的業務邏輯實現 | ||
| 跨平臺開發階段 | 微信小程序 | 原生小程序入門 |
1.小程序介紹 2.小程序優缺點 3.小程序語法介紹 4.組件化思想 5.小程序開發工具使用 6.小程序開發工具管理項目 7.小程序開發工具調試 8.小程序適配方案 9.px, em, rem, rpx對比 10.全局配置文件 12.註冊小程序應用 |
1.瞭解小程序的概念 2.掌握組件化思想 3.初步掌握小程序工具使用 |
| 原生小程序API使用 |
1.局部頁面配置 2.註冊小程序頁面 3.小程序生命週期函數 4.小程序路由跳轉 5.窗口配置 6.原生小程序組件使用: view, text,button 7.原生小程序API使用: wx.navigateTo/wx.showToast 8.本地數據存儲 9.小程序前後端交互 10.背景音樂播放 11.小程序事件應用 |
掌握原生小程序API的使用與實例製作 | ||
| 微信小程序：Mpvue |
1.MPVue介紹 2.MPVue環境搭建 3.Mpvue特點 4.Mpvue同原生小程序區別 5.Mpvue VS Vue 6.Mpvue基本使用 7.Mpvue注意事項 8.Mpvue中處理原生小程序事件 9.flyio應用 10.Node.js中間層實現前後端完全分離 11.Mpvue組件通信 12.Mpvue中兼容原生小程序生命週期及處理方式 3.初始化項目 4.頂部導航 5.底部導航TabBar 6.焦點輪播圖 7.搜索實現 8.小程序定位 9.騰訊地圖lbs獲取地理位置 10.搜索結果列表渲染 11.上拉加載 12.下拉刷新 13.詳情處理 14.個人信息 |
小程序目前越來越火爆，而且我們知道目前存在了“微信小程序”，“支付寶小程序”，“百度小程序”，“頭條小程序”非常多，爲了兼容所有小程序，MPVue的出現，應運而生，可以一套代碼實現多個平臺。 | ||
| 微信小程序-實戰講解-影評類 |
1.微信小程序開發工具 2.小程序WXSS後綴 3.小程序事件 4.小程序頁面跳轉 5.小程序數據綁定 6.小程序輪播圖 7.小程序編輯視圖 8.小程序數據適配 9.小程序循環加載視圖 10.小程序Template模板 11.小程序跳轉參數攜帶 12.小程序詳情頁實現 13.小程序本地存儲 14.小程序提示框 15.小程序音頻播放 16.小程序Tabbar 17.小程序網絡請求 18.小程序模板嵌套 19.小程序視圖適配 20.小程序評價業務邏輯 21.小程序列表上拉加載 22.小程序列表下拉刷新 23.小程序電影頁適配 24.小程序搜索頁面適配 25.小程序第三方接口 |
此階段的內容爲微信小程序開發，本階段並非以基礎知識點開始入手講解，基於學者經歷過以上的學習，在此時已經掌握項目框架，包含常見的一些實現規範，所以，這裏我們將直接講解項目，根據項目需求的效果使用微信小程序技術實現對應功能。 | ||
| 微信公衆號開發 | 微信公衆號開發 |
1.校驗服務器有效性 2.服務端獲取用戶消息 3.回覆微信服務器消息 4.接口管理 5.用戶管理 6.獲取用戶基本信息 7.羣發消息 8.獲取全局接口調用憑據(ticket) 9.signature值的計算 10.語音查電影功能 11.爬蟲 12.訂閱號基本功能 13.使用百度BAE實現代碼的快速上線 14.使用Git完成線上代碼部署 15.公衆號開發與權限接入 16.微信JSSDK接口API 17..微信場景項目開發與接入 |
||
| 移動端開發 | 移動端核心 |
1.屏幕尺寸 2.屏幕分辨率 3.屏幕像素密度 4.物理像素 5.CSS像素 6.CSS像素與物理像素的關係 7.設備獨立像素 8.位圖像素 9.像素比 10.pc視口 11.佈局視口 12.視覺視口 13.理想視口 14.meta標籤 15.移動跨平臺開發框架Sencha Touch 16.移動端網頁觸摸內容滑動js插件Swiper 17.谷歌的移動UI框架Flutter |
1.掌握屏幕尺寸分辨率等 2.學會根據屏幕尺寸與分辨率、像素等進行佈局 |
|
| 移動端適配 |
1.pc縮放 2.移動端用戶縮放 3.移動端系統縮放 4.移動端基礎事件 5.移動端手指列表 6.移動端點透事件 7.移動端取消瀏覽器默認行爲 8.rem與em區別 9.rem適配 10.viewport適配 11.1物理像素 12.實現1物理像素邊框的多種方案 |
1.掌握移動端用戶縮放與系統縮放 2.掌握移動端的事件處理 3.掌握REM移動端適配 |
||
| 移動端特效 |
1.橫向滑屏（定位版） 2.橫向滑屏（2d變換版） 3.橫向滑屏（封裝自定義組件版） 4.橡皮筋效果 5.絕對定位模擬固定定位 6.加速效果 7.即點即停 8.自定義滾動條 9.防抖動 10.誤觸效果 11.多指事件 12.多指放大 13.多指旋轉 14.無縫滑屏 |
掌握移動端各種特效 |