第1章 課程介紹
學(xué)習(xí)設(shè)計模式的必要性,課程包含的知識點(diǎn),課程安排,學(xué)習(xí)前提
1-1 導(dǎo)學(xué)
第2章 面向?qū)ο?br />
講解javascript中的面向?qū)ο蟮母拍睿?ES6 class 語法、UML 類圖、以及面向?qū)ο笕?br />
2-1 搭建開發(fā)環(huán)境1
2-2 搭建開發(fā)環(huán)境2
2-3 搭建開發(fā)環(huán)境3
2-4 搭建開發(fā)環(huán)境4
2-5 什么是面向?qū)ο?br />
2-6 面向?qū)ο?繼承
2-7 面向?qū)ο?封裝
2-8 面向?qū)ο?多態(tài)
2-9 面向?qū)ο?應(yīng)用舉例
2-10 面向?qū)ο?總結(jié)
2-11 UML類圖1-介紹
2-12 UML類圖2-關(guān)系
2-13 總結(jié)
第3章 設(shè)計原則
設(shè)計原則是理解設(shè)計模式的基礎(chǔ),是從設(shè)計到模式的過度。本章介紹何為設(shè)計,5大原則,另外,還會講解兩個關(guān)于面向?qū)ο笈c設(shè)計原則的真實(shí)面試題。
3-1 設(shè)計原則-介紹
3-2 設(shè)計原則-何為設(shè)計1
3-3 設(shè)計原則-何為設(shè)計2
3-4 設(shè)計原則-5大原則
3-5 用promise演示
3-6 設(shè)計模式簡介
3-7 23種設(shè)計模式介紹
3-8 面試真題1-介紹
3-9 面試真題1-解答
3-10 面試真題2-介紹
3-11 面試真題2-畫圖
3-12 面試真題2-編碼
3-13 總結(jié)
第4章 工廠模式
工廠模式是我們最常用的實(shí)例化對象模式,本章介紹工廠模式的基本概念,以快餐店漢堡作為生活實(shí)例加深理解,講解并繪制了UML類圖,最后列舉了JS中的常見使用場景,如 jquery中的$,React.createElement,vue 異步組件等
4-1 工廠模式-介紹
4-2 工廠模式-演示和場景
第5章 單例模式
單例模式的核心結(jié)構(gòu)中只包含一個被稱為單例的特殊類。概念、UML類圖仍是必須,本章使用的場景是 jquery中只有一個$,redux 和 vuex 的 store,一個系統(tǒng)中只有一套登錄邏輯
5-1 單例模式-介紹
5-2 單例模式-演示
5-3 單例模式-場景(jq的$和登錄框邏輯)和總結(jié)
第6章 適配器模式
將一個類的接口適配成用戶所期待的,這就是適配器。替換老項(xiàng)目中jquery的$.ajax,vue中計算機(jī)屬性computed的使用,都可以看作是適配器模式。
6-1 適配器模式-介紹
6-2 適配器模式-演示
6-3 適配器模式-場景(封裝舊接口&Vue的computed)
第7章 裝飾器模式
裝飾器模式屬于結(jié)構(gòu)型模式,它是作為現(xiàn)有的類的一個包裝,允許向一個現(xiàn)有的對象添加新的功能,同時又不改變其結(jié)構(gòu)。本章同樣介紹概念、UML。同時使用了豐富/實(shí)用的場景示例,包括ES7裝飾器、core-decorators模塊等
7-1 裝飾器模式-介紹
7-2 裝飾器模式-場景1
7-3 裝飾器模式-場景2(裝飾類和方法)
7-4 裝飾器模式-場景3和總結(jié)
第8章 代理模式
為其他對象提供一種代理以控制對這個對象的訪問。網(wǎng)絡(luò)代理,明星/經(jīng)紀(jì)人的場景恰如其分
8-1 代理模式-介紹和演示
8-2 代理模式-場景1(事件代理和jq的proxy)
8-3 代理模式-場景2(明星經(jīng)紀(jì)人)
8-4 代理&適配器&裝飾模式對比
第9章 外觀模式
本章講解外觀模式,講解其概念、示例
9-1 外觀模式
第10章 觀察者模式
觀察者模式是前端最常用、最重要的設(shè)計模式,如果讓你只掌握一種設(shè)計模式,那肯定就是觀察者模式!!!星巴克點(diǎn)咖啡就是比較帖近的生活場景, jquery和NodeJs中的自定義事件更是經(jīng)典的使用
10-1 觀察者模式-介紹和演示
10-2 觀察者模式-場景1jquery
10-3 觀察者模式-場景2NodeJs自定義事件
10-4 觀察者模式-其它場景
第11章 迭代器模式
用于順序訪問集合對象的元素,是的,就是循環(huán)。自己封裝,通用的循環(huán)方法就是迭代器模式的經(jīng)典實(shí)現(xiàn)。
11-1 迭代器模式-介紹
11-2 迭代器模式-演示
11-3 迭代器模式-場景(ES6 Iterator)1
11-4 迭代器模式-場景2
11-5 迭代器模式-代碼演示和總結(jié)
第12章 狀態(tài)模式
對于復(fù)雜的狀態(tài)管理,如果只用 if…else來判斷,擴(kuò)展性是非常差的。狀態(tài)模式提出了一種處理復(fù)雜狀態(tài)變化且擴(kuò)展性好的設(shè)計思路。有限狀態(tài)機(jī)、自己實(shí)現(xiàn)Promise等場景的講解,經(jīng)典而深入
12-1 狀態(tài)模式-介紹和演示
12-2 狀態(tài)模式-場景1(有限狀態(tài)機(jī))
12-3 狀態(tài)模式-場景2(寫一個promise)
第13章 其他設(shè)計模式
本章統(tǒng)一講解一些 JS 中使用不是很頻繁的設(shè)計模式。雖然不常用,但是也要理解其概念和用意。
13-1 其他設(shè)計模式概述
13-2 原型模式
13-3 橋接模式
13-4 組合模式
13-5 享元模式
13-6 策略模式
13-7 模板方法模式和職責(zé)連模式
13-8 命令模式
13-9 備忘錄模式
13-10 中介者模式
13-11 訪問者模式和解釋器模式
13-12 關(guān)于面試和日常使用
第14章 綜合應(yīng)用
設(shè)計模式好學(xué),不易用。最難的是不知道在什么場景下應(yīng)該使用什么模式。本章以一個簡單的購物車綜合示例來演示幾個常用的設(shè)計模式如何落地使用,包括項(xiàng)目的分析、設(shè)計、編碼和設(shè)計模式解析。
14-1 綜合應(yīng)用-介紹和演示
14-2 綜合應(yīng)用-UML類圖分析
14-3 綜合應(yīng)用-畫UML類圖
14-4 綜合應(yīng)用-代碼基礎(chǔ)環(huán)境
14-5 綜合應(yīng)用-實(shí)現(xiàn)List組件
14-6 綜合應(yīng)用-實(shí)現(xiàn)item&cart
14-7 綜合應(yīng)用-狀態(tài)模式實(shí)現(xiàn)購物車操作
14-8 綜合應(yīng)用-實(shí)現(xiàn)購物車列表和折扣
14-9 綜合應(yīng)用-實(shí)現(xiàn)日志
14-10 綜合應(yīng)用-總結(jié)
第15章 課程總結(jié)
回顧課程脈落,總結(jié)課程內(nèi)容
15-1 課程總結(jié)






