Javascript设计模式与应用
学习了双越老师的课程
在这里梳理、总结、分享
希望和各位大佬一起交流与学习
lj1530562965
这个作者很懒,什么都没留下…
展开
-
(一)导学(Javascript设计模式系统讲解与应用)
导学论工程师的设计能力前端学习设计模式的困惑课程概述知识点介绍课程安排面向对象设计原则设计模式综合示例讲解方式课程收获学习前提重点提示论工程师的设计能力3年工作经验,面试必考设计能力成为项目技术负责人,设计能力是必要基础从写好代码到做好设计,设计模式是必经之路前端学习设计模式的困惑网上的资料都是针对Java等后端语言的看懂概念,但是不知道怎么用,看完就忘现在的JS框架,到底都用了哪些设计模式课程概述做什么?-讲解JS设计模式哪些部分?-面向对象,设计原则,设计模式技术?-面向对象,U原创 2020-07-24 14:40:13 · 232 阅读 · 0 评论 -
(二)面向对象
面向对象搭建开发环境安装 webpack启动服务babel 解析 ES6什么是面向对象概念三要素继承封装多态应用场景为何要用面向对象其他UML类图介绍类图几种关系demo总结搭建开发环境初始化npm环境,npm init安装webpack,npm install webpack webpack-cli --save-dev安装webpack-dev-server,npm install webpack-dev-server html-webpack-plugin --save-dev安装babel原创 2020-09-02 09:56:51 · 248 阅读 · 0 评论 -
(三)设计原则
设计原则设计原则何为“设计”设计原则介绍单一职责原则开放封闭原则李氏置换原则接口隔离原则依赖倒置原则举例说明从设计到模式简介 23 种设计模式设计原则何为“设计”?设计原则从设计到模式简介 23 种设计模式何为“设计”按我的理解,通俗来说,设计(仅指编程设计)就是按照哪一种思路或者标准来实现功能。同样的功能,不同的设计思想都能用不同的方式来实现,前期效果可能一样,但是随着产品功能的增加和扩展,设计的作用才会慢慢的显示出来。结合《UNIX/Linux 设计哲学》中提到的系统设计原则 htt原创 2020-09-02 14:44:04 · 219 阅读 · 0 评论 -
(四)工厂模式
工厂模式工厂模式工厂模式 介绍概念示例工厂模式 演示工厂模式 场景jQuery `$('div')``React.createElement`vue 异步组件工厂模式 - 总结工厂模式介绍演示场景总结工厂模式 介绍概念工厂模式是我们最常用的实例化对象模式了,是用工厂方法代替new操作的一种模式。著名的 Jive 论坛 ,就大量使用了工厂模式,工厂模式在 Java 程序系统可以说是随处可见。因为工厂模式就相当于创建实例对象的new,我们经常要根据类Class生成实例对象,如A a=new原创 2020-09-02 14:59:55 · 606 阅读 · 0 评论 -
(五)单例模式
单例模式单例模式单例模式 介绍概念示例单例模式 演示单例模式 场景jQuery 只有一个 `$`登录其他单例模式 总结单例模式介绍演示场景总结单例模式 介绍概念单例模式,是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中,应用该模式的类一个类只有一个实例。即一个类只有一个对象实例示例按照面向对象的编程思想,任何东西都可以抽象为一个类,然后可以 new 出若干个对象。但是针对某些场景,只能存在唯一的对象系统登录框购物车这就产生了原创 2020-09-02 15:44:41 · 124 阅读 · 0 评论 -
(六)适配器模式
适配器模式适配器模式适配器模式 介绍概念示例适配器模式 演示适配器模式 场景适配器模式 总结适配器模式介绍演示场景总结适配器模式 介绍概念将一个类的接口适配成用户所期待的。一个适配允许通常因为接口不兼容而不能在一起工作的类工作在一起,做法是将类自己的接口包裹在一个已存在的类中。示例我们国家的电器使用普通的扁平两项或三项插头,而去外国的话,使用的标准就不一样了,比如德国,使用的是德国标准,是两项圆头的插头。怎样解决这个问题呢?只要使用一个电源转化器就行了。[外链图片转存失败,源站可能原创 2020-09-03 14:28:13 · 159 阅读 · 0 评论 -
(七)装饰器模式
装饰器模式装饰器模式装饰器模式 介绍概念示例装饰器模式 演示装饰器模式 场景ES7 装饰器装饰类装饰方法core-decorators装饰器模式 总结装饰器模式介绍演示场景总结装饰器模式 介绍概念装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为灵活。示例手机上套一个壳可以保护手机,壳上粘一个指原创 2020-09-03 14:41:39 · 131 阅读 · 0 评论 -
(八)代理模式
代理模式代理模式代理模式 介绍概念示例代理模式 演示代理模式 场景网页事件代理`$.proxy`ES6 Proxy代理模式 总结代理模式介绍演示场景总结代理模式 介绍概念为其他对象提供一种代理以控制对这个对象的访问。在直接访问对象时带来的问题,比如说:要访问的对象在远程的机器上。在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或者某些操作需要安全控制,或者需要进程外的访问),直接访问会给使用者或者系统结构带来很多麻烦,我们可以在访问此对象时加上一个对此对象的访问层。[外链原创 2020-09-03 14:51:58 · 186 阅读 · 0 评论 -
(九)外观模式
外观模式外观模式概念演示场景总结外观模式概念外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yHq3UTrh-1598951456467)(./img/1.jpg)]如去医院看病,可能要去挂号、门诊、划价、取药,让患者或患者家属觉得很复杂,如果有提供接待人员,只让接待人员来处理,就很方便。演示外观模式比较简单,很容易理解。传统的 UML原创 2020-09-03 14:56:30 · 136 阅读 · 0 评论 -
(十)观察者模式
观察者模式观察者模式观察者模式 介绍概念示例观察者模式 演示观察者模式 场景网页事件PromisejQuery callbacksnodejs 自定义事件nodejs streamnodejs 多进程通讯组件生命周期vue 响应式的实现一对多的关系观察者模式 总结观察者模式介绍演示场景总结观察者模式 介绍观察者模式是前端最常用、最重要的设计模式,如果让你只掌握一种设计模式,那肯定就是观察者模式!!!概念当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如原创 2020-09-03 16:50:09 · 281 阅读 · 0 评论 -
(十一)迭代器模式
迭代器模式迭代器模式迭代器模式 介绍概念示例迭代器模式 演示迭代器模式 场景jQuery eachES6 Iterator迭代器模式 总结迭代器模式介绍演示场景总结迭代器模式 介绍概念这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示。示例没有找到合适的例子,就以一个常用的 jQuery 为示例吧。<p>jquery each</p><p>jquery each</p><p>jquery each<原创 2020-09-03 18:03:42 · 178 阅读 · 0 评论 -
(十二)状态模式
状态模式状态模式状态模式 介绍概念示例状态模式 演示状态模式 场景有限状态机(finite state machine)实现一个简单的 Promise状态模式 总结状态模式介绍演示场景总结状态模式 介绍概念一个对象或者实例可能会有不同状态的变化(例如交通信号灯),如果仅用if...else去处理状态变化,扩展性非常差,特别是针对复杂的状态变化。状态模式就提出了一种处理复杂状态变化且扩展性好的设计思路。示例交通信号灯不同颜色的变化状态模式 演示传统的 UML 类图[外链图原创 2020-09-04 11:09:50 · 145 阅读 · 0 评论 -
(十三)其他设计模式
其他设计模式其他非常用设计模式原型模式桥接模式组合模式享元模式策略模式模板方法模式职责连模式命令模式备忘录模式访问者模式中介者模式解释器模式其他非常用设计模式可能不常用可能是找不到经典应用场景设计模式有:原型模式桥接模式组合模式享元模式策略模式模板方法模式职责连模式命令模式备忘录模式访问者模式中介者模式解释器模式原型模式基于一个对象创建一个重复的对象,重新new代价较大的情况下,就拷贝一份。具体实现就是自己实现一个 clone 自己的 API ,外部调用时克隆自己原创 2020-09-07 14:25:09 · 237 阅读 · 0 评论 -
(十四)综合应用
综合应用综合应用搭建开发环境演示项目功能画 UML 类图开始写代码准备工作入口文件App.jsShoppingCart.jsGetCart.jsList.jsItem.js状态管理模拟日志补充折扣功能综合应用使用 jQuery 做一个模拟购物的小 demo ,不用 vue 或 React 是因为它们封装了很多东西,使用封装的框架,就不容易分析设计模式。工厂模式:$(...),创建商品实例单例模式:购物车装饰器模式:log(点击按钮日志打点)代理模式:优惠商品打折:name 有“优惠”字样、pr原创 2020-09-07 15:37:26 · 427 阅读 · 0 评论