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

F:\study\255 - Javascript 设计模式系统讲解与应用

6 1

第1章 课程介绍( )/1-1导学(更多IT教程 .mp4'

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

设计模式前端开发客户端开发后端开发高级工程师

如何成为一名合格工程师？懂代码不懂设计

论工程师的设计能力一名合格工程师必备的条件：前端开发有一定的设计能力

论工程师的设计能力3年工作经验，面试必考设计能力成为项目技术负责人，设计能力是必要基础从写好代码，到做好设计，设计模式是必经之路

前端学习设计模式的困惑网上的资料都是针对Java 等后端语言的看懂概念，但是不知道怎么用，看完就忘现在的JS框架，到底都用了哪些设计模式

课程概述
做什么？—讲解JS设计模式哪些部分？
一面向对象，设计原则，设计模式技术？
一面向对象，UML类图，ES6

知识点介绍ES6 class 语法何为设计？设计原则面向对象三要素5大设计原则UML类图从设计到模式分优先级讲解设计方案综合示例设计模式结合核心技术代码演示结合框架应用设计模式对应

面向对象使用 webpack和babel搭建ES6编译环境ES6class面向对象的语法面向对象三要素：继承封装多态

设计模式概述：创建型、结构型、行为型常用设计模式，详细讲解，结合经典使用场景非常用设计模式，理解概念，示例演示有主有次，掌握重点

综合示例用jQuery 实现一个简单的购物车设计分析，画UML类图代码演示总结使用的7种设计模式

讲授方式先基础后实践，先“设计”后“模式”重点、常用的设计模式，配合经典使用场景综合示例，演示设计模式如何使用用JS的方式讲解面向对象和设计模式

面向对象思想，UML类图5大设计原则，23种设计模式能应对前端面试中相关的面试题

学习前提了解面向对象，能熟练使用jQuery或类似工具库有ES6语法基础，用过nodejs和npm环境了解vue和React（至少看过文档，做过demo)

本课讲解设计模式，不是实战项目也不是源码分析23种设计模式不是都常用，分清主次设计模式在JS和Java中的讲解方式有区别不适合刚入门编程的同学，参考上文的学习前提

'第2章 面向对象( )/2-1 搭建开发环境1(1)(更多IT教程 .mp4'

面向对象搭建开发环境什么是面向对象UML类图总结

搭建开发环境初始化npm环境安装webpack安装webpack-dev-server安装 babel

什么是面向对象概念三要素：继承封装多态JS的应用举例面向对象的意义

概念-类 概念-对象（实例)

三要素继承，子类继承父类封装，数据的权限和保密多态，同一接口不同实现

三要素-继承People是父类，公共的，不仅仅服务于Student继承可将公共方法抽离出来，提高复用，减少冗余

三要素-封装protected 对子类开放public完全开放private 对自己开放（ES6尚不支持，可以用typescript来演示）

三要素-封装减少耦合，不该外露的不外露利于数据、接囗的权限管理ES6目前不支持，一般认为_开头的属性是private

三要素-多态同一个接口，不同表现lolJS应用极少需要结合 java、等语言的接口、重写、重载等功能

三要素-多态保持子类的开放性和灵活性面向接口编程（JS引用极少，了解即可）

为何使用面向对象？程序执行：顺序、判断、循环——结构化面向对象——数据结构化

对于计算机，结构化的才是最简单的

编程应该简单&抽象

总结概念及Demo三要素：继承封装多态，以及演示jQuery的应用示例意义：数据结构化lol

UML类图Unified Modeling Language统一建模语言类图，UML包含很多种图，和本课相关的是类图关系，主要讲解泛化和关联演示，代码和类图结合

画图工具MS Office visiohttps://www.processon.com/

关系泛化，表示继承关联，表示引用

总结类图，属性、方法关系，泛化、关联示例演示后面学习设计模式，会继续画UML类图

面向对象-总结搭建开发环境：npm init、webpack、babel面向对象：概念、三要素、应用举例、意义UML类图：类图、关系、示例

设计原则何为设计？五大设计原则从设计到模式介绍23种设计模式

何为设计？描述结合《UNIX/LINUX设计哲学》

