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

我写的程序员面试系列文章

Java面试系列-webapp文件夹和WebContent文件夹的区别?

程序员面试系列:Spring MVC能响应HTTP请求的原因?

Java程序员面试系列-什么是Java Marker Interface(标记接口)

使用JDK自带的工具jstack找出造成运行程序死锁的原因

编程面试题:编写一个会造成数据库死锁的应用

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

设计模式(Design Pattern)中的桥接模式,有的朋友平时工作可能很少用到。桥接模式的核心在于将抽象部分和它的实现部分分离,使它们都可以独立的变化。听起来很抽象,让我们看一个具体而简单的例子,通过这个例子一步步的完善来加深对桥接模式的理解。

很多论坛点登录按钮时,

周围背景都会暗下来,这样可以突出即将弹出的登录框,让用户把精力集中在用户名和密码的输入上去。

很多论坛对于这种背景变暗的UI实现,是创建了一个HTML原生的div元素,加上一些精心设计过背景颜色的CSS样式来完成的。

我们下面称这种div元素为遮罩层div元素,即mask div。

下面讨论创建mask div的最优解。

实现版本1

创建一个createMask函数,作为登录按钮的事件响应函数。每次点击按钮之后执行该函数。

var createMask = function(){

      return document.body.appendChild( document. createElement('div') );

}

$(‘#logon_button').click(function(){

    var mask = createMask();

    mask.show();

})

版本1的缺点

每次点击按钮都会创建一个mask div。当然一般情况下登录按钮只会点击一次。但是在面试场景中,面试官可能会把这个问题的讨论引导到其他方向上。如何实现即使多次点击按钮,也只会创建一次mask div?于是就有了版本2。

实现版本2

事先创建好一个mask div,放到一个全局变量里保存。这种方式有点像单例模式(singleton)的饿汉式单例。

var mask = document.body.appendChild(document.createElement('div' ) );

$( '#logon_button').click(function(){

     mask.show();

})

版本2的缺点

版本2采用了一个全局变量保存事先创建好的mask div。还记得那句话么?全局变量是万恶之源。

另外,假设用户永远不点登录按钮,只是以游客身份浏览网站,那么这个mask div就白白创建了。

实现版本3

var mask;

var createMask = function(){

  if(mask)

        return mask;

  else{

        mask = document,body.appendChild( document.createElement('div') );

return mask;

}

}

版本3的缺点

虽然使用了饱汉式单例模式,避免了mask div在没有点击登录按钮的情况下不必要的创建,但还是使用了全局变量来存放mask div。要记住我们现在是在用JavaScript,因此可以用它提供的强大的闭包特性(closure)来实现不需要全局变量的饱汉式单例模式。

实现版本4

var createMask = function() {

   var mask;

   return function() {

       return mask || ( mask = document.body.appendChild(document.createElement('div')));

}

}();

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

版本4的缺点

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

1. 创建mask div

2. 使该mask div “单例化”

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

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

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

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

var singleton = function(fn){

   var result;

   return function() {

        return result || ( result = fn.apply(this,arguments));

   }

}

var origin = function(){

      return document.body.appendChild(document.createElement('div'));

};

var createMask = singleton(origin);

然后我们调用这个singleton函数,把我们原始的创建mask div的函数origin作为参数传进去,得到加工后的新函数createMask。

这个例子体现了桥接模式的作用。我们通过singleton这个单例化构造器函数,成功将业务逻辑(创建mask div)和单例化这个纯技术需求分离开,这样也满足了单一职责(single responsibility)的设计理念。

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

BeautifulSoup解析库select方法实例——获取企业信息

本文内容由浙江浦江中学方春林老师提供。 Requests 是用Python语言编写,基于urllib,采用Apache2 Licensed 开源协议的 HTTP...

3345
来自专栏Golang语言社区

说说JSON和JSONP,也许你会豁然开朗-转

今天在写底层通信框架的时候,遇到了跨域的问题;随便给不知道的童鞋们分享下基础知识。 前言   由于Sencha Touch 2这种开发模式的特性,基本...

4086
来自专栏守候书阁

重构 - 设计API的扩展机制

上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景--给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。当...

1242
来自专栏JetpropelledSnake

RESTful源码笔记之RESTful Framework的APIview, Viewset总结分析

官方文档:http://www.django-rest-framework.org/ drf为我们提供强大的通用view的功能,本博客对这些view进行简要的总...

1601
来自专栏程序员同行者

django rest framework通用view

官方文档:http://www.django-rest-framework.org/ drf为我们提供强大的通用view的功能,本博客对这些view进行简要的...

1072
来自专栏IMWeb前端团队

【原译】javascript中的错误处理

本文作者:IMWeb ouven 原文出处:IMWeb社区 未经同意,禁止转载 【原译】javascript中的正确错误处理 A Guide to P...

2469
来自专栏更流畅、简洁的软件开发方式

【自然框架】——页面基类与设计模式(一)桥接模式(11.14补充了一段对桥接模式的理解)

【自然框架】 页面里的父类—— (补充) 【自然框架】 页面里的父类——把共用的东东都交给父类,让子类专注于其他。 =================== ...

2307
来自专栏逸鹏说道

Python3 与 C# 扩展之~模块专栏

代码裤子:https://github.com/lotapp/BaseCode/tree/maste

1925
来自专栏夏时

从零开始,学会 PHP 采集

2873
来自专栏jianhuicode

上手React Native--常用属性介绍

这几天打算学习并实践ReactNative,学习记录中有不对的地方请大家指出来,互相交流。(-_-)   关于学习ReactNative需要准备的基础知识,①...

2577

扫码关注云+社区

领取腾讯云代金券