![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
设计模式(JavaScript)
文章平均质量分 79
前端实用的常用设计模式
白柴-
汪汪汪~
展开
-
【13】总结前端常用设计模式
原创 2023-04-19 10:13:54 · 73 阅读 · 0 评论 -
【12】设计模式实战演练
分析:数据模型,属性和方法,关系UML 类图代码演示题目信息分析UML 类图代码演示面试题 - 模拟打车面试题 - 模拟停车场。原创 2023-04-19 10:13:35 · 84 阅读 · 0 评论 -
【11】其他模式
我们需要一个对象的 API 提供能力,但它的格式不一定完全适合我们的格式要求。这就要转换一下。例如电脑、手机的电源适配器MVCMVVMPS:先了解概念,再去实战,先“文”而后“化”职责链模式策略模式适配器模式MVC 和 MVVM。原创 2023-04-19 10:13:09 · 66 阅读 · 0 评论 -
【10】代理模式
为其他对象提供一种代理以控制对这个对象的访问。在直接访问对象时带来的问题,比如说:要访问的对象在远程的机器上。在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或者某些操作需要安全控制,或者需要进程外的访问),直接访问会给使用者或者系统结构带来很多麻烦,我们可以在访问此对象时加上一个对此对象的访问层。例如,你通过房产中介买房子,中介就是一个代理。你接触到的是中介这个代理,而非真正的房主。再例如,明星都有经纪人,某活动想请明星演出,需要对接经纪人。艺术家不方便谈钱,但可以和经纪人谈。原创 2023-04-18 09:45:42 · 27 阅读 · 0 评论 -
【09】装饰器模式
装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为灵活。例如,手机上套一个壳可以保护手机,壳上粘一个指环,可以挂在手指上不容易滑落,这就是一种装饰。手机还是那个手机,手机的功能一点都没变,只是在手机的外面装饰了一些其他附加的功能。日常生活中,这样的例子非常多。原创 2023-04-18 09:45:25 · 37 阅读 · 0 评论 -
【08】原型模式
定义:用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或相似的新对象传统的原型模式就是克隆,但这在 JS 中并不常用。JS 中并不常用原型模式,但 JS 对象本身就是基于原型的,原型和原型链是非常重要的概念。函数或 class 都有 prototype对象都有__proto__指向构造函数 prototype原型链(图)PS:原型和原型链的范围非常广泛,遇到新问题可以在课程里提问。获取属性描述符 Object.getOwnPropertyDescriptor。原创 2023-04-18 09:44:52 · 29 阅读 · 0 评论 -
【07】迭代器模式
用于顺序访问集合对象的元素,不需要知道集合对象的底层表示。return {有序结构Symbol.iterator 生成迭代器迭代器的应用基本使用yield* 语法遍历 DOM 树概念介绍 + 解决的问题UML 类图和代码演示场景 Symbol.iterator 和 Generator。原创 2023-04-18 09:44:19 · 35 阅读 · 0 评论 -
【06】观察者模式
观察者模式是前端最常用的一个设计模式,也是 UI 编程最重要的思想。DOM 事件组件生命周期Vue 组件更新过程异步回调注意,这里没有自定义事件,这个会在“发布订阅模式”讲解。Vue2 实例本身就支持自定义事件,但 Vue3 不再支持。Vue3 推荐使用 mitt ,轻量级 200 bytes ,文档 https://github.com/developit/mitt。原创 2023-04-18 09:43:40 · 65 阅读 · 0 评论 -
【05】单例模式
单例模式,即对一个 class 只能创建一个实例,即便调用多次。概念介绍 + 解决的问题UML 类图和代码演示应用场景。原创 2023-04-18 09:43:03 · 33 阅读 · 0 评论 -
【04】工厂模式
创建对象的一种方式。不用每次都亲自创建对象,而是通过一个既定的“工厂”来生产对象。工厂模式在前端 JS 中应用非常广泛,随处可见jQueryVueReact日常项目开发中,遇到new class的场景,要考虑是否可用工厂模式。原创 2023-04-18 09:41:55 · 110 阅读 · 0 评论 -
【03】设计原则
SOLID 五大设计原则重点理解前两个 S 和 O从设计到模式23 种设计模式前端常用设计模式(图文)原创 2023-04-18 09:41:17 · 39 阅读 · 0 评论 -
【02】面向对象和UML类图
TS 是 JS 的超级 Super-Set ,即包含 JS 所有能力,然后再有自己自己的能力 —— 静态类型。PS:大型系统的量大研发保障:1. 静态类型;2. 自动化测试;注意,TS 类型的知识点非常多,先介绍常用的,其他的遇到再说。基础类型不能满足,就自定义面向对象编程,Object-Oriented-Program(简称 OOP)是一种目前主流的编程思想。已有几十年的历史,1990 年代开始,和 Java 一起开始发展壮大。编程本来是抽象的,像做数学题一样。原创 2023-04-18 09:40:30 · 125 阅读 · 0 评论 -
【01】设计模式导学
祝早日精通设计模式,早日突破技术瓶颈。原创 2023-04-18 09:39:39 · 45 阅读 · 0 评论