Javascript 设计模式系统讲解与应用

第1章 课程介绍
学习设计模式的必要性,课程包含的知识点,课程安排,学习前提
1-1 导学

第2章 面向对象
讲解javascript中的面向对象的概念,包括 ES6 class 语法、UML 类图、以及面向对象三要素
2-1 搭建开发环境1
2-2 搭建开发环境2
2-3 搭建开发环境3
2-4 搭建开发环境4
2-5 什么是面向对象
2-6 面向对象-继承
2-7 面向对象-封装
2-8 面向对象-多态
2-9 面向对象-应用举例
2-10 面向对象-总结
2-11 UML类图1-介绍
2-12 UML类图2-关系
2-13 总结

第3章 设计原则
设计原则是理解设计模式的基础,是从设计到模式的过度。本章介绍何为设计,5大原则,另外,还会讲解两个关于面向对象与设计原则的真实面试题。
3-1 设计原则-介绍
3-2 设计原则-何为设计1
3-3 设计原则-何为设计2
3-4 设计原则-5大原则
3-5 用promise演示
3-6 设计模式简介
3-7 23种设计模式介绍
3-8 面试真题1-介绍
3-9 面试真题1-解答
3-10 面试真题2-介绍
3-11 面试真题2-画图
3-12 面试真题2-编码
3-13 总结

第4章 工厂模式
工厂模式是我们最常用的实例化对象模式,本章介绍工厂模式的基本概念,以快餐店汉堡作为生活实例加深理解,讲解并绘制了UML类图,最后列举了JS中的常见使用场景,如 jquery中的$,React.createElement,vue 异步组件等
4-1 工厂模式-介绍
4-2 工厂模式-演示和场景

第5章 单例模式
单例模式的核心结构中只包含一个被称为单例的特殊类。概念、UML类图仍是必须,本章使用的场景是 jquery中只有一个$,redux 和 vuex 的 store,一个系统中只有一套登录逻辑
5-1 单例模式-介绍
5-2 单例模式-演示
5-3 单例模式-场景(jq的$和登录框逻辑)和总结

第6章 适配器模式
将一个类的接口适配成用户所期待的,这就是适配器。替换老项目中jquery的$.ajax,vue中计算机属性computed的使用,都可以看作是适配器模式。
6-1 适配器模式-介绍
6-2 适配器模式-演示
6-3 适配器模式-场景(封装旧接口&Vue的computed)

第7章 装饰器模式
装饰器模式属于结构型模式,它是作为现有的类的一个包装,允许向一个现有的对象添加新的功能,同时又不改变其结构。本章同样介绍概念、UML。同时使用了丰富/实用的场景示例,包括ES7装饰器、core-decorators模块等
7-1 装饰器模式-介绍
7-2 装饰器模式-场景1
7-3 装饰器模式-场景2(装饰类和方法)
7-4 装饰器模式-场景3和总结

第8章 代理模式
为其他对象提供一种代理以控制对这个对象的访问。网络代理,明星/经纪人的场景恰如其分
8-1 代理模式-介绍和演示
8-2 代理模式-场景1(事件代理和jq的proxy)
8-3 代理模式-场景2(明星经纪人)
8-4 代理&适配器&装饰模式对比

第9章 外观模式
本章讲解外观模式,讲解其概念、示例
9-1 外观模式

第10章 观察者模式
观察者模式是前端最常用、最重要的设计模式,如果让你只掌握一种设计模式,那肯定就是观察者模式!!!星巴克点咖啡就是比较帖近的生活场景, jquery和NodeJs中的自定义事件更是经典的使用
10-1 观察者模式-介绍和演示
10-2 观察者模式-场景1jquery
10-3 观察者模式-场景2NodeJs自定义事件
10-4 观察者模式-其它场景

第11章 迭代器模式
用于顺序访问集合对象的元素,是的,就是循环。自己封装,通用的循环方法就是迭代器模式的经典实现。
11-1 迭代器模式-介绍
11-2 迭代器模式-演示
11-3 迭代器模式-场景(ES6 Iterator)1
11-4 迭代器模式-场景2
11-5 迭代器模式-代码演示和总结

第12章 状态模式
对于复杂的状态管理,如果只用 if…else来判断,扩展性是非常差的。状态模式提出了一种处理复杂状态变化且扩展性好的设计思路。有限状态机、自己实现Promise等场景的讲解,经典而深入
12-1 状态模式-介绍和演示
12-2 状态模式-场景1(有限状态机)
12-3 状态模式-场景2(写一个promise)

第13章 其他设计模式
本章统一讲解一些 JS 中使用不是很频繁的设计模式。虽然不常用,但是也要理解其概念和用意。
13-1 其他设计模式概述
13-2 原型模式
13-3 桥接模式
13-4 组合模式
13-5 享元模式
13-6 策略模式
13-7 模板方法模式和职责连模式
13-8 命令模式
13-9 备忘录模式
13-10 中介者模式
13-11 访问者模式和解释器模式
13-12 关于面试和日常使用

