?

日志更新

修复 jQuery 中 isFunction 方法的 BUG

jQuery 1.4 源码 449 行(core.js 431 行),判断是否为函数的方法如下(思路来源于 Douglas Crockford 的《The Miller Device》):

isFunction: function( obj ) {
    return toString.call(obj) === "[object Function]";
},

同时 jQuery 的作者也作了部分注释:

See test/unit/core.js for details concerning isFunction. Since version 1.3, DOM methods and functions like alert aren’t supported. They return false on IE (#2968).

即:此方法在 IE 下无法正确识别 DOM 方法和一些函数(例如 alert 方法等)。

为什么会这样呢?

详细看测试页面://www.r5qgb.cn/demo/isfunction/

会发现在 IE 下用 typeof 检测 alert、confirm 方法以及 DOM 的方法显示 object,而其他浏览器下显示 function。

那如何完善这个问题呢?

  1. typeof 检测某个方法(例如:document.getElementById) 是否是 object,如何是,则重写 isFunction 函数;
  2. 怎样重写呢?正则判断传入的对象字符串后(”” + fn),是否起始位置含有 function,即:/^\s*\bfunction\b/.test(” + fn)。

OK,看下根据以上思路修改后的 isFunction 函数:

var isFunction = (function() {
    // Performance optimization: Lazy Function Definition
    return "object"  === typeof document.getElementById ?
           isFunction = function(fn){
                try {
                    return /^\s*\bfunction\b/.test("" + fn);
                } catch (x) {
                    return false
                }
           }:
           isFunction = function(fn){
               return "[object Function]" === Object.prototype.toString.call(fn);
           };
})()

参考阅读:

如何将函数的实际参数转换成数组

实际参数在函数中我们可以使用 arguments 对象获得 (注:形参可通过 arguments.callee 获得),虽然 arguments 对象与数组形似,但仍不是真正意义上的数组。

值得庆幸的是,我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组:

var args = Array.prototype.slice.call(arguments, 0);

对于slice 方法,ECMAScript 262 中 15.4.4.10 Array.prototype.slice (start, end) 章节有备注:

The slice function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the slice function can be applied successfully to a host object is implementation-dependent.

《Pro JavaScript Design Patterns》(《JavaScript 设计模式》)的作者 Dustin Diaz 曾指出:

instead of…
var args = Array.prototype.slice.call(arguments, 0); // 怿飞注:下称方法一
do this…
var args = [].slice.call(arguments, 0); // 怿飞注:下称方法二

但二者的性能差异真的存在吗?经过个人简单测试发现:

arguments.length 较小的时候,方法二性能上稍有一点点优势,而在arguments.length 较大的时候,方法一却又稍有优势。

2010年1月30日更新(测试地址):几经验证,性能差异不大,反而第一张方法性能稍优势一点,或许由于第二种方法创建新数组产生开销。

最后附上方法三,最老土的方式:

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push(arguments[i]);
}

不过对于平常来说,个人建议使用第一种方法,但任何解决方案,没有最好的,只有最合适:

var args = Array.prototype.slice.call(arguments, 0); 

------------------------------------------------------------------

如何将 NodeList (比如:document.getElementsByTagName('div'))转换成数组呢?

解决方案简单如下:

function nodeListToArray(nodes){  
    var arr, length;
    
    try {  
        // works in every browser except IE  
        arr = [].slice.call(nodes); 
        return arr;  
    } catch(err){  
        // slower, but works in IE  
        arr = [];  
        length = nodes.length;
        
        for(var i = 0; i < length; i++){  
             arr.push(nodes[i]);
         }  
    
        return arr; 
    }  
} 

为什么 IE 中 NodeList 不可以使用 [].slice.call(nodes) 方法转换呢?

In Internet Explorer it throws an error that it can't run Array.prototype.slice.call(nodes) because a DOM NodeList is not a JavaScript object.

删除数组中重复项(uniq)

首先让我们看下 YUI 是如何处理的:

var toObject = function(a) {
    var o = {};
    for (var i = 0; i < a.length; i = i+1) {
     o[a[i]] = true;
    }
    return o;
};

var keys = function(o) {
    var a=[], i;
    for (i in o) {
        if (lang.hasOwnProperty(o, i)) { // YUI的方法
            a.push(i);
        }
    }
    return a;
};

var uniq = function(a) {
    return keys(toObject(a));
};

详细分析,见同事 长天 的分享 《巧妙去除数组中的重复项》。

