读jQuery源码之三(extend)

源码177-527行:jQuery.extend方法
1. jQuery.extend的功能是合并多个对象的属性到第一个对象,第一个参数用来表示是否递归合并,不过我真没看出来有什么场景使用,我试过很多种合并,true和false都是一样的结果,如果你有可以区分的例子,麻烦留言告诉我。

2.如果只传一个参数,则目标对象为jQuery对象,传入的参数会完全合并到jQuery对象或jQuery.fn里面,相当于给jQuery对象或jQuery.fn扩展了方法和属性。jQuery里面大部分扩展也是这样做的。比如242行开始的就是一个jQuery内部对extend方法的使用,只传了一个参数(扩展jQuery方法和属性)

这里需要注意一点,如果是使用jQuery.extend(),扩展到了jQuery对象上,如果是使用jQuery.fn.extend(),则扩展到了jQuery原型对象上.

3.因为参数个数不限定,所以这里没有设置参数,函数里面用arguments来获取传入的参数。方法里面的细节不用探究,自己实现一个合并两个参数的方法就清楚该咋做了。

4.涉及的几个判断方法

①jQuery.isFunction:通过toString.call(this)来判断类型,返回一个去掉了object的类型字符串

②jQuery.isArray:直接使用元素的Array.isArray方法判断

③jQuery.isPlainObject:判断obj是否为{},new Object()创建

5.isNumeric判断是否为Number:这里用了一个非常巧妙的方式使用(obj – parseFloat( obj ) + 1) >= 0并且排除包含一个数字元素的数组

6.jQuery.each:遍历数组或类数组,对象。

7.guid:初始值为1,用于事件和缓存模块,使用时+1

8.proxy:给函数绑定一个上下文,就是改变this的指向(因为this指的就是当前上下文)

这个方法里面其实就是把我们传入的对象,使用我们传入的函数.apply,把传入的上下文作为this参数调用该函数。这样就达到了改变函数的this指向的问题。当然完全可以用原生的方法apply或call方法

9.support:用来检测兼容性

接下来的553-2611行都是Sizzle引擎的内容,这部分我也选取一些来分享,因为就个人而言,特别是H5里面新增了document.querySelector和document.querySelectorAll两个方法,支持css选择器,已经满足我们大部分需求。

那继续学习这块代码的目的对我来说就是熟悉里面的实现方式和思想,这个才是重要的。

待续。。。

作者:张雪飞
出处:https://zhangxuefei.site/p/32
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

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