〇、小故事 小王是学校的学霸,凭借着自己的天赋以及对于学习的刻苦,每次考试都能排到年级第一名。但是,他所在的班级总成
原创 精选 2023-11-13 10:34:47
219阅读
〇、小故事 小王是学校的学霸,凭借着自己的天赋以及对于学习的刻苦,每次考试都能排到年级第一名。但是,他所在的班级总成绩却不高,在所有班级中,属于中游水平。老师希望通过小王的贡献,能否帮助整个班级同学分数都有一个提升。 老师跟小王提出了这个建议后,小王也很痛快就答应了。然后,利用周六和周日两天时间,将本周的一些重点和难点知识,以及他自己对于某些知识的理解小窍门都总结了出来,一共写了20多页的总结笔
原创 精选 2023-09-18 14:03:27
419阅读
前情 在前端开发越来越复杂的今天,越来越需要一些设计模式来提高开发质量和效率 定义 属于创建型模式,把对象的实现和创建相分离,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象。 代码演示 通过不同参数生成不同的对象返回 class Dog { construc ...
转载 2021-09-16 19:44:00
83阅读
2评论
设计模式 模式动机 在工厂方法模式中具体工厂负责生产具体的产品,每一个具体工厂对应一种具体产品,工厂方法也具有唯一性
前情 在前端开发越来越复杂的今天,越来越需要一些设计模式来提高开发质量和效率 定义 属于创建型模式,这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。 代码演示 通过静态属性实现单例 class Person{ static instance; constructor( ...
转载 2021-09-13 21:07:00
135阅读
2评论
代理模式:使用代理对象控制跟目标对象的交付。代理对象就像古装剧里皇帝上朝时边上站的太监,如果大臣有东西要交给皇帝就需要先把东西交给这个太监,有他转交给皇帝,这个时候太监对于大臣来说就是目标对象皇帝的代理对象。   在JavaScript中实现代理对象可以通过创建Proxy类实例,比如我们现在有个目标对象张三:const person = { name: "张三", ag
原创 2023-09-08 23:26:59
133阅读
将代码拆分成更小更易复用的代码块 JavaScript从ES2015开始支持模块化,一个文件就是一个模块,以前也可以把一个大的JS文件拆分到多个文件里,但容易出现定义的变量、函数名称冲突,文件多了依赖关系也不好管理,上线时觉得a.js文件没什么用就没发布,直到某个功能出现xxx is not a function或者类似的错误才恍然大悟。现在好了,在语法层次直接支持了模块,相当于新增了一
原创 2023-09-14 20:04:21
107阅读
Maxin Pattern: Add functionality to objects or classes without inheritance在不使用的继承的情况下为对象或者类添加功能在JavaScript中混合也是通过原型链实现的。比如有个Dog类:class Dog { constructor(name) { this.name = name; } }现在我们希
原创 2023-09-15 22:33:56
158阅读
周五晚上抽时间逛GitHub基本是常规例行操作,昨晚无意中看到一位GitHub大佬的设计模式学习笔记,一时间语塞,瞬间嘴角微...
转载 2021-07-15 10:35:46
196阅读
现在设计一个系统,目标为达到以下要求:
原创 2023-08-24 14:01:08
75阅读
8.9前端响应设计模式 什么是响应设计模式(Responsive Web Design) 响应式 web 设计会让您的网页在所有设备上看起来都不错 响应式 web 设计仅使用 HTML 和 CSS 响应式 web 设计并不是程序或 JavaScript 概括: 使用 CSS 和 HTML 调整大小 ...
转载 2021-08-11 19:11:00
72阅读
2评论
MPVC 是对 Model Partial-View Controller 的缩写(姑且这样称呼它)。 最近看到 MVVM  模式及司徒正美的 avalon 框架有一些新的想法。对于 MVVM 的不足有以下考虑:
原创 2023-08-24 14:02:26
145阅读
前情 在前端开发越来越复杂的今天,越来越需要一些设计模式来提高开发质量和效率 定义 属于行为型模式,当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知依赖它的对象。 代码演示 自定义事件监听器,注册一批方法,一次触发 let obj ...
转载 2021-09-25 11:05:00
86阅读
2评论
Prototype Pattern原型模式: 在多个对象间共享相同的属性  JavaScript原生支持原型链也是实现继承的基础, 如以下代码虽然是使用的ES2016新的语法classc创建的类Dog,然后又使用new实例化对象dog1、dog2、dog3,底层依然操作的原型链:class Dog { constructor(name) { this.name =
原创 2023-09-10 19:43:04
120阅读
Enforce separation of concerns by separating the view from the application logic通过将视图层和应用逻辑分离实现关注点分离 这个有点像Java应用开发中经常看到的MVC架构模式,实现数据、业务逻辑和展示层分离。这个模式在React中需要两个组件实现:容器组件主要负责获取数据,获取到数据后把数据交给视图组件,视图
原创 2023-09-11 19:47:21
103阅读
无论从实现还是从理论定义上看,单例模式都是最简单的模式,没有之一。单例模式顾名思义就是在整个应用中只存在一个对象实例。 使用这种模式一般为了全局共享资源和出于性能考虑减少过多创建实例带来的性能和资源开销。 全局共享资源:比如全局配置对象,在项目中我们经常用到一些需要全局共享的配置项,比如应用名称、Logo路径、上传文件路径等。减少性能开销:比如数据库链接池,链接池对象一般会使用
原创 2023-09-07 21:48:40
91阅读
23种设计模式+额外常用设计模式汇总 (持续...
转载 2020-05-06 01:47:00
59阅读
1、模块模式在立即执行函数表达式中定义的变量和方法,在该函数外部是访问不到的,只能通过该函数提供的接口,"有限制的"进行访问;通过函数的作用域,解决了属性和方法的封装问题。最常见的立即执行函数写法有以下两种: 模块模式代码: 2、构造函数模式 3、混合模式 4、工厂模式 5、单例模式 单例之间的通讯
转载 2019-02-17 13:24:00
52阅读
2评论
前端设计模式:提高代码可维护性和可扩展性的关键在前端开发中,随着项目规模的扩大和复杂性的增加,代码的可维护性和可扩展性成为了重要的问题。前端设计模式是一种解决这些问题的有效方法。本文将介绍前端设计模式的基本概念、目的和优点,并探讨几种常见的前端设计模式。一、前端设计模式概述前端设计模式是一种用于解决常见前端开发问题的可重复的解决方案。这些模式是经过实践验证的,可以提高代码的可维护性和可扩展性。前端
原创 2023-09-11 09:37:57
52阅读
为什么使用设计模式设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。什么是设计模式设计模式构成:模式名称:模式的名字环境和问题:描述在什么环境下出现什么特 girl
原创 2023-02-24 12:11:00
112阅读
  • 1
  • 2
  • 3
  • 4
  • 5