JavaScript 分支函数 (解决兼容问题更好的方法)

#非常实用的方法,推荐使用#

分支函数的作用是:可以解决兼容问题 if 或者 else 的重复判断的问题,我们一般的做法是:根据兼容的不同写 if,else 等,这些判断来实现兼容,但是这样明显就有一个缺点,每次执行这个函数的时候,都需要进行 if 和 else 的检测,效率明显不高,我们现在使用分支函数来实现当初始化的时候进行一些检测,在之后的运行代码过程中,代码就无需检测了;

// 我们先来看看传统的封装ajax请求的函数
//创建XMLHttpRequest对象:
var xmlhttp;
function createxmlhttp(){
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}
// 下面我们看看分支函数代码如下:
var XHR = (function(){
    var standard = {
        createXHR : function() {
            return new XMLHttpRequest();
        }
    };
    var oldActionXObject = {
        createXHR : function(){
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    };
    var newActionXObject = {
        createXHR : function(){
            return new ActiveXObject("Msxml2.XMLHTTP");
        }
    };
    if(standard.createXHR) {
        return standard;
    }else {
        try{
            newActionXObject.createXHR();
            return newActionXObject;
        }catch(e){
            oldActionXObject.createXHR();
            return oldActionXObject;
        }
    }
})();
console.log(XHR.createXHR()); //xmlHttpRequest对象

上面的代码就是分支函数,分支的原理是:声明几个不同名称的对象,且为该不同名称对象声明一个相同的方法,然后根据不同的浏览器设计来实现,接着开始进行浏览器检测,并且根据浏览器检测来返回哪一个对象,不论返回的是哪一个对象,最后它一致对外的接口都是 createXHR 方法的;

参考:推荐分支函数 (解决兼容问题的更好的方法)

时间: 2024-08-10 15:11:41

JavaScript 分支函数 (解决兼容问题更好的方法)的相关文章

javascript回调函数,闭包作用域,call,apply函数解决this的作用域问题

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以“存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值”. 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回.这是在JavaScript中使用回调函数的精髓.本篇文章的剩余部

Javascript的DOM中兼容问题以及解决兼容问题的方法

一.获取非行内样式的方法和它的兼容问题及解决方式 方 法 一:getComputedStyle(obox,false)  第一个参数表示要获取的对象,第二个值指定一个要匹配的伪元素的字符串.必须对普通元素省略(或null)false也可以.主要针对正常浏览器 方 法 二:Element.currentStyle  在IE浏览器中使用 解决兼容问题的方式: function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentSt

javascript中函数的3个高级技巧

× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本文将再深入一步,介绍函数的3个高级技巧 技巧一:作用域安全的构造函数 构造函数其实就是一个使用new操作符调用的函数 function Person(name,age,job){ this.name=name; this.age=age; this.job=job; } var person=new

javascript中函数的5个高级技巧

函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本文将再深入一步,介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符调用的函数 function Person(name,age,job){    this.name=name;    this.age=age;    this.job=job; }var person=new Person('match',28,'Software En

JavaScript 匿名函数

// 仅执行一次的匿名函数 ;(function ()//最常见的版本 圆括号包裹起来 表示输入括号很纠结 懒人绝对不理解为什么要有圆括号 { ; console.log( 1 ,2 ,3 ) }()) ;!function ()//其实也可以这样使用 偷懒成功 { ; console.log( 1 ,2 ,3 ) }() , function ()//只要 function 前面不是 分号 花括号等结束符号 是可以直接用逗号使用的 { ; console.log( 4 ,5 ,6 ) }()

javascript回调函数(模式)原理和示例深入分析

   广大网友读懂了我之前论述的javascript原理这篇文章很容易懂 回调函数来自一种著名的编程范式--函数式编程,在基本层面上,函数式编程指定的了函数的参数.函数式编程虽然现在的使用范围变小了,但它一直被"专业的聪明的"程序员看作是一种难懂的技术,以前是这样,未来也将是如此. 幸运的是,函数式编程已经被阐述的像你我这样的一般人也能理解和使用.函数式编程最主要的技术之一就是回调函数,你很快会阅读到,实现回调函数就像传递一般的参数变量一样简单.这项技术如此的简单,以至于我都怀疑为什么

JavaScript基础——函数表达式、闭包

简介 函数表达式是JavaScript中的一个既强大又容易令人困惑的特性.定义函数的方式有两种:一种是函数声明,另一种就是函数表达式.函数声明的语法是这样的: function functionName(arg0 , arg1 , arg2--){ //函数体 } 首先是function关键字,然后是函数的名字,这就是指定函数名的方式.Firefox.Safari.Chrome和Opera都给函数定义了一个非标准的name属性,通过这个属性可以访问到给函数指定的名字.这个属性的值永远等于跟在fu

JavaScript大杂烩2 - 理解JavaScript的函数

JavaScript中的字面量 书接上回,我们已经知道在JavaScript中存在轻量级的string,number,boolean与重量级的String,Number,Boolean,而且也知道了之间的区别.这里补充一点,直接使用字面量定义的变量都是属于前一种类型,例如: var name = 'Frank'; 此外大多数的内置操作返回的也都是前一种类型,这是必须的. function是第一等公民 与别的语言不同,在JavaScript中,函数是作为数据类型存在的,所以函数具有数据的静态行为.

理解JavaScript中函数的使用

函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(