![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript设计模式
放逐的程序猿
背负着漫无放逐的罪恶,怀恋当时的感动
展开
-
JavaScript 设计模式之职责链模式
职责链模式定义了请求的传递方向通过多个对象对请求的传递,实现一个复杂的逻辑操作。因此职责链模式将负责的需求颗粒化逐一实现每个对象分内的需求,并将请求顺序地传递。对于职责链上的每一个对象来说,它都可能是请求的发起者也可能是请求的接收者。通过这样的方式原请求的发起者与原请求的接收者之间的耦合。命令模式我们不再需要关注每一个命令内部的实现,使用起来简洁明了,在许多的框架中也都有用到。原创 2024-03-02 23:20:49 · 567 阅读 · 0 评论 -
JavaScript 设计模式之策略模式
策略模式最主要的特色是创建一系列策略算法,每组算法处理的业务都是相同的,只是处理的过程或者处理的结果不一样,它们又是可以相互替换的,这样就解决了算法与使用者组算法相互之间的独立性,该模式更方便于对每组算法之间的耦合。第一,策略模式封装了一组代码簇,并且封装的代对于策略模式的优点可以归纳为码相互之间独立,便于对算法的重复用,提高了算法的复用率。原创 2024-02-23 10:53:12 · 639 阅读 · 0 评论 -
JavaScript 设计模式之状态模式
/ 比如有一种状态console.log('状态A')},console.log('状态B')},console.log('状态C')},console.log('执行了一次操作')return {状态A、B、C 是不同的状态,可能会有多种状态同时出现的情况,我们可以这样使用状态模式既是解决程序中臃肿的分支判断语句问题,将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次执行时遍历所有分支。原创 2024-02-22 16:50:48 · 661 阅读 · 0 评论 -
JavaScript 设计模式之观察者模式
解耦两个相互依赖的对象,使其侧重依赖于观察者的消息机制。这样对于任意一个订阅者对象来说,其他订阅者对象的改变不会影响到自身。对于每一个订阅者来说,其自与既可以是消息的发出者也可以是消息的执行者,这都依赖于调用观察者对象的三种方法(订消息,注销消息,发布消息)中的哪一种。观察者模式又被称为发布-订阅模式,使用一个对象来收集订阅者,在发布时遍历所有订阅者,然后将信息传递给订阅者,可以这样来实现一个简单的模式。通过观察者模式可以团队开发中模块间通讯问题。假使有一个学生跟老师的互动。原创 2024-02-22 10:06:49 · 890 阅读 · 0 评论 -
JavaScript 设计模式之组合模式
throw new Error('必须重写该方法')},throw new Error('必须重写该方法')},throw new Error('必须重写该方法')},throw new Error('必须重写该方法')接下来创建一个容器注意,这里的 show 方法就是用来将所有的 dom 追加到页面上下面创建一系列的 form 相关 item 及一些dom// 这里不需要添加,因为label后面直接跟输入框// 这里不需要添加,因为输入框后面直接跟标签。原创 2024-02-20 16:40:50 · 612 阅读 · 0 评论 -
JavaScript 设计模式之享元模式
将一部分共用的方法提取出来作为公用的模块享元模式的应用目的是为了提高程序的执行效率与系统的性能。因此在大型系统开发中应用是比较广泛的,有时可以发生质的改变。它可以避免程序中的数据重复。有时系统内存在大量对象,会造成大量存占用,所以应用享元模式来减少内存消耗是很有必要的。假使我们有如下的样式创建一个弹窗的基类基类主要用来实现一些常规的样式布局确认按钮位置在左/右使用效果模板方法的核心在于对方法的重用,它将核心方法封装在基类中,让子类继承基类的方法,实现基类方原创 2024-02-21 11:48:04 · 717 阅读 · 0 评论 -
JavaScript 设计模式之桥接模式
这里我们不难看出有部分代码是重复的,只是改变了字体颜色跟背景色,这耦合度就高起来了,我们可以是这样。通过桥接模式,我们可以将业务逻辑与元素的事件解耦,也可以更灵活的创建一些对象。通过桥接灵活的创建一个对象,针对不同的对象处理不同的业务逻辑,更灵活处理差异。在使用不同角色有相同公用的方法时可以使用这种多元化来处理。原创 2024-02-14 18:00:52 · 1108 阅读 · 0 评论 -
JavaScript 设计模式之代理模式
我们日常在使用数据请求时,也会用到一些代理的方式,比如在请求不同的域名,端口等会出现跨域的情况,这时就需要用到代理去获取对应的数据了,日常可能会用到 nginx 代理来获取,或者是 jsonp 的方式来获取。通常我们在团队中使用一些公用方法时会遇到这种情况,在不改变他人代码的情况下如何通用他人的代码呢,这就需要使用到我们常用到的装饰器模式了,他便能很好的解决这种问题。这种模式还是很好理解的,上面我们使用箭头函数,为了避免 this 指向问题,其实在团队协作中使用还是挺多的。原创 2024-02-14 17:14:30 · 918 阅读 · 0 评论 -
JavaScript 设计模式之外观模式
我们为啥要使用外观模式呢,其实我们在使用各种 js 库的时候常常会看到很多的外观者模式,也正是这些库的大量使用,所以使得兼容性更广泛,通过外观者模式来封装多个功能,简化底层操作方法。使用一个对象来接受一些多个参数,使用时进行结构等方式读取数据,这样就避免了多个参数导致数据传递错误问题了,其实在很多的框架中也常常看到这种,比如 Vue 中。这种例子也是非常的多,这样的好处就是方便后期扩展,对于后期堆加参数更有利。在我们写方法时,通常会传递参数的形式来传递数据。但是我们更应该这样来写。比如 jQuery 中。原创 2024-02-09 11:07:39 · 1000 阅读 · 0 评论 -
JavaScript 设计模式之单例模式
单例模式我们在日常使用中还是非常多的,比如常见的 jQuery,prototype,vue等都是属于单例模式,我们在使用 new Vue 的时候,返回的也会是同一个实例的,简单实现。这里我们只能使用 Car 中的 opt 定义的一些属性,这里我们定义了方法 set 来写操作,若不定义 set 就是我们说的静态了,只能读取了。所谓单例,就是在一个文件或是一个系统中只能存在一个实例或是一个对象,尽可能的将各个模块的代码梳理得井井有条,更为规范。我们在使用时,尽可能的将模块分明开来。原创 2024-02-07 21:27:33 · 1218 阅读 · 0 评论 -
JavaScript 设计模式之原型模式
上面的 Car 我们在使用每次使用的时候,其公用方法都会实例化一次,我们将一些耗资源的一些方法应该放置到 Car 的原型上。比如我们修改了基类 Car 的原型,所有的子类都会受到影响,所以在使用这种方式的时候是需要注意到这点。所谓原型,一般就类似将数据放置到原型上,通过原型继承模式来实现一个基类,然后用子类继承方式来实现。这里我们是用的基类原型,那就是说我们在用到的基类原型对于其子类都是共享的数据,比如。Car 将一些公用的属性或方法抽离出来,用 call 的方式进行调用。原创 2024-02-05 11:43:46 · 1067 阅读 · 0 评论 -
javascript设计模式之建造者
由此可以看出在构建者中,创建者不单单是在乎结果,更关注过程,构建的对象来说更为复杂,其实终究还是通过 Switch 来区分不同的工作种类,对于不同的职位进行不同的操作。不过针对工厂模式来说,构建者的确更明确一些。这里我们创建一个基类,其拥有技能跟爱好两个属性,还有两个实例方法用来获取技能跟爱好。工厂模式不关心过程,只关心结果,这与建造者相反,建造者更关心的是过程,接下来创建一个姓名类及工作类。原创 2024-02-03 18:30:31 · 614 阅读 · 0 评论 -
javascript 设计模式之简单工厂模式
抽象,也就是子类必须要重写父类中的方法才能调用,而不能直接调用父类中的抽象方法,这里面我们在定义工厂基类时使用寄生方式。对于有许多的不同功能的方法时,又想将其变得共用,这时候简单工厂模式就发挥了重大作用。这时,我们可以这样来改造下这个方法,使其变得安全。实际上只是将安全模式给添加到工厂模式中而已。首先,我们需要保证一个函数的安全,比如。原创 2024-01-29 17:43:01 · 668 阅读 · 0 评论