第1章 課程簡介
本章主要對整個課程的內(nèi)容進(jìn)行簡要介紹,包括前置知識簡介、章節(jié)安排、代碼效果展示等,會從大的方面對ES6+在實戰(zhàn)中的意義進(jìn)行介紹和比較,讓你對課程有一個初步印象
1-1 課程導(dǎo)學(xué)
第2章 ES6+實戰(zhàn)所需要的環(huán)境
本章主要介紹ES6+實戰(zhàn)中必備的兩個工具:Babel和webpack,以及工程化中腳手架工具的重要性和意義,介紹html-bundler這樣一個腳手架工具(后面實戰(zhàn)會用到)
2-1 ES6瀏覽器支持情況
2-2 webpack講解與示例
2-3 Babel講解與示例
2-4 html-bundler具體用法
2-5 環(huán)境準(zhǔn)備
2-6 本章小結(jié)
第3章 需求分析與架構(gòu)設(shè)計
本章講解為什么要進(jìn)行這樣的設(shè)計,以及前端開發(fā)從需求分析、總體設(shè)計到模塊設(shè)計再到代碼編寫的整個過程,進(jìn)行思路的梳理,以及SDK常用開發(fā)套路的介紹
3-1 .需求分析
3-2 架構(gòu)設(shè)計
3-3 業(yè)務(wù)模塊demo
3-4 公共模塊demo
第4章 最常用ES6語法講解以及課程環(huán)境搭建
本章主要對后面用到最多的幾個ES6+語法進(jìn)行前置講解,包括import和export,let和const,箭頭函數(shù)等。使用html-bundler搭建課程環(huán)境,講解一些webpack和babel一些最新的相關(guān)插件和配置
4-1 創(chuàng)建項目
4-2 真實環(huán)境安裝小結(jié)
4-3 import & export講解1
4-4 import & export講解2
4-5 let&const 講解
4-6 箭頭函數(shù)講解
第5章 登錄模塊開發(fā)-骨架及渲染部分
本章開始進(jìn)行登錄模塊開發(fā),主要講解模塊骨架搭建和視圖渲染部分,并在項目中講解ES6+中的Object.assign, 模板字符串等語法。介紹消除瀏覽器自帶自動填充的技巧
5-1 業(yè)務(wù)開始
5-2 Object.assign
5-3 export
5-4 模板字符串
5-5 基本模板和自動補(bǔ)全1
5-6 自動補(bǔ)全2
5-7 getID
5-8 渲染結(jié)束
第6章 登錄模塊開發(fā)-表單驗證/事件/請求部分
本章主要講解登錄模塊中的事件綁定/表單驗證/向服務(wù)器請求數(shù)據(jù)/前端數(shù)據(jù)Mock等內(nèi)容,結(jié)合項目講解ES6+中的async和await, Array.from, Promise 等API,以及新版瀏覽器的fetch API。并且對async和await,Promise, fetch之間的關(guān)系及結(jié)合使用進(jìn)行了講解...
6-1 選取元素
6-2 import和export時的重命名
6-3 建好骨架
6-4 fetch, async&await
6-5 promise講解
6-6 await使用注意
6-7 表單驗證
6-8 表單驗證展示
6-9 登錄結(jié)束
第7章 注冊模塊開發(fā) - 手機(jī)號注冊部分
本章主要講解注冊模塊中的手機(jī)號注冊,活人驗證部分,講解活人驗證的原理和實現(xiàn),結(jié)合項目講解ES6+中的class、Symbol等語法點。
7-1 活人驗證原理介紹和搭建骨架
7-2 第一步的模板
7-3 活人驗證骨架搭建
7-4 symbol語法講解1
7-5 symbol&class語法講解2
7-6 滑塊界面渲染部分
7-7 驗證滑塊整體完成(1)
7-8 驗證滑塊整體完成(2)
7-9 調(diào)用驗證滑塊
7-10 完成第一步手機(jī)號提交
7-11 完成第二步手機(jī)號驗證
第8章 注冊模塊開發(fā) - 個人信息部分
本章主要講解注冊模塊中的個人信息填寫部分,包括表單驗證、省市區(qū)三級聯(lián)動插件等技術(shù)點,結(jié)合項目回顧之前講到的ES6+中的class、Symbol、async/await等語法點。
8-1 開始
8-2 模板渲染
8-3 .字符串unicode支持講解
8-4 .正則表達(dá)式unicode支持講解
8-5 . 正則unicode在表單驗證業(yè)務(wù)中的運用
8-6 . 搭建省市區(qū)三聯(lián)插件框架1
8-7 . 搭建省市區(qū)三聯(lián)插件2
8-8 . 完成省市區(qū)三聯(lián)框架3
8-9 . 三聯(lián)插件中新的語法點
8-10 . 完成注冊用戶信息流程
第9章 注冊模塊開發(fā) - 支付方式綁定和整體串聯(lián)部分
本章主要講解注冊模塊中的支付方式綁定,將整個注冊流程串起來并回顧注冊流程中涉及的技術(shù)點。
9-1 綁定支持方式
9-2 綁定支付方式完成
9-3 如何在單頁應(yīng)用中使用SDK
9-4 如何在react中使用sdk
第10章 賬號設(shè)置模塊開發(fā)
本章主要講解賬號設(shè)置部分,包括收貨地址管理、安全設(shè)置、個人資料編輯,對之前一些大的語法點進(jìn)行鞏固和復(fù)習(xí),穿插一些小的記憶性API。
10-1 用戶資料頁設(shè)置01
10-2 用戶資料頁設(shè)置02
10-3 改造省市區(qū)插件
10-4 收貨地址設(shè)置-模板
10-5 收貨地址設(shè)置
10-6 收貨地址管理-事件綁定01
10-7 收貨地址管理-事件綁定02
10-8 安全設(shè)置頁面
第11章 密碼找回模塊開發(fā)
本章主要講解密碼找回部分的開發(fā),包括手機(jī)號找回和郵箱找回,對之前一些大的語法點進(jìn)行鞏固和復(fù)習(xí),穿插一些小的記憶性API。
11-1 重置密碼_1
11-2 重置密碼_2
11-3 課程回顧
第12章 整體串聯(lián)和總結(jié)
本章會講解開發(fā)完成的SDK如何落地在下游業(yè)務(wù)上構(gòu)成一個完整的流程,并對整個項目進(jìn)行回顧與總結(jié),包括項目中用到的ES6+語法點、SDK開發(fā)的套路、賬號體系的前端業(yè)務(wù)等
12-1 課程總結(jié)(ES6+)
12-2 課程總結(jié)(開發(fā)流程與設(shè)計方法)
12-3 課程總結(jié)(真實環(huán)境搭建)
12-4 html-bundler介紹(1)
12-5 html-bundler介紹(2)
12-6 課程總結(jié)(語法應(yīng)用一)
12-7 課程總結(jié)(語法應(yīng)用二)
12-8 課程總結(jié)(語法應(yīng)用三)
12-9 課程總結(jié)(語法應(yīng)用四)
12-10 課程總結(jié)(SDK開發(fā)要點)
12-11 課程總結(jié)(賬號體系開發(fā)要點)