前端面试题-如何用Javascript写出常见的设计模式?

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

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

Javascript设计模式

单例模式

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

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

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


策略模式

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

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

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

javascript学习群:453833554


代理模式

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

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

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

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


装饰者模式

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

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

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

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

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

javascript学习群:453833554

before和after行为

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

装饰器调用

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

结束语

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

javascript学习群:453833554

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,649评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,621评论 18 399
  • 设计模式汇总 一、基础知识 1. 设计模式概述 定义:设计模式(Design Pattern)是一套被反复使用、多...
    MinoyJet阅读 3,937评论 1 15
  • 从三月份找实习到现在,面了一些公司,挂了不少,但最终还是拿到小米、百度、阿里、京东、新浪、CVTE、乐视家的研发岗...
    时芥蓝阅读 42,235评论 11 349
  • 友聚户外俱乐部:9月16号---17号美岱召农家院、七彩大地游花海,赏美景,休闲度假俩日游,晚上我们住在蒙古包吃正...
    友聚户外阅读 652评论 0 0