第14章 综合应用
设计模式好学,不易用。最难的是不知道在什么场景下应该使用什么模式。本章以一个简单的购物车综合示例来演示几个常用的设计模式如何落地使用,包括项目的分析、设计、编码和设计模式解析。
14-1 综合应用-介绍和演示
14-2 综合应用-UML类图分析
14-3 综合应用-画UML类图
14-4 综合应用-代码基础环境
14-5 综合应用-实现List组件
14-6 综合应用-实现item&cart
14-7 综合应用-状态模式实现购物车操作
14-8 综合应用-实现购物车列表和折扣
14-9 综合应用-实现日志
14-10 综合应用-总结

第15章 课程总结
回顾课程脉落,总结课程内容
15-1 课程总结

下载地址;百度网盘下载

原文地址:https://www.cnblogs.com/lovetin/p/9344796.html

时间: 2024-08-02 07:56:41

Javascript 设计模式系统讲解与应用的相关文章

21种JavaScript设计模式最新记录(含图和示例)

最近观看了<Javascript设计模式系统讲解与应用>教程,对设计模式有了新的认识,特在此做些记录. 一.UML 文中会涉及众多的UML类图,在开篇需要做点基础概念的认识.以下面的图为例,图片和说明均来源于<大话设计模式>一书. (1)矩形框,它代表一个类.类图分三层,第一层显示类的名称,如果是抽象类,则用斜体显示.第二层是类的特性,通常就是字段和属性.第三层是类的操作,通常是方法或行为.前面的符号,+ 表示public,- 表示private,# 表示protected. (2

javascript设计模式

javascript设计模式 阅读目录 什么是设计模式 单体模式: 工厂模式: 单例模式 观察者模式(发布订阅模式) 策略模式 模板模式 代理模式 外观模式 设计模式太多了,貌似有23种,其实我们在平时的工作中没有必要特意去用什么样的设计模式,或者你在不经意间就已经用了设计模式当中的一种.本文旨在总结平时相对来说用的比较多的设计模式. 回到顶部 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用设计模式是

《Javascript 设计模式》-读书笔记

第七章   设计模式类别 一.设计模式有三种类别 1.创建型模式:专注于处理对象机制.包括:构造器.工厂.抽象.原型.单例.生成器 2.结构型模式:用于找出在不同对象之间建立关系密切的简单方法. 包括:装饰者.外观.享元.适配器.代理 3.行为模式:用于改善或简化系统中不同对象之间的通信.包括:迭代器.中介者.观察者.访问者 第八章   设计模式分类 <Javascript 设计模式>-读书笔记,布布扣,bubuko.com

《JavaScript设计模式 张》整理

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo

JavaScript设计模式:读书笔记(未完)

该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/3/30: 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.有效模式的附加要求:适合性,实用性,适用性. 模式的优点: 防止局部问题引起大问题,模式让我们的代码更有组织性 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构 模式确实可以让我们避免代码复用,使代码更

JavaScript设计模式与开发实践 面向对象

1 动态类型语言 静态类型语言编译时就已经确定变量类型,动态类型语言的变量类型要到程序运行时,变量被赋予某个值后,才会有类型. 静态语言的优点:首先,编译时就能发现类型不匹配错误,其次如果程序明确规定数据类型,编译器还能针对这些信息对程序进行优化,提高程序执行速度.   静态语言的缺点:迫使程序员按照强契约编写程序,并且增加更多代码. 动态语言的优点:编写的代码更少,程序员能把精力放到业务逻辑. 动态语言的缺点:无法保证变量的类型,再程序运行时可能发现类型相关错误. 动态类型无需进行类型检测,我

JavaScript设计模式学习之路——面向对象的思想

今天,我拿到了张容铭写的这本<JavaScript设计模式>这本书,开始了关于JavaScript更深一点的学习. 看到这本书开始的时候,虽然之前通过看书.一些比较好的视频的讲解,对JavaScript有了基础的认识,但是,在看到书的内容的时候,我内心还是有一种自己差的十万八千里的感觉,之前的代码写法不行,使用全局变量.全局函数,只是面向过程的编程的方法,扩展性.可重用性太低.以后我将每天更新博客,将自己所学每一种设计模式都po出来,我要自己看到自己的进步!!加油! 今天的内容是————面向对

精读《JavaScript设计模式》:简介(一)

经过一段工作时间的沉淀后,我发现需要细看一些书籍验证当中获得的经验.在JavaScript上的结构和模式上的考虑,使我决定精读<JavaScript设计模式>(中文版).在阅读的过程中,发现中文版的某些译文有些不适当的时候,我就会查询相应英文版<Learning JavaScript Design Patterns>,斟酌差异.我摘拿了一些内容记录,在下面描述中,中文上有异议地方,我会附带上英文部分,并记录自己想法. 模式目的: 中文: 编写易于维护的代码,其中一个最重要方面是能够

Javascript设计模式理论与实战:工厂方法模式

本文从简单工厂模式的缺点说起,引入工厂方法模式,介绍的工厂方法模式的基本知识,实现要点和应用场景,最后举例进行说明工厂方法模式的应用.在之前的<Javascript设计模式理论与实战:简单工厂模式>这篇文章中,我们介绍了简单工厂的知识和一些应用.简单工厂模式存在一个唯一的工厂类,它的优点是所有产品类的实例化集中管理,便于理解,但这既是优点也是缺点.如果产品类的数量较少并且不会经常发生变化,我们可以直接利用简单工厂模式,但是有的时候,需求是随时在变的,产品类也可能随时在增加,如果使用简单工厂模式