`
libmw
  • 浏览: 7108 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
最近访客 更多访客>>
社区版块
存档分类
最新评论

Javascript设计模式之:加载时的分支

阅读更多
由于各个浏览器的兼容问题,在写脚本的时候经常会为了兼容多个浏览器而写多个分支。
判断浏览器的方法一种是使用userAgent,一种是使用特性判断,这里以特性判断为例。
例如:
function addEvent(obj, type, func){
  if(document.addEventListener){
    obj.addEventListener(type, func, false);
  }else if(document.attachEvent){
    obj.attachEvent('on' + type, func);
  }
}

这种方法使用判断document特性来判断应该使用哪种方法进行事件绑定。
这样我们在给某个dom添加属性的时候可能就会这样调用:
addEvent($('div1'), 'click', func);

问题就在这里。我们在做拖动效果的时候,会不断的绑定和解绑mousemove方法,这样我们每绑定一次程序就会判断一次。有没有方法只进行一次判断呢?
当然有的:
if(document.addEventListener){
  var addEvent = function (obj, type, func){
    obj.addEventListener(type, func, false);
  }
}else if(document.attachEvent){
  var addEvent = function (obj, type, func){
    obj.attachEvent('on' + type, func);
  }
}


这样我们在初始化的时候就声明了方法,总共只有一个分支,以后调用addEvent的时候便不会有分支了。
分享到:
评论

相关推荐

    javscipt设计模式

    ### JavaScript设计模式详解 #### 面向对象基础 在JavaScript中实现面向对象编程(OOP)是提升代码质量和可维护性的关键。OOP的核心概念包括封装、继承和多态。 - **封装**: 封装是一种将数据和操作数据的方法捆绑...

    树型菜单和分支菜单

    树型菜单和分支菜单是两种常见的交互模式,用于组织和展示大量的层级数据。这两种菜单类型在各种软件和Web应用中都有广泛的应用,如文件管理器、操作系统、企业级系统等。 树型菜单,也称为多级菜单或层级菜单,它...

    js-udacity:设计模式

    **标题解析:** "js-udacity:设计模式" 指的是这是一个关于JavaScript设计模式的项目或课程,可能是由Udacity在线教育平台提供的。"js-udacity"是项目或课程的名称,而“设计模式”是其核心主题,意味着我们将探讨在...

    前端面试经验.zip

    - 常见的JavaScript设计模式:单例,工厂,观察者,装饰器,代理等。 面试中,面试官还可能考察面试者的项目经验、团队协作能力、解决问题的能力以及对新技术的关注和学习能力。"Front-end-interview-main"文件很...

    显示加载用户界面的reactnative模块适用于iOS和Android

    "netyouli-react-native-whc-loading-b86998f"这个文件名可能是这个加载模块的特定版本或者是源代码库的分支。通常,这种命名方式包含了作者、模块名称、版本号或者Git提交哈希。在这个情况下,"netyouli"可能是作者...

    lazylinq是LINQ的一个完整JavaScript移植

    5. **适用场景**:lazylinq适用于需要高效处理JavaScript数组或数据流的场合,尤其是处理大数据集时,可以避免一次性加载所有数据导致的性能问题。 6. **API设计**:作为移植自LINQ的库,lazylinq可能会保持与原版...

    RequireJS是一个在浏览器端客户端的模块加载器尽管他也能被用于Nodejs端服务端

    总的来说,RequireJS是JavaScript开发中不可或缺的工具之一,它通过模块化管理和异步加载,提升了代码的可维护性和性能,尤其在处理大型复杂项目时,其优势更为明显。对于开发者来说,熟练掌握RequireJS的使用能够极...

    statisticsjs用于统计数据分析的扩展开源JavaScript库

    " 描述表明该库设计得非常小巧,不会给项目带来过大的负担,同时具备了进行统计分析所需的多种基础和进阶功能。这意味着用户可以在不引入大量额外依赖的情况下,实现复杂的统计计算。 **标签解析:** "JavaScript...

    JavaScript高级应用与实践PDF版本下载.txt

    1. **动态类型**:JavaScript是一种动态类型的编程语言,这意味着变量可以在运行时被赋予任何类型的数据。 2. **函数式编程**:JavaScript支持高阶函数、闭包等概念,这使得它非常适合函数式编程风格。 3. **原型...

    Javascript

    作为一种脚本语言,JavaScript与Java在名称上相似,但实际上它们在语法、设计哲学上有很大的不同。 JavaScript基本数据结构包括基本数据类型和引用数据类型。基本数据类型如数字(Number)、字符串(String)、布尔...

    RISD“网络设计”暑期课程:作业1仅供学习参考用代码.zip

    5. **用户体验与交互设计**: 学习者需要理解用户的需求和行为模式,设计直观易用的界面,并考虑用户的交互流程。这包括信息架构、导航设计和可用性测试。 6. **网络性能优化**: 了解如何减少加载时间,提高网站速度...

    onfirejs是一个很简单的事件分发的Javascript库简洁实用

    1. **事件驱动编程**:事件驱动是JavaScript的核心特性之一,它允许程序响应用户的交互或其他异步操作,如点击按钮、页面加载完成等。 2. **事件注册与监听**:onfire.js可能提供简便的方法来注册事件监听器,例如`....

    完整前端面试资料.zip

    8. **设计模式面试真题** (15.设计模式面试真题-31页.pdf) 设计模式是软件工程的最佳实践,常见的有: - 创建型模式:单例、工厂、建造者等。 - 结构型模式:适配器、装饰器、代理等。 - 行为型模式:观察者、...

    javascript-project-boilerplate:Javascript 项目默认架构的提案

    **文件名称列表分析:** "javascript-project-boilerplate-master" 这个文件名表明它是整个项目的主分支或原始版本,通常在GitHub等代码托管平台上,"master"分支代表了项目的主要开发线。 **知识点详解:** 1. **...

    JS设计模式之惰性模式(二)

    惰性模式是JavaScript设计模式中的一种,其主要目的是优化代码执行效率,减少不必要的重复判断,尤其是在处理跨浏览器兼容性问题时。在JavaScript中,惰性模式通常用于将一些昂贵的操作延迟到真正需要它们的时候才...

    JavaScript的简单且小巧119字节事件发射器库

    在JavaScript中,事件发射器是一种常见的设计模式,用于实现对象之间的通信。标题提到的"JavaScript的简单且小巧119字节事件发射器库"正是这种设计理念的体现,它在极小的代码体积下实现了事件驱动的机制。 事件...

    大巧不工-WEB前端设计修炼之道

    《大巧不工 - WEB前端设计修炼之道》是一本深入探讨WEB前端开发技术与设计理念的专业书籍。这本书旨在帮助读者理解并掌握如何通过巧妙的设计和高效的技术实现,打造出优秀的WEB前端项目。以下是对其中核心知识点的...

    healthcare.gov不稳定市场的社区驱动修复 -JavaScript-CSS-下载

    2. **CSS在网页设计中的重要性**:解释CSS如何定义网页样式,以及如何通过优化CSS提高加载速度和用户体验。 3. **社区驱动的开发模式**:介绍开源社区的工作流程,如GitHub上的协作、问题追踪、代码审查和版本控制。...

Global site tag (gtag.js) - Google Analytics