技巧二:

  【惰性载入函数】

  因为浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题,比如,我们最常见的为dom节点添加时间的函数

function addEvent(type, element, fun) {
if (element.addEventListener) {
element.addEventListener(type, fun, false);
}
else if(element.attachEvent){
element.attachEvent('on' + type, fun);
}
else{
element['on' + type] = fun;
}
}

  每次调用addEvent函数的时候,它都要对浏览器所支持的能力进行检查,首先检查是否支持addEventListener方法如果不支持,在检查是否支持attrchEvent方法,如果还不支持,就用dom0级方法来添加时间,这个过程中,在addEvent函数每次调用的时候都要走一遍,其实,如果浏览器支持其中的一种方法,那么他就会一直支持了,就没有必要再进行其他分支的检测了。也就是说,if语句不必每次都执行,代码可以运行的更快一些。

  解决方案就是惰性载入,所谓的惰性载入,就是指函数执行的分支只会发生一次

  有两种实现惰性载入的方式

【1】第一种就是在函数被调用时,在处理函数,函数在第一次调用时,该函数会被覆盖为另外一个按合适方式执行的函数,这样任何对原函数的调用都不用再经过执行的分支了

  我们可以用下面的方式使用惰性载入重写addEvent()

function addEvent(type, element, fun) {
if (element.addEventListener) {
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else{
addEvent = function (type, element, fun) {
element['on' + type] = fun;
}
}
return addEvent(type, element, fun);
}

  在这个惰性载入的addEvent()中,if语句的每个分支都会为addEvent变量赋值,有效覆盖了原函数。最后一步便是调用了新赋函数。下一次调用addEvent()时,变回调用新赋值的函数,这样就不用再执行if语句了

  但是,这种方式有个缺点,如果函数名称有所改变,修改起来比较麻烦

【2】第二种是声明函数时就指定适当的函数。 这样在第一次调用函数时就不会损失性能了,只在代码加载时会损失一点性能

  以下就是按照这一思路重写的addEvent()。以下代码创建了一个匿名的自执行函数,通过不同的分支以确定应该使用哪个函数实现

var addEvent = (function () {
if (document.addEventListener) {
return function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if (document.attachEvent) {
return function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else {
return function (type, element, fun) {
element['on' + type] = fun;
}
}
})();

javascript函数中的三个技巧【二】的更多相关文章

  1. javascript函数中的三个技巧【三】

    技巧三: [函数绑定] 在javascript与DOM交互中经常需要使用函数绑定,定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上,绑定函数经常和回调函数及事件处理程序一起使用,以便 ...

  2. javascript函数中的三个技巧【一】

    在学习javascript中,函数是非常重要的,现在我来谈谈对函数的理解以及在工作和用法中的一些技巧 技巧一. [作用域安全的构造函数] 构造函数其实就是一个使用new操作调用的函数 function ...

  3. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  4. 深入理解javascript函数系列第三篇

    前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数 ...

  5. Javascript函数中传递带空格的参数

    通常在页面中要让某些内容点击后产 生点击事件(非页面跳转)都会使用onclick,但是这样不适于需要传递参数的情况,于是写成直接调用Javascript函数的方式:<a href=javascr ...

  6. Javascript函数中的高级运用

    先介绍一下js中的高阶函数,所谓的高阶函数就是,一个函数中的参数是一个函数或者返回的是一个函数,就称为高阶函数. js中已经提高了一下高阶函数,使用起来非常棒,当然我们也可以自己实现,我介绍几种ES5 ...

  7. 在JavaScript函数中使用EL表达式注意的事项

    最近在使用JSP显示从Servlet带过来的数据时,大量的使用到了EL表达式,并且有些EL表达式是在使用到JavaScript的函数时作为参数传入的,举个例子,比如下面的样子: 这个HTML标签的意思 ...

  8. JavaScript函数中的参数(arguments)

    arguments argument是JavaScript中的一个关键字,用于指向调用者传入的所有参数. function example(x){ alert(x); alert(arguments. ...

  9. javascript 函数初探 (三)--- javascript 变量的作用域

    javascript 变量的作用域: 这是一个至关重要的问题.特别是当我们从别的语言转向javascript时,必须要明白一点,即在javascript中,变量的定义并不是以代码块作为作用域的,而是以 ...

随机推荐

  1. 获得 LayoutInflater 实例的三种方式

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  2. 使用windbg分析iis崩溃的一个实例

    问题背景说明:客户的生产环境不定时发生崩溃,需要定位崩溃的原因.在开发环境不能重现该问题,准备抓取IIS的dump文件分析 第一步:在客户的生产环境抓取dump文件 参考:IIS崩溃时自动抓取Dump ...

  3. java攻城师之路--复习java web之jsp入门_El表达式_JSTL标签库

    JSP 技术掌握:JSP语法 + EL + JSTL 为什么sun推出 JSP技术 ? Servlet 生成网页比较复杂,本身不支持HTML语法,html代码需要通过response输出流输出,JSP ...

  4. Python--matplotlib绘图可视化知识点整理

    from:https://segmentfault.com/a/1190000005104723 本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 强烈推荐ipython无论你 ...

  5. ruby -- 基础学习(五)empty、nil、blank三者之间的区别

    这三个方法在ROR中经常用到,都是用来判断是否为空的. 区别是: ruby的方法:.nil?..empty? rails的方法 :.blank? 用法的区别: .nil?    :   判断对象是否存 ...

  6. DDD:建模原语 之 四象图(转载的神文)

    “模型.状态和行为特征.场景”和“四象图”,建模观的命名与立象. 建模原语:四象图 作者:achieveidea@gmail.com 命名:模型.结构特征.行为特征.场景(及其规约). 释义:模型,描 ...

  7. 使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性能优化

    本篇教程我们主要讲解在游戏界面上的布局一般遵循哪些原则和一些性能优化的通用方法. 接着教程(五),我们通过Loading类一次性加载了全部图像素材,现在要把我们所用到的素材变成图片对象显示在界面上,由 ...

  8. 移动端 ios 长按复制兼容方案

    移动端页面,需要复制一段文字码. 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图: 1 ...

  9. static、final、static final 用法

    1.使用范围:类.方法.变量.2.区别和联系:2.1.static 含义:静态的,被 static 修饰的方法和属性只属于类不属于类的任何对象.2.2.static 用法:2.2.1.static 可 ...

  10. SpringMVC——类型转换和格式化、数据校验、客户端显示错误消息

    在介绍类型转换和格式化之前,我首先来介绍 <mvc:annotation-driven />. 需要导入的 schema: xmlns:mvc="http://www.sprin ...