Ajax外观/门面方式(Facade)

Facade Pattern
国内有个别书译为门面形式,如「Java与格局」,「JavaScript设计情势」。有个别则译为外观情势,如「设计格局:可复用面向对象软件的根底」,「Java设计情势」。那里运用名词“外观格局”。

 

外观形式属于接口型形式,它提供2个更有利于,高层接口,使用一致性的界面使得API尤其便于选拔。它有八个成效:

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

 

外观形式在JavaScript中被很多类库频仍使用。由于中期各浏览器提供的API差别性较大,类库的为主职能之一是扫平那个凹凸不平,提供联合接口供前端工程师使用。使用外观情势,大家能够直接地与三个复杂子系统打交道,与一直访问比较耦合性更低,更科学出错。

 

譬如添加风浪标准浏览器选择add伊夫ntListener,旧版本IE使用attach伊夫nt,大概本人要求封装2个add伊芙nt函数,那几个add伊夫nt函数正是七个外衣。

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事件时,有时会同时接纳以下措施

e.stopPropagation()
e.preventDefault()

能够利用外观格局创建二个新点子stop同时调用那四个法子

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提供了1个基本的,低级接口$.ajax方法,通过包装$.ajax发生了有些惠及函数$.get,
$.post。再通过包装$.get又生出了$.getJSON,$.getScript等更尖端的不二法门。

 

jQuery里的风云模块和Ajax模块能够说是外观格局在JS中的经典应用。

 

适用地方

对此这几个频仍同时出现的代码,如函数a和b数次并且出现在代码中,应考虑将a,b组合起来放到二个新函数中。

 

之利

简化了部分复杂接口(如$.ajax,
$.event.add),清除不再须要的大目的以及提供一种特别纯粹,便利的方法表现接口功能。编写3次组合代码,就足以频仍使用它,节省了代码量,时间和精力。它还提供了较高层的效应,抽象,降低客户端代码对底层接口的耦合。如$.getJSON,通过$.ajax方法也能够获取一致的法力。但每一趟都急需布置相同的参数,如若得到JSON的急需很频仍,页面中的相同的代码就供给写很频仍。而卷入一次$.getJSON,之后就少写过多代码,且该措施更直观。

 

之弊

外观形式并非必不可少,同样的作用不选择它也能不负众望功效。如不使用$.getJSON,通过$.ajax方法也能够赢得相同的效益。此外由于扩张了一层闭包,品质会有必然降低。

 

相关文章