自己使用的方式与 YUI 的方式十分相似,不过仅使用了一次循环便完成了删除数组中重复项,如下:

var uniq = function (arr) {
    var a = [],
        o = {},
        i,
        v,
        len = arr.length;

    if (len < 2) {
        return arr;
    }

    for (i = 0; i < len; i++) {
        v = arr[i];
        if (o[v] !== 1) {
            a.push(v);
            o[v] = 1;
        }
    }

    return a;
}

经过了简单的测试:自己使用的方式性能远远高于 YUI 的方式。

抛砖引玉,欢迎大家提供更好的处理方法。

2009年12月28日更新:

以上两种函数方法暂时都不能处理复杂的含有混合类型的数组(感谢 小猫 提出的疑问),如:[0,"0",1,"1",0]、["null",null]。

对于能够约定类型为数字(注:要求非0开头的数字,小数除外)或字符串的数组,我们可以用改进后的函数方法(感谢 closurecache 提供的思路):

var uniq = function (arr) {
    var a = [],
        o = {},
        i,
        v,
        cv, // corrected value
        len = arr.length;

    if (len < 2) {
        return arr;
    }

    for (i = 0; i < len; i++) {
        v = arr[i];

        /* closurecache 提供的函数中使用的是  cv = v + 0;,
         * 这样就无法辨别类似[1, 10, "1", "10"]的数组,
         * 因为运算后 => 1, 10, 10, 100,很明显,出现了重复的标示符。
         * 加前面就难道没问题吗?
         * 有的:数组中不能出现类似01 、001,以 0 开头的数字,
         * 但适用性比原先更广。
         */
        cv = 0 + v;

        if (!o[cv]) {
            a.push(v);
            o[cv] = true;
        }
    }

    return a;
}

如果大家想在此解题思路的基础上,更完美一点,推荐 Dexter.Yy 的方法,进行类型判断,给予唯一标示符,详见 评论 20 楼。

没有最好,只有最合适的方式,其实使用 Array.indexOf() 的思路也是不错的选择,对于已经支持的浏览器直接用原生的 Array.indexOf() 方法,对于未支持的,我们增加 Array.indexOf() 方法,如下:

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (obj, fromIndex) {
        if (fromIndex == null) {
            fromIndex = 0;
        } else if (fromIndex < 0) {
            fromIndex = Math.max(0, this.length + fromIndex);
        }

        for (var i = fromIndex; i < this.length; i++) {
            if (this[i] === obj)
                return i;
            }
        return -1;
    };
}

接下来,实现的过程就非常简单了。

对于使用 Array.indexOf() 方法实现方案的优化提示:找到相同值时,从数组中移除,以减少下次遍历的量。

第4届D2前端技术论坛开始报名

2005年前端工程师的职位开始在中国出现,2007年第一届D2前端技术论坛在杭州举行,从此D2伴随着中国的前端一起成长,从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。

在D2上我们曾交流过某项具体的前端技术,也曾探讨过团队协作的方式,那些美妙的话题都深入到我们频繁敲键盘的指尖?;厥孜颐枪ニ哪甑募岢趾兔蜗?,现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候,我们自己也在悄然发生质变,而推动这些变化的人和事正是D2想告诉你的。

?
  • 凰家街采:你期待的长江时代 ——凤凰网房产武汉 2018-07-26
  • 反思顾雏军案,营造可预期的法治环境 2018-07-26
  • 广图:神“摄”手初养成计划:摄影师爸爸成长篇 2018-07-26
  • 女性之声——全国妇联 2018-07-25
  • 习近平与人民日报那些事 2018-07-25
  • 新IP--河北频道--人民网 2018-07-25
  • 新时代领导干部应急管理能力提升的实践与思考 2018-07-25
  • 证监会答复投资者信息检索库 2018-07-24
  • 款款粽子情,深深敬老人 2018-07-24
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2018-07-24
  • 邓紫棋首任明星制作人 吴亦凡身兼二职 2018-07-23
  • 地铁上索座不成 蛮横老汉掌掴大妈 2018-07-23
  • 发现食品安全问题拨打12331投诉 2018-07-23
  • 莆田市:建立“网上大调解中心”经验做法 2018-07-22
  • 火锅店推120元月卡11天被吃垮:8点就排队,一卡全家用 2018-07-22
  • 559| 170| 528| 265| 532| 487| 839| 919| 924| 3|