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

  • A+
所属分类:Web前端
摘要

设计模式就是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。


一、设计模式是什么?

设计模式就是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

为什么要使用设计模式?设计模式可重用代码、让代码更容易被他人理解、保证代码可靠性,设计模式使代码编制真正工程化。

设计模式怎么来的?设计模式概念是由四人帮(《设计模式(可复用面向对象软件的基础)》的四位作者)提出,总共分成了三种类型23种模式。

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

终于,有一门为前端准备的设计模式课程了!
从“写好代码”到“设计代码”的过程,不仅是技术的提升,更是编程思维的提升,而这其中最关键的就是设计模式,是否理解并掌握设计模式,也是衡量程序员能力的标准之一。

就JS设计模式课程而言,这几乎是全网独一无二的系统视频课程。
1、以JS代码讲解设计模式,查找设计模式资料,大多都是Java,关于JS的你很难找到如此统一全面的。
2、知识点覆盖+面试题解析,覆盖所有模式,尤其是前端常用模式,并带你解析知名公司的经典面向对象面试题。
3、结合日常工作使用场景,教你如何将设计能力应用于工作中,设计并写出更加合理可扩展的代码,真正提高设计能力。
4、知识讲解+案例实战知识讲解的同时配套一个综合实战案例,让你看透设计模式的具体应用。

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

 

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

第2章 面向对象
讲解javascript中的面向对象的概念,包括 ES6 class 语法、UML 类图、以及面向对象三要素。

第3章 设计原则
设计原则是理解设计模式的基础,是从设计到模式的过度。本章介绍何为设计,5大原则,另外,还会讲解两个关于面向对象与设计原则的真实面试题。

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

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

第6章 适配器模式
将一个类的接口适配成用户所期待的,这就是适配器。替换老项目中jquery的$.ajax,vue中计算机属性computed的使用,都可以看作是适配器模式。

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

第8章 代理模式
为其他对象提供一种代理以控制对这个对象的访问。网络代理,明星/经纪人的场景恰如其分。

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

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

第11章 迭代器模式
用于顺序访问集合对象的元素,是的,就是循环。自己封装,通用的循环方法就是迭代器模式的经典实现。

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

第13章 其他设计模式
本章统一讲解一些 JS 中使用不是很频繁的设计模式。虽然不常用,但是也要理解其概念和用意。

第14章 综合应用
设计模式好学,不易用。最难的是不知道在什么场景下应该使用什么模式。本章以一个简单的购物车综合示例来演示几个常用的设计模式如何落地使用,包括项目的分析、设计、编码和设计模式解析。
第15章 课程总结
回顾课程脉落,总结课程内容。
获取Javascript 设计模式系统项目视频教程请家微X:bright1688

创建型:

1.抽象工厂模式(Abstract Factory)  2.构建者模式(Builder)  3.工厂方法模式(Factory Method)  4.原型模式(Prototype)  5.单例模式(Singleton) 

结构型:

1.适配器模式(Adapter)  2.桥接模式(Bridge)  3.组合模式(Compositor)  4.装饰者模式(Decorator)  5.外观模式(Facade)  6.享元模式(Flyweight)  7.代理模式(Proxy) 

行为:

1.职责链模式(Chain of Responsibility)  2.命令模式(Command)  3.解释器模式(Interpreter)  4.迭代器模式(Iterator)  5.中介者模式(Mediator)  6.备忘录模式(Memento)  7.观察者模式(Observer)  8.状态模式(State)  9.策略模式(Strategy)  10.模板方法模式(Template Method)  11.访问者模式(Visitor) 

在开发中我们或许不会使用这些模式,也不需要掌握这么多模式,但是理解并掌握到使用这些模式是每一个开发者想提升自己的必经之路。获取分享的JavaScript视频教程里有实际项目详细讲解。