资讯专栏INFORMATION COLUMN

IE兼容forEach/map/every/some/indexOf/filter/getCompu

XUI / 3091人阅读

摘要:修复兼容等新方法。在第版时,被添加进标准因此在某些实现环境中不被支持。是在最近的标准中新添加的方法所以一些旧版本的浏览器可能没有实现该方法。算法假定和拥有它们的初始值。

修复IE兼容forEach、indexOf、filter、getComputedStyle等新方法。
补充:此文是从这里搜集来的developer.mozilla.org,只是个人做个笔记,为了方便以后对JSLite万一要做兼容的时候行个方便。当时懒连接地址就贴了一个,如果你要原地方找到方法,可以在developer.mozilla.org这个里面搜索。

getComputedStyle
  

修复IE,增加方法getComputedStyle为对象的窗口和getPropertyValue方法的对象,它返回的getComputedStyle

jsif (!window.getComputedStyle) {
    window.getComputedStyle = function(el, pseudo) {
        this.el = el;
        this.getPropertyValue = function(prop) {
            var re = /(-([a-z]){1})/g;
            if (prop == "float") prop = "styleFloat";
            if (re.test(prop)) {
                prop = prop.replace(re, function () {
                    return arguments[2].toUpperCase();
                });
            }
            return el.currentStyle[prop] ? el.currentStyle[prop] : null;
        }
        return this;
    }
}
some
  

在第 5 版时,some 被添加进 ECMA-262 标准;这样导致某些实现环境可能不支持它。你可以把下面的代码插入到脚本的开头来解决此问题,从而允许在那些没有原生支持它的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法,假定 Object 和 TypeError 拥有他们的初始值,且 fun.call 等价于 Function.prototype.call。

jsif (!Array.prototype.some){
  Array.prototype.some = function(fun /*, thisArg */)  {
    "use strict";
    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
      throw new TypeError();

    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++)
    {
      if (i in t && fun.call(thisArg, t[i], i, t))
        return true;
    }

    return false;
  };
}
every
  

在第 5 版时,every 被添加进 ECMA-262 标准;因此在某些实现环境中不被支持。你可以把下面的代码放到脚本的开头来解决此问题,该代码允许在那些没有原生支持 every 的实现环境中使用它。该算法是 ECMA-262 第5版中指定的算法,假定 Object 和 TypeError 拥有它们的初始值,且 fun.call 等价于 Function.prototype.call。

jsif (!Array.prototype.every)
{
  Array.prototype.every = function(fun /*, thisArg */)
  {
    "use strict";

    if (this === void 0 || this === null)
      throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
        throw new TypeError();

    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++)
    {
      if (i in t && !fun.call(thisArg, t[i], i, t))
        return false;
    }

    return true;
  };
}
map
  

map 是在最近的 ECMA-262 标准中新添加的方法;所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 map 方法的浏览器中,你可以使用下面的 Javascript 代码来实现它。所使用的算法正是 ECMA-262,第 5 版规定的。假定Object, TypeError, 和 Array 有他们的原始值。而且 callback.call 的原始值也是 Function.prototype.call

js// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. Let O be the result of calling ToObject passing the |this| 
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal 
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + " is not a function");
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len) 
    //    where Array is the standard built-in constructor with that name and 
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k < len
    while (k < len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal 
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal 
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal 
        //     method of callback with T as the this value and argument 
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}
filter方法的支持
  

filter 被添加到 ECMA-262 标准第 5 版中,因此在某些实现环境中不被支持。可以把下面的代码插入到脚本的开头来解决此问题,该代码允许在那些没有原生支持 filter 的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法,假定 fn.call 等价于 Function.prototype.call 的初始值,且 Array.prototype.push 拥有它的初始值。

jsif (!Array.prototype.filter){
    Array.prototype.filter = function(fun /*, thisArg */){
        "use strict";
        if (this === void 0 || this === null)
            throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (typeof fun !== "function")
            throw new TypeError();
        var res = [];
        var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
        for (var i = 0; i < len; i++){
            if (i in t){
                var val = t[i];
                if (fun.call(thisArg, val, i, t))
                res.push(val);
            }
        }
        return res;
    };
}
bind

bind 函数在 ECMA-262 第五版才被加入;它可能无法在所有浏览器上运行。你可以部份地在脚本开头加入以下代码,就能使它运作,让不支持的浏览器也能使用 bind() 功能。

jsif (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis || window,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}
indexOf
jsif(!Array.indexOf){
    Array.prototype.indexOf = function(obj){              
        for(var i=0; i

forEach

  

forEach 是在最近被添加到 ECMA-262 标准的;这样它可能在标准的其他实现中不存在,你可以在你调用 forEach 之前 插入下面的代码,在本地不支持的情况下使用 forEach。该算法是 ECMA-262 第5版中指定的算法。算法假定 Object 和 TypeError 拥有它们的初始值。callback.call 等价于 Function.prototype.call。
developer.mozilla.org

js// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {  
    Array.prototype.forEach = function(fun /*, thisp*/){  
        var len = this.length;  
        if (typeof fun != "function")  
            throw new TypeError();  
        var thisp = arguments[1];  
        for (var i = 0; i < len; i++){  
            if (i in this)  
                fun.call(thisp, this[i], i, this);  
        }  
    };  
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91459.html

相关文章

  • DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    摘要:下兼容问题,这个最好处理,转化成兼容就可以。暂时还没找到专用的兼容。高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用或时。只是目前并不支持。以上都是写中的一些兼容,建议遵循 1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 2.flaot浮动造成IE6下面...

    silvertheo 评论0 收藏0
  • 浏览器兼容

    摘要:一什么是浏览器兼容问题同一份代码,有的浏览器显示效果正常,有的浏览器显示不正常二为什么会有浏览器兼容问题同一产品,版本越老越多同一产品,版本越新,功能越多。实际项目中大部分是针对浏览器不同版本之间的表现差异而引入的。 一、什么是浏览器兼容问题 同一份代码,有的浏览器显示效果正常,有的浏览器显示不正常 二、为什么会有浏览器兼容问题 同一产品,版本越老 bug 越多 同一产品,版本越新,...

    hqman 评论0 收藏0
  • 兼容系列-IE678的兼容

    摘要:最简单的区分所有浏览器都会显示为紫色会显示红色会变为蓝色会变为绿色上面的样式解释为顺序是显示的结果用浏览,颜色是紫色用浏览,颜色是红色用浏览,颜色是蓝色用浏览,颜色是绿色支持伪元素伪元素和在及以下不支持兼容可以识别写法和兼容则需要引 1. 最简单的CSS Hack 区分 IE6 、 IE7 、IE8 css .color{ background-color: #CC00FF; ...

    baoxl 评论0 收藏0
  • 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    摘要:三创建时发现这么一句话,不知其什么意思,百度如下这样写可以达到的效果是如果安装了,则使用来渲染页面,如果没安装,则使用最高版本的内核进行渲染。 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 ; 百度一下,你就知道 var wpo={start:new Date*1...

    tabalt 评论0 收藏0
  • 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    摘要:三创建时发现这么一句话,不知其什么意思,百度如下这样写可以达到的效果是如果安装了,则使用来渲染页面,如果没安装,则使用最高版本的内核进行渲染。 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 ; 百度一下,你就知道 var wpo={start:new Date*1...

    AnthonyHan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<