读jQuery源码发现的18个惊奇之处 - Lidong's site 李东的博客

读jQuery源码发现的18个惊奇之处

我喜欢jQuery, 尽管我认为我是个还可以的js开发工程师,但我之前从来没有从头到尾的读过jQuery的源码,这里有一些通过通过阅读jQuery的源码所学到的东西。

Note:我在这里使用$.fn.method()来代表具体的相应的方法,比如当我说$.fn.addClass时,就代表着像$(‘div’).addClass(‘blue’)或者$(‘a.active’).addClass(‘in-use’)的方法。$.fn是jQuery对象的原型。

1.Sizzle的大小:Sizzle是jQuery使用的基于css选择器的DOM选择引擎。它会把$(‘div.active’)转换为字符串来让你可以操作。我知道Sizzle是jQuery中很重要的一部分,但是我想知道它在jQuery的源码中的比重到底有多大。它是jQuery源码中最大的一个单独的分支,但是我算了下它大概只占源码体积的22%。下一个比较大的代码分支是$.ajax,然而它也只占源码体积的8%。

2.$.grep:这个方法有些类似于_.filter,它需要一个带过滤的数组和一个处理函数,返回的是处理后的元素。

3.冒泡警告:jQuery特别的会阻止一种事件的冒泡,那就是load事件。对于所有的load事件,jQuery会传递一个特殊的noBubble: true标识,这样的话,image的load事件就不会冒泡到window的load事件了。

4.默认的animation的速度:jQuery是通过改变一个元素的样式属性来实现的动画,在这个动画变化中的每一点叫做一个"tick"。在jQuery中执行每一个tick的默认时间是13毫秒,你可以通过jQuery.fx.interval方法来重写它。

5.$.fn.addClass可以接受一个function:我们通常是使用一个string作为参数来使用$.fn.addClass来给元素增加一个类名,但是它也是可以接受一个function的。但是这个function必须返回用空格分隔开的string来应用到相应的元素上。此外,这个函数还会接收相应元素的index作为参数,这样给元素们添加序列化的类名了。

6.那么对于$.fn.removeClass:它一样的可以接受一个function作为参数,同样也会自动的传入元素的index作为参数。

7.:empty伪类选择器:这个方便的选择器会一起匹配到他们的children。

8.:lt和:gt伪类选择器:这些选择器是根据他们的Index来匹配的,比如,$(‘div:gt(2)’)就会返回div元素中除了前三个的元素。如果传值是一个负数,它就会从最后来开始算。

9.$(document).ready() 使用了一个承诺$(document).ready()使用了一个jQuery的延迟来确定什么时候DOM已经被完全的加载。

10.$.type:我确定大家都知道用typeof来判断一个对象的类型,但是你知道jQuery也提供了一个.type()的方法么。jQuery的版本比本地浏览器的版本聪明的多,typeof (new Number(3))返回的是"object",但是$.type(new Number(3)) 返回的是"number"。$.type是返回的接收到的对象的.valueOf() 的类型,那么更加准确的说法就是$.type返回的是接收对象的value的值。

11.$.fn.queue:你可以使用$(‘div’).queue()来检查一个函数的执行队列。这是一个很有用的方法如果你想要指导剩余的元素执行队列的话。你可以直接操纵队列来增加你自己的方法。

$( document.body ).click(function() {
$( "div" )
  .show( "slow" )
  .animate({ left: "+=200" }, 2000 )
  .queue(function() {
    $( this ).addClass( "newcolor" ).dequeue();
  })
  .animate({ left: "-=200" }, 500 )
  .queue(function() {
    $( this ).removeClass( "newcolor" ).dequeue();
  })
  .slideUp();
});
12.disabled的元素会阻止点击事件:对于disabled的元素,jQuery会自动的阻止点击事件,这样的话就不用你来写很多代码去判断了。

13.$.fn.on可以接受一个对象$.fn.on可以接受一个对象来同时绑定多个事件。
$( "div.test" ).on({
click: function() {
  $( this ).toggleClass( "active" );
}, mouseenter: function() {
  $( this ).addClass( "inside" );
}, mouseleave: function() {
  $( this ).removeClass( "inside" );
}
});
14.$.camelCase:这个方法会将'-'分隔的string转化为驼峰的string。

15.$.active:调用$.active会返回当前活跃的XHR队列。这个方法可以有效的来限制同一时间的ajax请求数。

16.$.fn.parentsUntil / $.fn.nextUntil / $.fn.prevUntil:我们都很熟悉.parents(), .next(), 和.prev()方法,但是对于其他版本的方法不是很熟悉。这几个方法会一直匹配相应的元素指导遇到你写的停止的方法。

17.$.fn.clone参数:当你使用.clone()方法时,如果把第一个参数设置为true的话,就可以同时复制它的属性和事件了。

18.更多的$.fn.clone参数:你可以再传一个true参数来同时拷贝其children的属性和方法,这个就叫做深拷贝。

译自http://quickleft.com/blog/18-surprises-from-reading-jquery-s-source-code

LEAVE A COMMENT

Name:*

E-Mail:*

Website:

Message:*

Required fields are marked *

Post Comment