外观模式笔记
   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. 求助,eclipse总是卡在building workspace-CSDN论坛

    1).解决方法 方法1.修改eclipse启动文件 eclipse.ini 中添加启动参数参数: -vmargs -Xmx512m 方法2.关闭自动构建工作区: project -> build ...

  2. 15款优雅的 WordPress 电子商务网站主题

    WordPress 电子商务网站主题今年非常流行,特别是对那些想要在几分钟内创建一个在线商店,但又没有掌握网络开发的很多知识的人来说.WordPress 是一个功能强大的 CMS,它的灵活性和可用性是 ...

  3. HTML表单提交数据中application/x-www-form-urlencoded和multipart/form-data的区别

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...

  4. React入门--------组件的生命周期

    Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ...

  5. [deviceone开发]-数据绑定示例

    一.简介 这个示例详细介绍了do平台数据bind的灵活使用方式.所有UI组件都支持binddata的方式,可以绑定到do_HashData,do_ListData对象.初学者推荐. 二.效果图 三.相 ...

  6. SharePoint Error - An unrecognized HTTP response was received when attempting to crawl this item

    SharePoint 2013爬网报错 An unrecognized HTTP response was received when attempting to crawl this item. V ...

  7. tomcat通过socket连接MySQL,不再占用服务端口【linux】

    MySQL连接方式的说明 http://icbm.iteye.com/blog/1840673 MySQL除了最常见的TCP连接方式外,还提供SOCKET(LINUX默认连接方式).PIPE和SHAR ...

  8. Projects\Portal_Content\Indexer\CiFiles文件夹下文件占用磁盘空间过大问题。

    C:\Program Files\Microsoft Office Servers\12.0\Data\Office Server\Applications\9765757d-15ee-432c-94 ...

  9. sqlite学习1

    Architecture  就像编译器一样,结构分为前端.虚拟机.后端 性能和限制(limitations) 使用B树来做indexes,用B+树来做table.和其他数据库一样 由于不需要鉴权.网 ...

  10. Android中的跨进程调用技术AIDL

    什么是AIDL Android系统中的进程之间不能共享内存,因此,需要提供一些机制在不同进程之间进行数据通信. 为了使其他的应用程序也可以访问本应用程序提供的服务,Android系统采用了远程过程调用 ...