描述即按照哪一种思路或者标准来实现功能功能相同，可以有不同设计方案来实现伴随着需求增加，设计的作用才能体现出来

《UNIX/LINUX设计哲学》
准则1：小即是美
准则2：让每个程序只做好一件事
准则3：快速建立原型

准则4：舍弃高效率而取可移植性
准则5：采用纯文本来存储数据
准则6：充分利用软件的杠杆效应（软件复用)

准则7：使用shell脚本来提高杠杆效应和可移植性
准则8：避免强制性的用户界面
准则9：让每个程序都称为过滤器

《UNIX/LINUX设计哲学》-小准则
小准则：允许用户定制环境
小准则：尽量使操作系统内核小而轻量化
小准则：使用小写字母并尽量简短

小准则：沉默是金
小准则：各部分之和大于整体
小准则：寻求90%的解决方案

S OLID五大设计原则S-单一职责原则O-开放封闭原则L-李氏置换原则I-接囗独立原则DR依赖导致原则

S-单一职责原则一个程序只做好一件事如果功能过于复杂就拆分开，每个部分保持独立

O-开放封闭原则对扩展开放，对修改封闭增加需求时，扩展新代码，而非修改已有代码这是软件设计的终极目标

L-李氏置换原则子类能覆盖父类父类能出现的地方子类就能出现JS中使用较少（弱类型&继承使用较少）

I-接囗独立原则保持接囗的单一独立，避免出现“胖接囗”JS中没有接口（typescript例外），使用较少类似于单一职责原则，这里更关注接囗

D-依赖倒置原则面向接口编程，依赖于抽象而不依赖于具体使用方只关注接口而不关注具体类的实现JS中使用较少（没有接口&弱类型）

设计原则总结SO体现较多，详细介绍LID体现较少，但是要了解其用意

用Promise来说明S O单一职责原则：每个then中的逻辑只做好一件事开放封闭原则：如果新增需求，扩展then对扩展开放、对修改封闭

从设计到模式设计模式分开“从设计到模式”

介绍、23种设计模式创建型组合型行为型

创建型工厂模式（工厂方法模式，抽象工厂模式，建造者模式)单例模式原型模式

结构型适配器模式桥接模式装饰器模式组合模式享元模式代理模式外观模式

行为型-2备忘录模式中介者模式状态模式解释器模式访问者模式

分优先级前端常用设计模式，详讲前端非常用设计模式，略讲前端少用设计模式，介绍

如何讲解设计模式？介绍和举例（生活中易理解的示例）画UML类图写demo 代码结合经典应用场景，讲解该设计模式如何被使用

该如何学习设计模式？明白每个设计的道理和用意通过经典应用体会它的真正使用场景自己编码时多思考，尽量模仿

面试题示例从朋友那里得到的真实面试题第一题是某打车公司一面；第二题是某短视频公司三面考察面向对象和设计能力面试有可能遇到，也有可能遇不到（不同时间、不同部门）

https://www.processon.com/diagraming/5b403079e4b09a67415e99f7

'第2章 面向对象( )/2-10 面向对象-总结(更多IT教程 .mp4'
'第2章 面向对象( )/2-11 UML类图1-介绍(更多IT教程 .mp4'
'第2章 面向对象( )/2-12 UML类图2-关系(更多IT教程 .mp4'
'第2章 面向对象( )/2-13 总结(更多IT教程 .mp4'
'第2章 面向对象( )/2-2 搭建开发环境2(更多IT教程 .mp4'
'第2章 面向对象( )/2-3 搭建开发环境3(更多IT教程 .mp4'
'第2章 面向对象( )/2-4 搭建开发环境4(更多IT教程 .mp4'
'第2章 面向对象( )/2-5 什么是面向对象(更多IT教程 .mp4'
'第2章 面向对象( )/2-6 面向对象-继承(更多IT教程 .mp4'
'第2章 面向对象( )/2-7 面向对象-封装(更多IT教程 .mp4'
'第2章 面向对象( )/2-8 面向对象-多态(更多IT教程 .mp4'
'第2章 面向对象( )/2-9 面向对象-应用举例(更多IT教程 .mp4'

'第3章 设计原则( )/3-1 设计原则-介绍(更多IT教程 .mp4'

