javascript-外观模式
外观模式笔记
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-外观模式的更多相关文章
- javascript设计模式-外观模式
也可译为门面模式.它为子系统中的一组接口提供一个一致的界面, Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.引入外观角色之后,使用者只需要直接与外观角色交互,使用者与子系统之 ...
- 再起航,我的学习笔记之JavaScript设计模式11(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
- 深入理解JavaScript系列(30):设计模式之外观模式
介绍 外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用. 正文 外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦 ...
- javascript 设计模式-----外观模式
外观模式是为外部提供简单的接口一种方式,由于模块内部方法庞杂,不能一一对外公开,那么我们需要一个统一的和简单的对外方法(API)来调用这些内在的函数.这时候我们可以用到外观模式: var module ...
- [设计模式] Javascript 之 外观模式
外观模式说明 说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到 ...
- javascript设计模式之外观模式
/* * 外观模式 * 外观模式的主要意义在于简化类的接口,使其易于调用 */ // 你常常在不经意中使用了外观模式,尤其类库中更多(处理兼容性问题) var addEvent = function ...
- javascript设计模式(张容铭)学习笔记 - 外观模式绑定事件
有一个需求要为document对象绑定click事件来是想隐藏提示框的交互功能,于是小白写了如下代码: document.onclick = function(e) { e.preventDefaul ...
- js原生设计模式——9外观模式封装
1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head> <meta charset= ...
- 设计模式(八): 从“小弟”中来类比"外观模式"(Facade Pattern)
在此先容我拿“小弟”这个词来扯一下淡.什么是小弟呢,所谓小弟就是可以帮你做一些琐碎的事情,在此我们就拿“小弟”来类比“外观模式”.在上面一篇博文我们完整的介绍了“适配器模式”,接下来我们将要在这篇博客 ...
- 设计模式(十一)外观模式(Facade Pattern)
一.引言 在软件开发过程中,客户端程序经常会与复杂系统的内部子系统进行耦合,从而导致客户端程序随着子系统的变化而变化,然而为了将复杂系统的内部子系统与客户端之间的依赖解耦,从而就有了外观模式,也称作 ...
随机推荐
- MVC之前的那点事儿系列
MVC之前的那点事儿系列,是笔者在2012年初阅读MVC3源码的时候整理的,主要讲述的是从HTTP请求道进入MVCHandler之前的内容,包括了原创,翻译,转载,整理等各类型文章,当然也参考了博客园 ...
- 使用PackageManager获得应用(包)信息
PackageManager是Android中一个很有用的类,能够获取已安装的应用(包)的信息,如应用名称.图标.权限,安装.删除应用(包)等. 以下代码可以获得已安装应用(包)的信息: // 包管理 ...
- 【Java每日一题】20161103
package Nov2016; import java.util.List; public class Ques1103 { public void method01(String[] array) ...
- Java继承和接口
接口最关键的作用,也是使用接口最重要的一个原因:能上溯造型至多个基础类.使用接口的第二个原因与使用抽象基础类的原因是一样的:防止客户程序员制作这个类的一个对象,以及规定它仅仅是一个接口.这样便带来了一 ...
- (原) 1.1 Zookeeper单机安装
本文为原创文章,转载请注明出处,谢谢 zookeeper 单机安装配置 1.安装前准备 linux系统(此文环境为Centos6.5) Zookeeper安装包,官网https://zookeeper ...
- 类似 Dribbble 下载按钮的 SVG 弹性动画进度条
Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...
- React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
- imagesLoaded – 检测网页中的图片是否加载
imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库.支持回调的获取图片加载的进度,还可以绑定自定义事件.可以结合 jQuery.RequireJS 使用 ...
- 15款优雅的 WordPress 电子商务网站主题
WordPress 电子商务网站主题今年非常流行,特别是对那些想要在几分钟内创建一个在线商店,但又没有掌握网络开发的很多知识的人来说.WordPress 是一个功能强大的 CMS,它的灵活性和可用性是 ...
- jquery实现输入框实时输入触发事件代码
$('.aa').bind('input propertychange', function() { searchProductClassbyName(); }); function searchPr ...