jQuery到底干了什么

By admin in web前端 on 2019年9月3日
  1. 估值很三人都会用到jQuery中的each方法。

分析jQuery中的each方法

在看jQuery源码是怎么落到实处each方法从前,我们看一下js的原生达成。

 

ECMAScript
5为数组定义了二个forEach方法,该方法接受八个参数:第叁个参数是要在每四个数组项上运转的函数,第一个参数是运维该函数的功能域对象。第3个参数为非必填。作为第贰个参数的运行函数接受八个参数,分别是:数组项的值、该项在数组中的地点、数组自身。示例代码如下:

 

var aa = [1,2,3]

aa.forEach(function(item, index, array){

    console.log(“item:”+item)

    console.log(“index:”+index)

    console.log(array)

})

原生的主意,效能应该没难题。但是我们精心一想,那个原生方法恐怕不太符合用在大家的实在支出中。因为实在支出中我们平日会遇见满足某些条件跳出循环的景况。不可见break,这是原生方法的硬伤。怎么办?大家结合ECMAScript
5的概念本身写三个试试,何况让它也适应于对象。我写的大约代码如下:

 

复制代码

function forEach( object, callback, context ) {

    if ( typeof object.length ===”number” ){

        for ( var name in object ) {

            if (object.hasOwnProperty(name) && false === callback.call(
context, object[name], name, object ) ) break;

        }

    } else {

        for ( var i = 0, len = object.length; i < len; i++ ) {

            if (false === callback.call( context, object[i], i, object
) ) break; 

        }

    }

}

复制代码

函数的率先个参数是要循环的数组或对象,第三个参数是每项要实行的函数,第三项为非必填,为函数运行的功效域对象。这里最首要的转移正是当运维函数再次来到false时,即跳出循环。

 

还会有正是在循环对象的时候加了二个object.hasOwnProperty的推断,以管教是实例中的属性并非原型中的。

 

今昔我们再看下jQuery对each方法的贯彻,相比一下和我们写的有怎样两样。代码如下:

 

复制代码

    each: function( obj, callback, args ) {

        var value,

            i = 0,

            length = obj.length,

            isArray = isArraylike( obj );

 

        if ( args ) {

            if ( isArray ) {

                for ( ; i < length; i++ ) {

                    value = callback.apply( obj[ i ], args );

 

                    if ( value === false ) {

                        break;

                    }

                }

            } else {

                for ( i in obj ) {

                    value = callback.apply( obj[ i ], args );

 

                    if ( value === false ) {

                        break;

                    }

                }

            }

        } else {

            if ( isArray ) {

                for ( ; i < length; i++ ) {

                    value = callback.call( obj[ i ], i, obj[ i ] );

 

                    if ( value === false ) {

                        break;

                    }

                }

            } else {

                for ( i in obj ) {

                    value = callback.call( obj[ i ], i, obj[ i ] );

 

                    if ( value === false ) {

                        break;

                    }

                }

            }

        }

 

        return obj;

    }

复制代码

作者们看出jQuery完结的each方法的首先个参数也是要循环的数组或对象,第2个参数也是每项要推行的函数。分歧的是:

 

a、这里的第4个参数并非运作该函数的成效域对象。从代码中看这里的args,是传给运维函数的参数。这种用法不经常用,调用时相似用不到args。

 

b、循环数组或对象的每一样的值作为了运营函数的成效域对象,即运维函数里的this指向了obj[i]。

 

c、运营函数参数的顺序有所分歧,变成了第一”该项在数组中的地方“,再是”项的值“了。笔者以为依然先有value
再有 index(或key)会好一些。

 

d、在循环对象时从没进展hasOwnProperty的论断,这么些到底有不供给那?请权威引导一下!3Q。

 

e、还只怕有正是jQuery最终回来了要循环的指标。

 

 

在看jQuery源码是怎么落到实处each方法从前,大家看一下js的原生实现。
ECMAScript 5为数组定义了二个forEach方法,该方法接受…

那就来看一看jQuery都干了些什么。

找到jquery中的each源码:

复制代码 代码如下:

each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );

if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}

// A special, fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false
) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
}
}
}

return object;
},

这段代码照旧比较简单的,应该没什么难点.

为了测量试验那么些东西,笔者写了下边一段js;

复制代码 代码如下:

$.each($(“.demo”),function(){
console.log(“show”);
});

然后再加一段html:

复制代码 代码如下:

<a href=”” class=”demo”></a>
<a href=”” class=”demo”></a>
<a href=”” class=”demo”></a>

接下来拿着jQuery的源码来调治,感觉能得到精确的结果。不过很不满。
图片 1 
能够见到,这里的object竟然不是本人所想要的那七个html对象,竟然是js内置的8种数据类型。

之后在jquery的源码中加了一段代码:

复制代码 代码如下:

console.log(Object.prototype.toString(object));
console.log(length);

此后的输入如下:
图片 2 
也正是说在文档加载的时候,jQuery会用each遍历dom对象,即便未有利用

复制代码 代码如下:

$(function(){
});

当遍历钦定对象之后,还是会继续冒泡遍历父级成分。

  1. 依赖jQuery的源码使用回调函数参数

复制代码 代码如下:

$.each($(“.demo”),function(a,b){
console.log(a + “” + $(a).attr(“class”));
})

从源码能够看来:

复制代码 代码如下:

callback.call( object[ i ], i, object[ i++ ] )

最后都将日前指标通过call方法传递给了回调函数,那么就可以像下边同样去行使当前目的中的属性。当然也足以直接用this来调用。

若是说复杂些的事物,比方,这里本身是将$(“.demo”)作为object传递步入给$.each()

如里一些时候不是传递的jQuery只怕html对象。而是二个Object只怕array。

而在array中又存在重重别样的object或然措施。

那般就能够弄出越多的成效。

  1. 选用call或然apply完毕回调格局.

从上边包车型大巴代码能够看来:

复制代码 代码如下:

callback.call(obj,args)

复制代码 代码如下:

callback.apply([obj],args)

等等的代码,这里只须要传递callback函数,就会落到实处团结调用,那对于增加代码的复用程度用处十分的大。

然则也存在一些劣点,举例代码可读性减弱,耦合程度居高不下等。

偶有所得,以记录之,以免忘记!

. 猜度很五人都会用到jQuery中的each方法。
那就来看一看jQuery都干了些什么。 找到jquery中的each源码: 复制代码
代码如下: each: function( obje…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有