说明单例模式需要用到java的特性（private）ES6中没有（typescript 除外）只能用java 代码来演示UML图的内容

设计原则验证符合单一职责原则，只实例化唯一的对象没法具体开放封闭原则，但是绝对不违反开放封闭原则

介绍旧接囗格式和使用者不兼容中间加一个适配转换接囗

场景封装旧接口vue computed

设计原则验证·将旧接口和使用者进行分离·符合开放封闭原则

介绍为对象添加新功能不改变其原有的结构和功能

场景ES7装饰器core-decorators

core-decorators第三方开源lib提供常用的装饰器查阅文档：github.com/jayphelps/core-decorators

设计原则验证代理类和目标类分离，隔离开目标类和使用者符合开放封闭原则

代理模式vs适配器模式适配器模式：提供一个不同的接口（如不同版本的插头)代理模式：提供一模一样的接囗

代理模式vs装饰器模式装饰器模式：扩展功能，原有功能不变且可直接使用代理模式：显示原有功能，但是经过限制或者阉割之后的

'第3章 设计原则( )/3-10 面试真题2-介绍(更多IT教程 .mp4'
'第3章 设计原则( )/3-11 面试真题2-画图(更多IT教程 .mp4'
'第3章 设计原则( )/3-12 面试真题2-编码(更多IT教程 .mp4'
'第3章 设计原则( )/3-13 总结(更多IT教程 .mp4'
'第3章 设计原则( )/3-2 设计原则-何为设计1(更多IT教程 .mp4'
'第3章 设计原则( )/3-3 设计原则-何为设计2(更多IT教程 .mp4'
'第3章 设计原则( )/3-4 设计原则-5大原则(更多IT教程 .mp4'
'第3章 设计原则( )/3-5 用promise演示(更多IT教程 .mp4'
'第3章 设计原则( )/3-6 设计模式简介(更多IT教程 .mp4'
'第3章 设计原则( )/3-7 23种设计模式介绍(更多IT教程 .mp4'
'第3章 设计原则( )/3-8 面试真题1-介绍(更多IT教程 .mp4'
'第3章 设计原则( )/3-9 面试真题1-解答(更多IT教程 .mp4'
'第4章 工厂模式( )/4-1 工厂模式-介绍(更多IT教程 .mp4'
'第4章 工厂模式( )/4-2 工厂模式-演示和场景(更多IT教程 .mp4'
'第4章 工厂模式( )/本章精华总结.mp4'
'第5章 单例模式( )/5-1 单例模式-介绍(更多IT教程 .mp4'
'第5章 单例模式( )/5-2 单例模式-演示(更多IT教程 .mp4'
'第5章 单例模式( )/5-3 单例模式-场景(jq的$和登录框逻辑)和总结(更多IT教程 .mp4'
'第6章 适配器模式( )/6-1 适配器模式-介绍(更多IT教程 .mp4'
'第6章 适配器模式( )/6-2 适配器模式-演示(更多IT教程 .mp4'
'第6章 适配器模式( )/6-3 适配器模式-场景(封装旧接口&Vue的computed)(更多IT教程 .mp4'
'第7章 装饰器模式( )/7-1 装饰器模式-介绍(更多IT教程 .mp4'
'第7章 装饰器模式( )/7-2 装饰器模式-场景1(更多IT教程 .mp4'
'第7章 装饰器模式( )/7-3 装饰器模式-场景2(装饰类和方法)(更多IT教程 .mp4'
'第7章 装饰器模式( )/7-4 装饰器模式-场景3和总结(更多IT教程 .mp4'
'第8章 代理模式( )/8-1 代理模式-介绍和演示(更多IT教程 .mp4'
'第8章 代理模式( )/8-2 代理模式-场景1(事件代理和jq的proxy)(更多IT教程 .mp4'
'第8章 代理模式( )/8-3 代理模式-场景2(明星经纪人)(更多IT教程 .mp4'
'第8章 代理模式( )/8-4 代理&适配器&装饰模式对比(更多IT教程 .mp4'

'第9章 外观模式( )/9-1 外观模式(更多IT教程 .mp4'

设计原则验证不符合单一职责原则和开放封闭原则，因此谨慎使用，不可滥用

'第10章 观察者模式( )/10-1 观察者模式-介绍和演示(更多IT教程 .mp4'

