Processing math: 100%

外观/门面模式(Facade)

Facade Pattern 国内有些书译为门面模式,如「Java与模式」,「JavaScript设计模式」。有些则译为外观模式,如「设计模式:可复用面向对象软件的基础」,「Java设计模式」。这里使用名词“外观模式”。

 

外观模式属于接口型模式,它提供一个更方便,高层接口,使用一致性的界面使得API更加容易使用。它有两个作用:

  1. 简化复杂接口
  2. 解耦和,屏蔽客户端对子系统的直接访问

 

外观模式在JavaScript中被众多类库频繁使用。由于早期各浏览器提供的API差异性较大,类库的基本作用之一是扫平这些凹凸不平,提供统一接口供前端工程师使用。使用外观模式,我们可以间接地与一个复杂子系统打交道,与直接访问相比耦合性更低,更不易出错。

 

比如添加事件标准浏览器使用addEventListener,旧版本IE使用attachEvent,可能自己需要封装一个addEvent函数,这个addEvent函数就是一个门面。

1
2
3
4
5
6
7
8
9
function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false)
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, fn)
    } else {
        el['on' + type] = fn
    }
}

实际就是将两个不同的函数放到自己定义的函数里,之后使用该函数完成特定功能而不再使用有差异性的函数。

 

又如处理DOM事件时,有时会同时使用以下方法

1
2
e.stopPropagation()
e.preventDefault()

可以使用外观模式创建一个新方法stop同时调用这两个方法

1
2
3
4
function stop(e) {
    e.stopPropagation()
    e.preventDefault()  
}

 

jQuery中大量使用外观模式,比如数据缓存模块,内部internalData,internalRemoveData是低级API,实现核心功能,外部提供了data,removeData这两个高级API供客户端程序员使用。

事件模块也是如此,内部有jQuery.event.add,jQuery.event.remove,jQuery.event.trigger等低级API,向外提供了on/bind,off/unbind,trigger等高级API,甚至再利用on又提供了.click/.dblclick/mouseover/mousedown等更快捷的添加事件API。

Ajax模块也是外观模式的典型例子,jQuery提供了一个基本的,低级接口.ajax.ajax产生了一些便利函数.get,.post。再通过封装.get.getJSON,$.getScript等更高级的方法。

 

jQuery里的事件模块和Ajax模块可以说是外观模式在JS中的经典应用。

 

适用场合

对于那些反复同时出现的代码,如函数a和b多次同时出现在代码中,应考虑将a,b组合起来放到一个新函数中。

 

之利

简化了一些复杂接口(如.ajax,.event.add),清除不再需要的大对象以及提供一种更加单一,便利的方式展现接口功能。编写一次组合代码,就可以反复使用它,节省了代码量,时间和精力。它还提供了较高层的功能,抽象,降低客户端代码对底层接口的耦合。如.getJSON.ajax方法也可以得到相同的效果。但每次都需要配置相同的参数,如果获取JSON的需求很频繁,页面中的相同的代码就需要写很多次。而封装一次$.getJSON,之后就少写很多代码,且该方法更直观。

 

之弊

外观模式并非必不可少,同样的功能不使用它也能完成功能。如不使用.getJSON.ajax方法也可以得到相同的效果。此外由于增加了一层闭包,性能会有一定降低。

 

posted on   snandy  阅读(2993)  评论(1编辑  收藏  举报

编辑推荐:
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· mysql8.0无备份通过idb文件恢复数据过程、idb文件修复和tablespace id不一致处
· 使用 Dify + LLM 构建精确任务处理应用
< 2012年12月 >
25 26 27 28 29 30 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示