我写的程序员面试系列文章
Java面试系列-webapp文件夹和WebContent文件夹的区别?
程序员面试系列:Spring MVC能响应HTTP请求的原因?
Java程序员面试系列-什么是Java Marker Interface(标记接口)
设计模式(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。
相关推荐
深入理解JavaScript系列(44):设计模式之桥接模式 深入理解JavaScript系列(45):代码复用模式(避免篇) 深入理解JavaScript系列(46):代码复用模式(推荐篇) 深入理解JavaScript系列(47):对象创建模式...
深入理解JavaScript系列(44):设计模式之桥接模式 深入理解JavaScript系列(45):代码复用模式(避免篇) 深入理解JavaScript系列(46):代码复用模式(推荐篇) 深入理解JavaScript系列(47):对象创建模式...
主要介绍了深入理解JavaScript系列(44):设计模式之桥接模式详解,桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化,需要的朋友可以参考下
详解JavaScript设计模式开发中的桥接模式用法_.docx
《JavaScript设计模式》共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识...《JavaScript设计模式》适合各层次的Web前端开发人员阅读和参考,也适合有C++/Java/C#背景的服务器端程序员学习。
该文档是根据博客园汤姆大叔的深入理解JavaScript系列...44.设计模式之桥接模式 45.代码复用模式(避免篇) 46.代码复用模式(推荐篇) 47.对象创建模式(上篇) 48.对象创建模式(下篇)
主要介绍了javascript设计模式 – 桥接模式,结合实例形式分析了javascript桥接模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
桥接模式最常见和实际的应用场合之一是事件监听器回调函数。 example:事件监听器,把事件处理的语句封装到回调函数中,通过接口而不是实现进行编程。 基本理论 桥接模式定义:将抽象部分与它的实现部分分离,使它们...
JavaScript 设计模式精讲,JavaScript 设计模式精讲,JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript ...
24种设计模式的入门,整合7种开发语言的代码示例。 (C#、JAVA、JavaScript、C++、Python、Go、PHP) 第一节 设计模式:学习顺序 第二节 简单工厂模式 第三节 工厂方法模式 第四节 抽象工厂模式 第五节 单例模式 第...
第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。为了让每一章中的示例都尽可能地贴近实际应用,书中同时列举了一些...
DbHelperV2 - Teddy的通用数据库访问组件设计和思考 也论该不该在项目中使用存储过程代替SQL语句 如何使数据库中的表更有弹性,更易于扩展 存储过程——天使还是魔鬼 如何获取MSSQLServer,Oracel,Access中的数据字典...
桥接(Bridged 2022-开源协作式实时ui编辑器) 一个明确为服务应用程序设计/开发而设计的开源wasm应用程序 开发者优先 插件sdk和核心引擎api映射为1:1 正确生产代码 此应用程序正在开发中,将于2022年初在稳定的...
使用的设计模式 会话管理的外观模式 用于创建图层的工厂模式 用于将抽象与实现分离的桥接模式 适配器模式,用于将工作委派给现有代码并为接口提供实现 设计原理 坚硬的 S->关注点分离或单一责任原则 O->开闭原理 L->...
使用的设计模式 会话管理的外观模式 用于创建图层的工厂模式 用于将抽象与实现分离的桥接模式 适配器模式,用于将工作委派给现有代码并为接口提供实现 设计原理 坚硬的 S->关注点分离或单一责任原则 O->开闭原理 L->...
期末考试-软件设计与构建-2018-1学期-UNMSM-UPG-FISI 您选择的面向对象编程语言和框架中的代码 将添加为github上存储库的贡献者。 问题1(2.5分) 应用适配器类和对象模式。 问题2(2.5分) 应用策略模式。 问题3...