观察者模式介绍演示场景总结

发布&订阅一对多

传统UML类图 unimodel lang

场景网页事件绑定PromisejQuery callbacksnodejs 自定义事件

其他场景nodejs 中：处理http请求；多进程通讯vue和React组件生命周期触发vue watch

设计原则验证主题和观察者分离，不是主动触发而是被动监听，两者解耦符合开放封闭原则

'第10章 观察者模式( )/10-2 观察者模式-场景1jquery(更多IT教程 .mp4'
'第10章 观察者模式( )/10-3 观察者模式-场景2NodeJs自定义事件(更多IT教程 .mp4'
'第10章 观察者模式( )/10-4 观察者模式-其它场景(更多IT教程 .mp4'

'第11章 迭代器模式( )/11-1 迭代器模式-介绍(更多IT教程 .mp4'

介绍顺序访问一个集合使用者无需知道集合的内部结构（封装）

场景jQuery eachES6 Iterator

ES6 Iterator为何存在?ES6语法中，有序集合的数据类型已经有很多Array Map Set String TypedArray arguments NodeList

需要有一个统一的遍历接囗来遍历所有数据类型（注意，object不是有序集合，可以用Map代替）

ES6 Iterator是什么?以上数据类型，都有[Symbol.iterator]属性属性值是函数，执行函数返回一个迭代器这个迭代器就有next方法可顺序迭代子元素可运行Array.prototype[Symbol.iterator]来测试

ES6 Iterator 与 GeneratorIterator的价值不限于上述几个类型的遍历还有Generator 函数的使用即只要返回的数据符合Iterator接口的要求即可使用Iterator语法，这就是迭代器模式

设计原则验证迭代器对象和目标对象分离迭代器将使用者与目标对象隔离开符合开放封闭原则

'第11章 迭代器模式( )/11-2 迭代器模式-演示(更多IT教程 .mp4'
'第11章 迭代器模式( )/11-3 迭代器模式-场景(ES6 Iterator)1(更多IT教程 .mp4'
'第11章 迭代器模式( )/11-4 迭代器模式-场景2(更多IT教程 .mp4'
'第11章 迭代器模式( )/11-5 迭代器模式-代码演示和总结(更多IT教程 .mp4'

'第12章 状态模式( )/12-1 状态模式-介绍和演示(更多IT教程 .mp4'

状态模式介绍演示场景总结

介绍一个对象有状态变化每次状态变化都会触发一个逻辑不能总是用if...else来控制

示例交通信号灯不同颜色的变化

有限状态机有限个状态、以及在这些状态之间的变化如交通信号灯使用开源lib：javascript-state-machinegithub.com/jakesgordon/javascript-state-machine

写一个简单的Promise回顾 Promise 的语法分析：Promise 就是一个有限状态机写代码

更多资源QPromise 就是有限状态机Promise 三种状态：pending fullfilled rejectedpending -> fullfilled 或者 pending -> rejected不能逆向变化

设计原则验证将状态对象和主题对象分离，状态的变化逻辑单独处理

'第12章 状态模式( )/12-2 状态模式-场景1(有限状态机)(更多IT教程 .mp4'
'第12章 状态模式( )/12-3 状态模式-场景2(写一个promise)(更多IT教程 .mp4'

'第13章 其他设计模式( )/13-1 其他设计模式概述(更多IT教程 .mp4'

其他设计模式优先级划分依据讲解方式有哪些设计模式

优先级划分依据不常用对应不到经典的应用场景

讲解方式多资源代码演示，说明该设计模式的目的和用意不再画UML类图（此前画过N次了)

有哪些设计模式-行为型策略模式模板方法模式职责链模式命令模式备忘录模式中介者模式访问者模式解释器模式

更多资概念clone自己，生成一个新对象java 默认有clone接口，不用自己实现

对比JS中的原型prototypeprototype 可以理解为ES6 class的一种底层原理而class是实现面向对象的基础，并不是服务于某个模式

·若干年后ES6全面普及，大家可能会忽略掉prototype

但是Object.create 却会长久存在

概念用于把抽象化与实现化解耦使得二者可以独立变化（未找到JS中的经典应用）

