JavaScript面试系列:JavaScript设计模式之桥接模式和懒加载

简介: JavaScript面试系列:JavaScript设计模式之桥接模式和懒加载

image.pngimage.pngimage.pngimage.pngimage.pngimage.pngimage.pngimage.png

借助JavaScript的闭包特性,我们在第二行创建的自由变量(Free variable)只在闭包内部可见,外部消费者感知不到这个变量,因此成为存储mask div的最佳选择。看起来这个版本已经很完美了?不,它仍然有可以优化的空间,即题目提到的桥接模式。


版本4的缺点

从单一职责原理(Single Responsibility)来衡量版本4,createMask函数里实际包含了两种不同类型的逻辑:


1. 创建mask div


2. 使该mask div “单例化”


我们下面使用桥接模式将这两种逻辑分开,来实现最终版本。


使用桥接模式的实现版本5

这个实现包含了三个JavaScript函数。首先看singleton函数。


函数singleton的输入参数是另一个JavaScript函数(我称其为原始函数),输出是一个包装后的函数,其内部使用闭包,将原始函数第一次执行的结果保存在闭包内,当包装后的函数第二次执行时,直接返回闭包内保存的第一次执行结果。我们可以把singleton函数当成一个构造器,传入任意一个具有返回值的JavaScript函数,负责生产出具有“单例化”特性的新函数。

image.pngimage.png

目录
相关文章
|
19天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
1月前
|
设计模式
设计模式之桥接模式
设计模式之桥接模式
|
1月前
|
设计模式 Linux Windows
【设计模式】桥接模式
【设计模式】桥接模式
|
2月前
|
设计模式 Oracle Java
设计模式--- 桥接模式、JDBC 源码剖析(桥接)
设计模式--- 桥接模式、JDBC 源码剖析(桥接)
49 2
|
3天前
|
设计模式
【设计模式系列笔记】桥接模式
桥接模式(Bridge Pattern)是一种结构性设计模式,它将抽象部分与实现部分分离,使它们可以独立变化而互不影响。桥接模式通过组合而不是继承的方式来实现这种分离。
24 6
|
8天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
36 0
|
1月前
|
设计模式 JavaScript 前端开发
最常见的26个JavaScript面试题和答案
最常见的26个JavaScript面试题和答案
44 1
|
1月前
|
设计模式 缓存 JavaScript
js常用设计模式
js常用设计模式
20 1
|
1月前
|
存储 JavaScript 前端开发
【JavaScript】面试手撕浅拷贝
引入 浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。 PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的
45 6
|
1月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
53 3