专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

几种常见的Javascript设计模式,面试官让你写你会吗?

ins518 2024-09-11 09:27:11 技术文章 21 ℃ 0 评论

前言

设计模式是一种理念,官方对它的定义是这样的:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。

因此设计模式不针对某种特定的语言,在C++,Java中都有不同设计模式的实现,同样在Javascript中也有其对应的实现,今天我们就一起来看看Javascript中是如何实现的。

Javascript设计模式

单例模式

单例模式,顾名思义就是保证每个类都只有一个实例对象。

其实现思路很简单,先判断实例是否存在,如果不存在则创建新的实例返回,如果存在则直接返回该实例。

在下面的代码中,我们借助代理来具体实现。

单例模式

策略模式

策略模式可以理解为:封装多个可以相互替换的算法,独立于具体的对象,即对象和行为分离的原则。

一个具体的策略模式实现需要两个部分,一个是所有可能的策略对象,另一个是具体的执行环境,在执行环境中判断客户的要求委托给哪个策略执行。

具体的代码实现如下所示。

策略模式

代理模式

代理模式可以理解为:为其他对象提供一种代理以控制对这个对象的访问。

在某些情况下,某个对象不适合被直接访问到,则可以通过代理对象作为客户端和目标对象之间的中介。

代理模式在前端有一个很好的使用场景-图片懒加载。在真正的图片还没有下载时,先通过一张loading图来显示,然后等到具体的图片下载完成之后再修改img的src属性。

以下是一个通过代理模式完成图片懒加载的方法。

代理模式

装饰者模式

装饰者模式可以理解为:动态的将职责附加到对象上,而且不会改变对象本身的行为。

我们可以举一个'齐天大圣'的例子,例如齐天大上本身是一只猴子,可以看做是被装饰者;而一旦它具有七十二变的本领时,可以变化为其他七十二种角色,这就是装饰器所做的事情。

一般装饰器会在被装饰者之前或者之后加上自己的行为以达到特定的目的,例如Spring框架中的AOP模式。

接下来,我们通过一段代码看下装饰模式的Javascript实现。

先定义一个before和after的行为。

before和after行为

然后设置几个具体的表现形式,通过装饰器调用。

装饰器调用

以上就是一个完整使用装饰器模式的Javascript实现例子。

结束语

今天这篇文章简单的介绍了下Javascript中的几种常见的设计模式,当然不只有这几种,后续我们会继续探讨其他设计模式的Javascript实现。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表