热门关键字:
jquery > jquery教程 > jquery教程 > jQuery 基础知识总结

jQuery 基础知识总结

358
作者:管理员
发布时间:2021/8/26 18:35:57
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5336
  大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式,直接 $(’’) 进行构造,这也是 jQuery 十分便捷的一个地方。当我们使用第一种无 new 构造方式的时候,其本质就是相当于 new jQuery(),那么在 jQuery 内部是如何实现的呢?看看:


  大部分人初看


  jQuery.fn.init.prototype = jQuery.fn


  这一句都会被卡主,很是不解。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要,分点解析一下:


  首先要明确,使用 $(‘xxx’) 这种实例化方式,其内部调用的是?return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了?jQuery.fn.init() 方法去完成。


  将 jQuery.fn.init 的 prototype 属性设置为 jQuery.fn,那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ,所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上,所有使用?new jQuery.fn.init()?生成的对象也能够访问到?jQuery.fn 上的所有原型方法。


  也就是实例化方法存在这么一个关系链


  jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;


  new jQuery.fn.init() 相当于 new jQuery() ;


  jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以这 2 者是相当的,所以我们可以无 new 实例化 jQuery 对象。


  四、jQuery 方法的重载


  1、方法重载基本介绍


  jQuery 源码晦涩难读的另一个原因是,使用了大量的方法重载,但是用起来却很方便:


  2、应用场景


  方法的重载即是一个方法实现多种功能,经常又是 get 又是 set,虽然阅读起来十分不易,但是从实用性的角度考虑,这也是为什么 jQuery 如此受欢迎的原因,大多数人使用 jQuery() 构造方法使用的最多的就是直接实例化一个 jQuery 对象,但其实在它的内部实现中,有着 9 种不同的方法重载场景:


  所以读源码的时候,很重要的一点是结合 jQuery API 进行阅读,去了解方法重载了多少种功能,同时我想说的是,jQuery 源码有些方法的实现特别长且繁琐,因为 jQuery 本身作为一个通用性特别强的框架,一个方法兼容了许多情况,也允许用户传入各种不同的参数,导致内部处理的逻辑十分复杂,所以当解读一个方法的时候感觉到了明显的困难,尝试着跳出卡壳的那段代码本身,站在更高的维度去思考这些复杂的逻辑是为了处理或兼容什么,是否是重载,为什么要这样写,一定会有不一样的收获。其次,也是因为这个原因,jQuery 源码存在许多兼容低版本的 HACK 或者逻辑十分晦涩繁琐的代码片段,浏览器兼容这样的大坑极其容易让一个前端工程师不能学到编程的精髓,所以不要太执着于一些边角料,即使兼容性很重要,也应该适度学习理解,适可而止。


  五、jQuery.fn.extend 与?jQuery.extend


  1、基本分析


  extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它。但是在内部,是存在?jQuery.fn.extend 和?jQuery.extend 两个 extend 方法的,而区分这两个 extend 方法是理解 jQuery 的很关键的一部分。先看结论:


  jQuery.extend(object)?为扩展 jQuery 类本身,为类添加新的静态方法;


  jQuery.fn.extend(object)?给 jQuery 对象添加实例方法,也就是通过这个 extend 添加的新方法,实例化的 jQuery 对象都能使用,因为它是挂载在 jQuery.fn 上的方法(上文有提到,jQuery.fn = jQuery.prototype )。


  2、官方解释


  它们的官方解释是:


  jQuery.extend(): 把两个或者更多的对象合并到第一个当中,


  jQuery.fn.extend():把对象挂载到 jQuery 的 prototype 属性,来扩展一个新的 jQuery 实例方法。


  也就是说,使用?jQuery.extend() 拓展的静态方法,我们可以直接使用 $.xxx 进行调用(xxx是拓展的方法名),


  而使用?jQuery.fn.extend()?拓展的实例方法,需要使用 $().xxx 调用。


  源码解析较长:


  需要注意的是这一句?jQuery.extend = jQuery.fn.extend = function() {} ,也就是 jQuery.extend 的实现和 jQuery.fn.extend 的实现共用了同一个方法,但是为什么能够实现不同的功能了,这就要归功于 Javascript 强大(怪异?)的 this 了。


  在?jQuery.extend() 中,this 的指向是 jQuery 对象(或者说是 jQuery 类),所以这里扩展在 jQuery 上;


  在?jQuery.fn.extend() 中,this 的指向是?fn 对象,前面有提到 jQuery.fn = jQuery.prototype ,也就是这里增加的是原型方法,也就是对象方法。


  六、jQuery 的链式调用及回溯


  另一个让大家喜爱使用 jQuery 的原因是它的链式调用,这一点的实现其实很简单,只需要在要实现链式调用的方法的返回结果里,返回 this ,就能够实现链式调用了。


  当然,除了链式调用,jQuery 甚至还允许回溯,看看:


  搞定算法,面试字节再不怕,有需要文章中分享的这些二叉树、链表、字符串、栈和队列等等各大面试高频知识点及解析,以及算法刷题LeetCode中文版的小伙伴们可以点赞后点击这里即可免费获取!


  另一个让大家喜爱使用 jQuery 的原因是它的链式调用,这一点的实现其实很简单,只需要在要实现链式调用的方法的返回结果里,返回 this ,就能够实现链式调用了。


  当然,除了链式调用,jQuery 甚至还允许回溯,看看:


  搞定算法,面试字节再不怕,有需要文章中分享的这些二叉树、链表、字符串、栈和队列等等各大面试高频知识点及解析,以及算法刷题LeetCode中文版的小伙伴们可以点赞后点击这里即可免费获取!


  最后再分享一份终极手撕架构的大礼包(学习笔记):分布式+微服务+开源框架+性能优化




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