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. ACM学习-POJ-1125-Stockbroker Grapevine

    菜鸟学习ACM,纪录自己成长过程中的点滴. 学习的路上,与君共勉. ACM学习-POJ-1125-Stockbroker Grapevine Stockbroker Grapevine Time Li ...

  2. 8.6中关于PSNR(峰值信噪比), img->quad的解释

    在JM代码中,多次遇到img->quad这个东西,而在官方代码中只给出了一句说明: 我开始看了好几遍都没有看懂,然后看到后面有snr,所以想应该和snr有关吧. 然后再代码中寻找snr,发现jm ...

  3. 转JS技巧

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  4. 认证和注册,提交到App Store:

    账号分为个人和公司个人付费后2天左右,收到激活邮件,可以使用 member center certificates,identifiers&profiles:certificates 认证:d ...

  5. iOS数组、字典与json字符串的转换

    /*! * 将字典或者数组转化为JSON串 * * @param theData <#theData description#> * * @return <#return value ...

  6. 使用SignalR和SQLTableDependency跟踪数据库中记录的变动

    原文地址:查看 SqlTableDependency是一个组件用来接收数据库的通知,包含在数据表上该记录的值的Inserted.Deleted或者Update操作. 备注:原文提供示例代码下载,但是j ...

  7. WindowsForm 流

    流 包括输入流代码 输出流代码 流: 输入流: string filename = openFileDialog1.FileName; //通过读入流进行文件读取 StreamReader sr = ...

  8. 纯Html+Ajax和JSP两者对比的个人理解

    最近写个人web,用jsp+servlet做,突然想到一个问题:html+ajax似乎和jsp实现效果一样:那么,两者到底有什么区别呢? 这里参考老猿的一段话: 全站ajax会维护大量的js代码,如何 ...

  9. AngularJS如何给动态添加的DOM中绑定事件

    正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿 ...

  10. Fiddler 域名过滤

    原来一直没意识到Fiddler过滤,导致每次抓包都要自己判断.搜索好多东西,真是呵呵! 过滤设置很简单,看懂一张图就解决问题了. 箭头 那两处设置下,圆圈处保存再进行抓包即可