Facade模式为许多代码提供一个方便的接口,不现实代码实现的复杂性,这样,使用者只需要关心他的使用接口就可以使用。

下面来看一段Facade模式的运用,绑定事件在浏览器之间是不一样的,利用Facade模式,我们创建了一个绑定事件的函数addMyEvent,在其中,我们写了一些代码,我们判断了是否支持addEventListener,是怎么样,不是怎么样……但这些都不相关,对于其他开发者而言,他只需要,addMyEvent可以兼容浏览器绑定事件。

var addMyEvent = function( el,ev,fn ){

   if( el.addEventListener ){
el.addEventListener( ev,fn, false );
}else if(el.attachEvent){
el.attachEvent( "on" + ev, fn );
} else{
el["on" + ev] = fn;
} };

jQuery大量使用了Facade模式,无论是选择元素,或是修改CSS

下面看一段jQuery内部bindReady的实现,和我们上面的例子有些相似,判断不同事件绑定的支持,经过一些代码操作实现兼容的功能函数.然而对于其他的使用者而言,我们只需要知道bindReady可以判断DOM加载完成,就可以使用,这个bindReady就是外观。

bindReady: function() {
...
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work
window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used
} else if ( document.attachEvent ) { document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work
window.attachEvent( "onload", jQuery.ready );
...

javascript模式——Facade的更多相关文章

  1. 《JavaScript 模式》知识点小抄本(下)

    介绍 最近开始给自己每周订个学习任务,学习结果反馈为一篇文章的输出,做好学习记录. 这一周(02.25-03.03)我定的目标是<JavaScript 模式>的第七章学习一遍,学习结果的反 ...

  2. javascript 模式(1)——代码复用

    程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合.本节将会讲解多种继承模式以实 ...

  3. 说说设计模式~门面模式(Facade)

    返回目录 门面模式(Facade)属于结构型模式的一种,它符合面向对象的封装原则,但又不符合开闭原则,呵呵,今天我们主要说它的优点,不谈缺点. 定义 门面模式,是指提供一个统一的接口去访问多个子系统的 ...

  4. 【读书笔记】读《JavaScript模式》 - 函数复用模式之现代继承模式

    现代继承模式可表述为:其他任何不需要以类的方式考虑得模式. 现代继承方式#1 —— 原型继承之无类继承模式 function object(o) { function F() {}; F.protot ...

  5. 【读书笔记】读《JavaScript模式》 - 函数复用模式之类式继承模式

    实现类式继承的目标是通过构造函数Child()获取来自于另外一个构造函数Parent()的属性,从而创建对象. 1.类式继承模式#1 —— 默认方式(原型指向父函数实例) function Paren ...

  6. 【转】设计模式(九)外观模式Facade(结构型)

    设计模式--外观模式Facade(结构型): 1. 概述 外观模式,我们通过外观的包装,使应用程序只能看到外观对象,而不会看到具体的细节对象,这样无疑会降低应用程序的复杂度,并且提高了程序的可维护性. ...

  7. 二十四种设计模式:外观模式(Facade Pattern)

    外观模式(Facade Pattern) 介绍为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.示例有一个Message实体类,某对象对它 ...

  8. 设计模式-外观模式(Facade)

    简介 外观模式(Facade),将外部与内部子系统的通信通过一个统一的门面对象进行. 由两部分组成: 门面角色:供外部调用,内部可能组装了多个子系统,多个方法. 子系统角色:子系统的方法也可以直接供外 ...

  9. 初涉JavaScript模式系列 阶段总结及规划

    总结 不知不觉写初涉JavaScript模式系列已经半个月了,没想到把一个个小点进行放大,竟然可以发现这么多东西. 期间生怕对JS的理解不到位而误导各位,读了很多书(个人感觉JS是最难的oo语言),也 ...

随机推荐

  1. 【高精度练习+卡特兰数】【Uva1133】Buy the Ticket

    Buy the Ticket Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  2. T4 模板 vs2010

    参阅:http://dotnet.cnblogs.com/page/78398/ T4模板的定义非常简单,整个模板的内容包括两种形式:静态形式和动态动态.前者就是直接写在模板中作为原样输出的文本,后者 ...

  3. 推荐10款 好用的 Jquery 评分插件

    Raty jQuery Raty这是一个能够自动生成可定制的星级评分jQuery插件.可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数. 地址: Ra ...

  4. bootstrap插件小记

    1.模态框 除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗.比如说:是否有灰色背景m ...

  5. Makefiles 介绍

    http://www-personal.umich.edu/~ppannuto/writings/makefiles.html Makefiles Makefiles (or, the GNU aut ...

  6. U - 神、上帝以及老天爷(第二季水)

    Description HDU 2006'10 ACM contest的颁奖晚会隆重开始了!         为了活跃气氛,组织者举行了一个别开生面.奖品丰厚的抽奖活动,这个活动的具体要求是这样的:  ...

  7. JavaScript的异步操作

    http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/

  8. HttpClient---------demo

    public class aa { public static void main(String[] args) { // 创建HttpClient实例 HttpClient httpclient = ...

  9. 数据库 count和sum区别

    最近备考软考,复习数据库时候,发现count和sum,貌似差不错.就仔细查了查. 表 人 id name number 1 贱人 3 2 好人 4 select count(number) from ...

  10. spring postconstruct

    package com.jdw.service.impl; import java.util.List; import javax.annotation.PostConstruct; import o ...