【在線網(wǎng)課】ES6+ 開發(fā)電商網(wǎng)站的賬號體系 JS SDK

ES6+ 開發(fā)電商網(wǎng)站的賬號體系 JS SDK

實(shí)戰(zhàn)中貫穿ES6+ 語法，前端完全使用原生JS語法，不依賴框架，實(shí)現(xiàn)模塊、組件、請求、視圖渲染和事件綁定等，打造一個(gè)電商網(wǎng)站的賬號體系SDK，提升自己的開發(fā)效率和代碼可維護(hù)性。

第1章 課程簡介

本章主要對整個(gè)課程的內(nèi)容進(jìn)行簡要介紹，包括前置知識簡介、章節(jié)安排、代碼效果展示等，會從大的方面對ES6+在實(shí)戰(zhàn)中的意義進(jìn)行介紹和比較，讓你對課程有一個(gè)初步印象

 

1-1 課程導(dǎo)學(xué)

第2章 ES6+實(shí)戰(zhàn)所需要的環(huán)境

本章主要介紹ES6+實(shí)戰(zhàn)中必備的兩個(gè)工具：Babel和webpack，以及工程化中腳手架工具的重要性和意義，介紹html-bundler這樣一個(gè)腳手架工具（后面實(shí)戰(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ì)

本章講解為什么要進(jìn)行這樣的設(shè)計(jì)，以及前端開發(fā)從需求分析、總體設(shè)計(jì)到模塊設(shè)計(jì)再到代碼編寫的整個(gè)過程，進(jìn)行思路的梳理，以及SDK常用開發(fā)套路的介紹

 

3-1 .需求分析

3-2 架構(gòu)設(shè)計(jì)

3-3 業(yè)務(wù)模塊demo

3-4 公共模塊demo

第4章 最常用ES6語法講解以及課程環(huán)境搭建

本章主要對后面用到最多的幾個(gè)ES6+語法進(jìn)行前置講解，包括import和export，let和const，箭頭函數(shù)等。使用html-bundler搭建課程環(huán)境，講解一些webpack和babel一些最新的相關(guān)插件和配置

 

4-1 創(chuàng)建項(xiàng)目

4-2 真實(shí)環(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ā)，主要講解模塊骨架搭建和視圖渲染部分，并在項(xiàng)目中講解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ā)-表單驗(yàn)證/事件/請求部分

本章主要講解登錄模塊中的事件綁定/表單驗(yàn)證/向服務(wù)器請求數(shù)據(jù)/前端數(shù)據(jù)Mock等內(nèi)容，結(jié)合項(xiàng)目講解ES6+中的async和await, Array.from, Promise 等API，以及新版瀏覽器的fetch API。并且對async和await，Promise， fetch之間的關(guān)系及結(jié)合使用進(jìn)行了講解...

 

6-1 選取元素

6-2 import和export時(shí)的重命名

6-3 建好骨架

6-4 fetch, async&await

6-5 promise講解

6-6 await使用注意

6-7 表單驗(yàn)證

6-8 表單驗(yàn)證展示

6-9 登錄結(jié)束

第7章 注冊模塊開發(fā) - 手機(jī)號注冊部分

本章主要講解注冊模塊中的手機(jī)號注冊，活人驗(yàn)證部分，講解活人驗(yàn)證的原理和實(shí)現(xiàn)，結(jié)合項(xiàng)目講解ES6+中的class、Symbol等語法點(diǎn)。

 

7-1 活人驗(yàn)證原理介紹和搭建骨架

7-2 第一步的模板

7-3 活人驗(yàn)證骨架搭建

7-4 symbol語法講解1

7-5 symbol&class語法講解2

7-6 滑塊界面渲染部分

7-7 驗(yàn)證滑塊整體完成（1）

7-8 驗(yàn)證滑塊整體完成（2）

7-9 調(diào)用驗(yàn)證滑塊

7-10 完成第一步手機(jī)號提交

7-11 完成第二步手機(jī)號驗(yàn)證

第8章 注冊模塊開發(fā) - 個(gè)人信息部分

本章主要講解注冊模塊中的個(gè)人信息填寫部分，包括表單驗(yàn)證、省市區(qū)三級聯(lián)動插件等技術(shù)點(diǎn)，結(jié)合項(xiàng)目回顧之前講到的ES6+中的class、Symbol、async/await等語法點(diǎn)。

 

8-1 開始

8-2 模板渲染

8-3 .字符串unicode支持講解

8-4 .正則表達(dá)式unicode支持講解

8-5 . 正則unicode在表單驗(yàn)證業(yè)務(wù)中的運(yùn)用

8-6 . 搭建省市區(qū)三聯(lián)插件框架1

8-7 . 搭建省市區(qū)三聯(lián)插件2

8-8 . 完成省市區(qū)三聯(lián)框架3

8-9 . 三聯(lián)插件中新的語法點(diǎn)

8-10 . 完成注冊用戶信息流程

第9章 注冊模塊開發(fā) - 支付方式綁定和整體串聯(lián)部分

本章主要講解注冊模塊中的支付方式綁定，將整個(gè)注冊流程串起來并回顧注冊流程中涉及的技術(shù)點(diǎn)。

 

9-1 綁定支持方式

9-2 綁定支付方式完成

9-3 如何在單頁應(yīng)用中使用SDK

9-4 如何在react中使用sdk

第10章 賬號設(shè)置模塊開發(fā)

本章主要講解賬號設(shè)置部分，包括收貨地址管理、安全設(shè)置、個(gè)人資料編輯，對之前一些大的語法點(diǎn)進(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ī)號找回和郵箱找回，對之前一些大的語法點(diǎn)進(jìn)行鞏固和復(fù)習(xí)，穿插一些小的記憶性API。

 

11-1 重置密碼_1

11-2 重置密碼_2

11-3 課程回顧

第12章 整體串聯(lián)和總結(jié)

本章會講解開發(fā)完成的SDK如何落地在下游業(yè)務(wù)上構(gòu)成一個(gè)完整的流程，并對整個(gè)項(xiàng)目進(jìn)行回顧與總結(jié)，包括項(xiàng)目中用到的ES6+語法點(diǎn)、SDK開發(fā)的套路、賬號體系的前端業(yè)務(wù)等

 

12-1 課程總結(jié)(ES6+)

12-2 課程總結(jié)(開發(fā)流程與設(shè)計(jì)方法)

12-3 課程總結(jié)（真實(shí)環(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ā)要點(diǎn)）

12-11 課程總結(jié)（賬號體系開發(fā)要點(diǎn)）