外观模式笔记
   1. 为一组复杂的子系统接口提供一个更高级的统一接口, 通过这个接口使得对子系统接口的访问更容易;

2. 简化底层接口的复杂性,解决浏览器兼容性问题。

3.也会用于对底层结构兼容性做统一封装来简化用户使用

以事件方法作为demo实例

添加元素事件有三种:addEventListener,attachEvent,DOM0级事件如onclick

DOM0级事件有被覆盖的风险,应使用DOM2级事件处理程序提供的方法addEventListener来实现,但IE(低于9)不支持,其次考虑使用attachEvent,最后DOM0级事件

            function addEvent(dom,type,fn){
//对于支持dom2级事件处理程序 addEventListener方法的浏览器
if(dom.addEventListener){
dom.addEventListener(type,fn,false);
//对于不支持addEventListener方法但支持attachEvent方法的浏览器
}else if(dom.attachEvent){
dom.attachEvent('on'+type,fn);
//不支持attachEvent方法的浏览器
}else{
dom['on'+type] = fn;
}
}

javascript-外观模式的更多相关文章

  1. javascript设计模式-外观模式

    也可译为门面模式.它为子系统中的一组接口提供一个一致的界面, Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.引入外观角色之后,使用者只需要直接与外观角色交互,使用者与子系统之 ...

  2. 再起航,我的学习笔记之JavaScript设计模式11(外观模式)

    经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...

  3. 深入理解JavaScript系列(30):设计模式之外观模式

    介绍 外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用. 正文 外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦 ...

  4. javascript 设计模式-----外观模式

    外观模式是为外部提供简单的接口一种方式,由于模块内部方法庞杂,不能一一对外公开,那么我们需要一个统一的和简单的对外方法(API)来调用这些内在的函数.这时候我们可以用到外观模式: var module ...

  5. [设计模式] Javascript 之 外观模式

    外观模式说明 说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到 ...

  6. javascript设计模式之外观模式

    /* * 外观模式 * 外观模式的主要意义在于简化类的接口,使其易于调用 */ // 你常常在不经意中使用了外观模式,尤其类库中更多(处理兼容性问题) var addEvent = function ...

  7. javascript设计模式(张容铭)学习笔记 - 外观模式绑定事件

    有一个需求要为document对象绑定click事件来是想隐藏提示框的交互功能,于是小白写了如下代码: document.onclick = function(e) { e.preventDefaul ...

  8. js原生设计模式——9外观模式封装

    1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  9. 设计模式(八): 从“小弟”中来类比"外观模式"(Facade Pattern)

    在此先容我拿“小弟”这个词来扯一下淡.什么是小弟呢,所谓小弟就是可以帮你做一些琐碎的事情,在此我们就拿“小弟”来类比“外观模式”.在上面一篇博文我们完整的介绍了“适配器模式”,接下来我们将要在这篇博客 ...

  10. 设计模式(十一)外观模式(Facade Pattern)

    一.引言 在软件开发过程中,客户端程序经常会与复杂系统的内部子系统进行耦合,从而导致客户端程序随着子系统的变化而变化,然而为了将复杂系统的内部子系统与客户端之间的依赖解耦,从而就有了外观模式,也称作 ...

随机推荐

  1. GitHub for Windows 2.0使用教程

    Git是目前最先进的分布式版本控制系统,作为一个程序员,我们需要掌握其用法. 一:下载GitHub for Windows 2.0 二:安装GitHub  下载之后点击进行安装过程,安装之后桌面上会有 ...

  2. [函數] Firemonkey 各平台 "简体" / "繁体" 判断

    目前的 Delphi 10 Seattle 的 TLang 尚不支持取得简体及繁体的语系字符,在能取得正确的语系字符后(整理中),才能使用下列函数判断: function ChineseLang(co ...

  3. 2015暑假多校联合---Mahjong tree(树上DP 、深搜)

    题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=5379 Problem Description Little sun is an artis ...

  4. Spring中的事务

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  5. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  6. 小白的CSS基础学习

    CSS定义: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式. CSS代码语法: css样式选择组成部分:选择符+声明( ...

  7. 【iScroll源码学习02】分解iScroll三个核心事件点

    前言 最近两天看到很多的总结性发言,我想想今年好像我的变化挺大的,是不是该晚上来水一发呢?嗯,决定了,晚上来水一发! 上周六,我们简单模拟了下iScroll的实现,周日我们开始了学习iScroll的源 ...

  8. Windows服务器如何选 搭建WAMP环境

    Windows Server 2003 Windows Server 2008 如何选择服务器系统版本.原文地址:http://www.xwamp.com/learn/1. 系统版本: Windows ...

  9. [deviceone开发]-纳豆项目源码开源

    一.简介 已上线的纳豆项目开源.这个App做的非常好,细节处理的很流畅,使用了很多小的动画效果,极力推荐,很多功能可以从这个应用中获取代码和灵感. 二.效果图        三.相关下载 androi ...

  10. asp.net正则模板引擎代码

    我们申明一个数组 ]; 接下来关键的正则表达式: RegexOptions options = RegexOptions.None; //嵌套模板标签(兼容) r[] = new Regex(@&qu ...