概念生成树形结构，表示“整体-部分”关系让整体和部分都具有一致的操作方式

演示JS经典应用中，未找到这么复杂的数据类型虚拟DOM 中的 vnode是这种形式，但数据类型简单（用JS实现一个菜单，不算经典应用，与业务相关)

概念共享内存（主要考虑内存，而非效率)相同的数据，共享使用(JS中未找到经典应用场景）

设计原则验证将相同的部分抽象出来符合开放封闭原则

策略模式 模板方法模式

概念一步操作可能分位多个职责角色来完成把这些角色都分开，然后用一个链串起来将发起者和各个处理者进行隔离

JS中的链式操作职责链模式和业务结合较多，JS中能联想到链式操作jQuery的链式操作 Promise.then 的链式操作

设计原则验证发起者于各个处理者进行隔离符合开放封闭原则

概念执行命令时，发布者和执行者分开中间加入命令对象，作为中转站

概念发送者接受者接收命令，调用接受者对应接口发出命令，调用命令对象命令对象

JS中的应用网页富文本编辑器操作，浏览器封装了一个命令对象document.execCommand('bold')document.execCommand('undo')

设计原则验证命令对象于执行对象分开，解耦符合开放封闭原则

概念随时记录一个对象的状态变化随时可以恢复之前的某个状态（如撤销功能）未找到JS中经典应用，除了一些工具（如编辑器)

设计原则验证讲各关联对象通过中介者隔离符合开放封闭原则

访问者模式将数据操作和数据结构进行分离使用场景不多

解释器模式描述语言语法如何定义，如何解释和编译用于专业场景

日常使用重点讲解的设计模式，要强制自己模仿、掌握非常用的设计模式，视业务场景选择性使用

用到的设计模式工厂模式单例模式装饰器模式观察者模式状态模式模板方法模式代理模式

总结用到的设计模式工厂模式：$（‘xxx'），创建商品
单例模式：购物车
装饰器模式：打点统计

总结用到的设计模式观察者模式：网页事件，Promise
状态模式：添加到购物车&从购物车删除
模板方法模式：渲染有统一的方法，内部包含了各模块渲染

基础知识准备
面向对象和UML类图
5大设计原则，从设计到模式

工厂模式单例模式适配器模式
代理模式外观模式观察者模式
状态模式
迭代器模式

原型模式桥接模式组合模式享元模式
策略模式模板方法模式职责链模式命令模式
备忘录模式中介者模式访问者模式解释器模式

综合示例演示用jQuery演示一个简单的购物车面向对象思想，UML类图设计

'第13章 其他设计模式( )/13-10 中介者模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-11 访问者模式和解释器模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-12 关于面试和日常使用(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-2 原型模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-3 桥接模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-4 组合模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-5 享元模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-6 策略模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-7 模板方法模式和职责连模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-8 命令模式(更多IT教程 .mp4'
'第13章 其他设计模式( )/13-9 备忘录模式(更多IT教程 .mp4'
'第14章 综合应用( )/14-1 综合应用-介绍和演示(更多IT教程 .mp4'
'第14章 综合应用( )/14-10 综合应用-总结(更多IT教程 .mp4'
'第14章 综合应用( )/14-2 综合应用-UML类图分析(更多IT教程 .mp4'
'第14章 综合应用( )/14-3 综合应用-画UML类图(更多IT教程 .mp4'
'第14章 综合应用( )/14-4 综合应用-代码基础环境(更多IT教程 .mp4'
'第14章 综合应用( )/14-5 综合应用-实现List组件(更多IT教程 .mp4'
'第14章 综合应用( )/14-6 综合应用-实现item&cart(更多IT教程 .mp4'
'第14章 综合应用( )/14-7 综合应用-状态模式实现购物车操作(更多IT教程 .mp4'
'第14章 综合应用( )/14-8 综合应用-实现购物车列表和折扣(更多IT教程 .mp4'
'第14章 综合应用( )/14-9 综合应用-实现日志(更多IT教程 .mp4'
'第15章 课程总结( )/15-1 课程总结(更多IT教程 .mp4'
'
'课程资料/js目录 (更多IT教程 微信352852792).txt'
课程资料/最新资料（必看）.url
课程资料/重点说明.txt