
设计模式
设计模式记录
风清云淡_A
知识在于积累,成功在于坚持
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【js进阶】设计模式之单例模式的几种声明方式
单例模式,简言之就是一个类无论实例化多少次,最终都是同一个对象。原创 2025-01-15 17:26:04 · 502 阅读 · 0 评论 -
【js进阶】ES5原生JS中的几种继承方式
在 JavaScript 中,new 关键字主要用于创建一个对象实例,其具体执行的操作如下:创建一个空对象:首先,会创建一个空的简单 JavaScript 对象,这个对象会继承自构造函数的 prototype 属性。设置原型链:将新创建的对象的属性(在现代 JavaScript 中可以使用 Object.getPrototypeOf() 来访问)设置为构造函数的 prototype 属性,从而实现原型链的继承。原创 2025-01-15 16:28:20 · 283 阅读 · 0 评论 -
MVC、MVP和MVVM三种设计模式之间的区别是什么
在MVC中,View会直接从Model中读取数据而不是通过 Controller;View和 Controller之间存在多对一关系。在MVP中,View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部;View和Presenter之间是一对一关系。原创 2024-09-21 11:51:48 · 2246 阅读 · 0 评论 -
(四)js前端开发中设计模式之工厂方法模式
工厂方法模式,通过对产品类的抽象,使其创建业务主要用于负责创建多类产品的实例简单工厂模式,扩展的话需要改动两个地方,一个是工厂类,一个是具体产品类。原创 2024-07-21 11:23:35 · 391 阅读 · 0 评论 -
(四)js前端开发中设计模式之简单工厂模式
简单工厂模式,又叫静态工厂方法,由一个工厂对象决定创建出哪一种产品类的实例,主要用来创建同一类对象。原创 2024-07-21 09:42:06 · 499 阅读 · 0 评论 -
(三)js前端开发中设计模式之工厂模式
工厂模式是一种创建型设计模式,它可以帮助我们根据需求创建对象。原创 2024-07-17 14:19:40 · 430 阅读 · 0 评论 -
(二)js前端开发中设计模式之单例模式
保证一个类仅有一个实例,并提供一个访问它的全局访问点。基本的单例模式,就是对象字面量。原创 2024-07-17 11:44:30 · 670 阅读 · 2 评论 -
(一)js前端开发中设计模式前篇之对象
改进版与基础版要分开测试,不然会互相影响到。原创 2024-07-17 10:54:40 · 378 阅读 · 0 评论 -
js设计模式5-观察者模式(发布-订阅)
发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。1、原生DOM事件的订阅发布者模式。 window.onload = function () { //body订阅/观察了一个‘点击’事件 document.documentElement.addEventListener('cli...原创 2019-07-16 17:22:51 · 273 阅读 · 0 评论 -
高级程序设计开发笔记4(单例模式入门到理解运用)
在vue,react的横行的时代,单例模式估计知道的人不多了,但是作为一个要成为高级高开的前端er,必须知道的单例模式这几点什么是单例模式单例模式是保证一个class类只有一个实例并提供一个访问它的全局访问点//版本1 var SingleTon = function (name) { this.name = name this.instance = null } SingleTon.proto原创 2021-09-05 16:41:36 · 181 阅读 · 0 评论 -
原生js用MVVM的思想实现简易滑动条
接上一节进度条的demo,这节实现的是滑动条div { margin-bottom: 10px; height: 40px; } .third, .first, .second { background: green; margin-top: 30px; position: relative; }原创 2021-11-08 00:47:52 · 166 阅读 · 0 评论 -
原生js中的代理模式的学习笔记
代理模式比较简单,主要的核心代码记录一下 ul { margin-bottom: 10px; overflow: hidden; width: 200px; } li { list-style: none; float: left; width: 20px; height: 20px;原创 2021-11-08 23:03:52 · 528 阅读 · 0 评论 -
js设计模式4-享元模式
享元模式,结构型设计模式之一,运用共享内部状态/外部状态来减少创建对象的数量,从而减少内存占用、提高性能。享元模式可以避免大量非常相似类的开销,在程序设计中,有时需要生产大量细粒度的类实例来表示数据,把那些参数移动到类实例的外面,在方法调用的时候将他们传递进来,就可以通过共享大幅度第减少单个实例的数目。使用场景:第一种是应用在数据层上,主要是应用在内存里大量相似的对象上;第二种...原创 2019-07-03 11:40:14 · 164 阅读 · 0 评论 -
js设计模式之命令模式的一点整理记录
命令模式简单点说就是发送命令请求的不知道接收命令请求的是谁,也不知道接收请求的人会做什么!下面就拿个实例来分析分析:工程师1任务只需负责在页面上绘制3个按钮,这三个按钮负责什么功能他不关心!工程师2的任务是在按钮上赋予想要执行的业务功能,点击执行操作!此时工程师1只需要封装一个公用的操作方法,按钮和事件进行关联!其余的就交给工程师2去处理了,这样就实现了代码设计的松耦合!工程师2继续进行业务开发,按钮任务规划,假如说button1实现刷新,button2新增,button3删除功能,进行如下原创 2021-07-18 12:12:57 · 141 阅读 · 2 评论 -
原生js中的继承方式,研究记录
<script> var Book = function (id, bookName, price) { this.id = id this.bookName = bookName this.price = price } // 为类的原型对象赋值 Book.prototype.display = function () { } // 或者 二选原创 2021-11-07 19:59:57 · 121 阅读 · 0 评论 -
vue2.x框架里面的事件总线eventBus的原理解析
emit,$off事件了,从而就可以进行组件特别是兄弟组件之间的数据传递了!今天我们不讲怎么使用这个,主要记录下怎么实现这个总线的原理!态发生改变时,所有依赖于它的对象都将得到通知。发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状。今天的总结就到此结束,有不足的地方可以提出大家互相学习~~~vuejs2.x里面的事件总线大家因该都会用了。上面还没有取消订阅的方法,我们再改进下。上面的方法不能传递参数,我们再改进下。然后我们就就可以获取到实例上的。来替代传统的发布—订阅模式。.原创 2022-07-23 10:30:27 · 656 阅读 · 0 评论 -
原生js/jq封装的一款阅卷系统的切图插件
工具的目的是,在模拟在canvas上面画图制作。主要是学校的在线阅卷,对试题进行切割,获取到所选的坐标点,长宽的数据,框选的部分导出为图片,传递给后台,进行数据文本的识别,自动填充等业务需要待续…...原创 2021-11-19 00:58:28 · 856 阅读 · 0 评论 -
原生js中的链模式学习笔记
这篇是在学原生js的链模式的笔记,思想借鉴的是jq,主要的笔记记录如下 <div id="demo"></div> <div id="test"></div> <script> var A = function () { } A.prototype = { length: 2, size() { return th原创 2021-11-08 22:18:07 · 342 阅读 · 0 评论 -
高级程序设计开发笔记3(必须懂的闭包和高阶函数)
闭包的形成与变量的作用域和变量的生命周期有关var func = function () { var a = 1; console.log(a);};func(); //1console.log(a); //ReferenceError: a is not defined作用域的面试题var func1 = function () { var b = 2; var func2 = function () { var c = 3; console.log(b)原创 2021-09-05 00:48:51 · 232 阅读 · 0 评论 -
高级程序设计开发笔记2(this,call,apply)
在js中,掌握了this的理解,就算成功了一半。<div id="div1">我是一个div1</div>window.id = 'window'document.getElementById('div1').onclick = function () { alert(this.id) //div1 //var that = this //指向了div1 var callback = function () { alert(th原创 2021-08-31 23:54:35 · 129 阅读 · 0 评论 -
高级程序开发设计笔记1(原型模式的初步了解)
鸭子类型的实现var duck = { duckSinging() { console.log("gagaga"); },};var chicken = { duckSinging() { console.log("gagaga"); //只关注对象行为,不关注本身 },};var chior = [];var joinChior = function (animal) { if (animal && typeof animal.duckS原创 2021-08-30 23:55:57 · 152 阅读 · 0 评论 -
javascript 设计模式之装饰者模式整理的一点记录
我所理解的装饰者模式,在不破坏原有函数或方法的内部结构下,并能增强原有函数或方法!js作为解释执行的语言,动态的改变对象的方法来新增功能是比较常见的,比如var obj = { name:'gaofeng', address:"广州市"}obj.address = obj.address +"天河区"console.log(obj.address) //广州市天河区上面就是我们最原始的增强对象方法的功能的操作假如说我们用js的构造函数来实现的话var Plane = funct原创 2021-07-14 00:19:03 · 112 阅读 · 0 评论 -
js设计模式4-策略模式
策略模式是指定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。策略模式通俗点就是业务选择逻辑的优化封装,if/else,switch...case的高级应用function calculatorBonus (level, salary) { if (level == 'A') { return salary * 4 } if (level == 'B...原创 2019-07-16 15:55:30 · 268 阅读 · 0 评论 -
js设计模式3-抽象工厂模式
这里要多实现一个超级工厂,常见不同的工厂,然后再创建实体,相比工厂模式,继承上要多了一个抽象类的继承class Football { round () { console.log('我是脚踢的') }}class Basketball { round () { console.log("我是手打的") }}class Bycle { round...原创 2019-07-02 16:35:38 · 169 阅读 · 0 评论 -
js设计模式2-工厂模式
工厂模式是为了创建对象,实质是“定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。”简单来说:就是把new对象的操作包裹一层,对外提供一个可以根据不同参数创建不同对象的函数。实现方式一:function CarMaker () { }CarMaker.prototype.drive = function () { ret...原创 2019-07-02 16:02:18 · 137 阅读 · 0 评论 -
js设计模式1-单例模式
js设计模式-单例模式1 概念: 一个类只能实例一次,它的实现有且只能有一次2 单例模式用途 最常见的是链接数据库就是单例,所以的实例化只实现一次i,达到降低开销的目的。3 实现实现方式一:const SingleTon = function (name) { this.name = name}SingleTon.getInst...原创 2019-07-02 15:34:27 · 170 阅读 · 0 评论