黑马程序员技术交流社区

标题: 【上海校区】jQuery框架解析 - 第一篇 - 基础框架 [打印本页]
作者: SH_Jepson    时间: 2017-11-28 16:45
标题: 【上海校区】jQuery框架解析 - 第一篇 - 基础框架
本帖最后由 SH_Jepson 于 2017-12-8 11:26 编辑

大家都知道在通过jQuery选择器获取页面对象的时候, 只需要  $('div')  就可以创建jQuery对象了,  但是实例化对象不是需要先 new 的么 ? 不是应该要 new $('div'), 才行吗 ? jQuery 内部是怎么实现这种效果的呢 ?
别着急, 先往下看一个小知识点

构造函数创建实例


这个不用多说, 大家肯定都会, 但是如果通过工厂函数, 创建实例要怎么写呢 ?

工厂函数创建实例



我们发现, 在创建实例的时候, 通过工厂函数创建实例, 可以不用 new!!!

哇塞, 我们直接 createPerson() 就可以创建实例了!

联想一下, jQuery中, $('div') 就可以创建实例了, 那 jQuery 在内部封装的时候, 是不是也是工厂函数呢 ?

嘿嘿, 我们带着好奇心, 来一起瞅瞅 jQuery 内部的源码实现!!

jQuery内部源码实现
jQuery版本3.0.0, 源码 86 - 95行


大家快看, 想象中应该很庞大的 jQuery 方法, 居然内容只有一句话,
就是 new jQuery.fn.init(...) !!!

jQuery 真的就是一个工厂函数! 真正的构造函数是 jQuery.fn.init 方法, 哈哈, 原理原来这么简单, jQuery 就是通过工厂模式来实例化对象的, 省去了 new 的过程

fn 又是什么呢 ?
jQuery版本3.0.0, 源码 110 - 122行


我们通过查看源码, 发现jQuery内部有一行, jQuery.fn = jQuery.prototype,
哦! fn 就是 jQuery的prototype的一个别名而已!
jQuery理念是 write less! do more! 写更少的代码, 做更多的事情

哈哈, 通过 jQuery.fn 访问 原型对象, 确实比 jQuery.prototype 更快捷一点, 原来如此

后面进行了原型替换, 指向了一个新的原型对象, 同时也手动添加一个 constructor 属性, 指回了 jQuery 函数

jQuery基础架子剖析
将一些核心点过完之后,  我们就可以将 jQuery的基本核心架子, 从 jQuery源码中剥离出来啦! 理解了核心架子之后, 我们就可以着手开始封装自己的jQuery框架啦!  

哈哈, 下面的代码, 你现在看看, 能看懂么 ?

上面的代码大部分应该都 ok, $就是jQuery的别名, 所以在源码中有一行 window.$ = window.jQuery = jQuery 这个应该没有问题
大家有疑问的应该就是一句话: init.prototype = jQuery.fn, 这句话是干什么用的呢 ?

jQuery版本3.0.0, 源码 2994 行



jQuery 源码核心架子中加这句话, 有何含义 ???

别着急, 我们通过绘制原型结构图来观察一下 !

哦! 我们发现,  jQuery工厂函数和 init 构造函数竟然共用了同一个原型!

这样共用同一原型有什么好处呢 ???  慢慢往下看, 你就懂了

给jQuery扩展方法
我们都知道, 给 jQuery 扩展方法是在 jQuery.fn (也就是prototype) 原型上添加方法, 我们平时用的很顺, 但是大家思考过没有 ? 实例是由谁构建出来的 ?

注意!!!  $('div') 实例 是由 init 构造函数创建出来的,

而这个 sayHi 方法是添加在 jQuery的原型对象上的,

所以 实例 应该只能访问到 init.prototype 原型上的方法, 应该访问不到 jQuery原型上的方法吧, 那为什么我们平时就是这么做没问题呀??? init实例就是可以访问到jQuery原型上的方法呀!

我们将扩展的 sayHi 方法 添加到原型结构图中, 再来观察一下!

天呐!  对了呀, jQuery工厂函数和 init 构造函数共用了同一个原型!!!  给 jQuery 原型扩展sayHi() 方法, 不就是给 init原型扩展方法嘛!  init构造出来的实例, 当然可以访问到 init的原型上的方法了呀!  原来如此!

jQuery 基础架子
好了, 现在大家再来瞅一眼jQuery的核心架子, 现在是不是觉得实现的很精妙呢
下一篇, 我们就要给我们自己的 jQuery 架子, 进行功能封装了哈, 尽请期待! 纯技术干货! 欢迎撒花点赞哈

作者: 小影姐姐    时间: 2017-12-8 11:39
作者: 不二晨    时间: 2018-7-20 11:07
优秀，奈斯



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2