0.前言

早上好,今天天气不错,估计有35度吧,坐在空调室里相当惬意,那么酒足饭饱之后就应该干些正事了。

1. 为什么使用外观模式

外观模式提供了一个高层接口,封装一些复杂操作或繁琐行为,方便调用。门面模式第一可以简化类的接口,第二可以消除类与使用它的客户代码之间的耦合。其实就是为了图方便,在很多js库中都使用了该模式,主要用于兼容多浏览器。

2. 具体说明

var addEvent = function(ele,type,fn){

    if(window.addEventListener){
ele.addEventListener(type,fn,false);
}else if(window.attachEvent){
ele.attachEvent('on'+type,fn);
}else{
ele['on'+type] = fn;
} }

这就是一个常见的时间监听函数,这个函数就是一个基本的门面,使用该函数就可以方面为DOM节点添加事件处理函数。

3.个人理解

3.1 门面模式(外观模式)就是提供一个高层接口,封装一些复杂或繁琐行为,方便对这些代码的调用;

3.2 很多js库用到了该模式,在多浏览器兼容方面非常有用;

3.3 这个模式其实就是为了图方面,是一种组织性的模式。

js设计模式(5)---外观模式的更多相关文章

  1. js设计模式——2.外观模式

    js设计模式——2.外观模式

  2. JS 设计模式七 -- 外观模式

    概念 为子系统中的一组接口提供一个一致的界面,定义一个高层接口,这个接口使子系统更加容易使用. 外观模式在JS中,可以认为是一组函数的集合. 实现 // 三个处理函数 function start() ...

  3. 每天一个设计模式-2 外观模式(Facade)

    每天一个设计模式-2  外观模式(Facade) 1.生活中的示例 客户想要购买一台电脑,一般有两种方法: 1.自己DIY,客户需要知道组成电脑的所有电子器件,并且需要熟悉那些配件,对客户要求较高. ...

  4. C#设计模式(11)——外观模式(Facade Pattern)

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

  5. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  6. 乐在其中设计模式(C#) - 外观模式(Facade Pattern)

    原文:乐在其中设计模式(C#) - 外观模式(Facade Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 外观模式(Facade Pattern) 作者:webabcd 介绍 ...

  7. 设计模式之 外观模式详解(Service第三者插足,让action与dao分手)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 各位好,LZ今天给各位分享一 ...

  8. 8.4 GOF设计模式三: 外观模式 Facade

    GOF设计模式三: 外观模式 Facade  “现有系统”功能强大.复杂,开发“新系统”需要用到其中一部分,但又要增加一部 分新功能,该怎么办?4.1 Facade Pattern: Key Fea ...

  9. 北风设计模式课程---外观模式(Facade)总结

    北风设计模式课程---外观模式(Facade)总结 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用户获得装备,我可以先装备 ...

  10. js设计模式——7.备忘录模式

    js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = conte ...

随机推荐

  1. A4 打印长宽

    我是用下面的转换公式,将A4纸转为在屏幕中的分辨率 页边距: 0.75 inchA4: 8.27x11.69 inch打印机DPI:600DPI屏幕DPI  : 96DPIwidth = (8.27  ...

  2. 【Android Studio使用教程 7】AndroidStudio问题汇总

    FindBugs:Compiler output path for module can not be null. check your module/project settings问题原因 And ...

  3. 【Mood-5】14条建议,使你的IT职业生涯更上一层楼

    升值为企业IT部门的领导者,并非一件易事.从一般大众中脱颖而出,则更不容易. 2013是一个好年头,据专家报告显示,6月所有新工作中,10%来自技术领域.这对于那些希望高升.换岗.跳槽的IT技术人员来 ...

  4. easyui window自动居中(修复了iframe弹窗被遮盖问题)

    $.extend($.fn.window.defaults, { onOpen:function(left, top){ var iframeWidth = $(this).parent().pare ...

  5. could not read data from '/Users/xxxx/myapp-Info.plist'

    xcode编译报错如下: could not read data from '/Users/iamme/Documents/XCode/myapp/myapp/myapp-Info.plist': T ...

  6. html中的一些标签学习

    今天看手册学习到了HTML5很多属性.现在总结如下 <body bgcolor="BED1A2" text="FFFFFF" link="yel ...

  7. 【ASP.NET基础】客户端、服务器端的数据验证 + CKEditer

    1, 客户端 用Javascript进行验证,直接提示用户输入的数据是否符合规范,是否合法. 这样体验行比较好,客户端立即就可以得到反馈,而且减少了服务器端的数据交互. 这样前端数据验证并不是很安全, ...

  8. R语言快速入门

    R语言是针对统计分析和数据科学的功能全面的开源语言,R的官方网址:http://www.r-project.org/  在Windows环境下安装R是很方便的 R语言的两种运行模式:交互模式和批处理模 ...

  9. C# 线程抛异常

    异常抛出 异常抛出要在线程代码中抛出,否则捕获不到 using System; using System.Threading; namespace testthread_keyword_lock { ...

  10. CSS之shasow(阴影)

    参考https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow box-shadow属性向框添加一个或多个阴影.语法先上: box-shad ...