谈一谈jQuery核心架构设计


Posted in Javascript onMarch 28, 2016

jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javascript中的高级特性来构建如此伟大的javascript库。

1 初识jQuery

从核心功能来看,jQuery仅仅做了一件简单而又平凡的事:查询。它的语法如此简洁明了,以致于很多人在不知道javascript是什么的时候就已经会用jQuery了,用一个词形容就是:大道至简。 从设计层面来看,我们可以将jQuery提供方法分为两大类:静态方法和实例方法。静态方法就是直接通过$访问的方法,这些方法一般不对dom元素操作,而是提供了一些常用的工具,比如ajax请求、以及对字符串的一些常用操作,除此之外,jQuery还提供了对自身的扩展机制,你可以通过extend方法来编写你需要的组件。而实例方法和静态方法不一样,它是用来对jQuery查询的DOM元素进行操作,jQuery执行$()会构建一个jQuery对象,这个对象以数组的方法存储查询出的所有DOM元素,然后在这个对象的原型链上实现了对这些DOM操作的方法,比如each()方法就是用来遍历每一个DOM元素的。你可能会注意到,我刚说这个对象“以数组的方式”存储,那就是说,jQuery构建的这个对象不是数组,那这个对象到底是什么? 其实这个对象就是jQuery的核心,也被称作“jQuery对象”。因此,本文的重点就是对jQuery对象进行分析和讨论。

2 jQuery对象

一般情况下,我们会这样使用jQuery:

$('div').each(function(index){
  //this ...
});

$('div')执行完后回返回一个jQuery对象,each()方法是对这个对象中的DOM元素进行遍历,我们先看看$('div')的执行过程(本文源码摘自jQuery 3.0):

jQuery = function( selector, context ) {
 
 return new jQuery.fn.init( selector, context );

}

这个方法就是$('div')的入口方法,$是jQuery的简写,就相当于jQuery('div') ,可以看出,这个方法只做了一件事,那就是返回jQuery.fn.init()函数的实例对象,那jQuery.fn.init 又是什么呢,我们再看下面的代码:

init = jQuery.fn.init = function( selector, context, root ) {
 //... 
 return this;
}
init.prototype = jQuery.fn;

jQuery.fn.init和init引用了同一个方法,这个方法根据selector查询出符合条件的DOM元素,并返回,可你会发现,返回的是this,这个this是什么呢?我们待会分析,先看下面的这句话:

init.prototype = jQuery.fn;
这句话是什么意思呢,这句话是让init方法的prototype对象指向了jQuery.fn对象,那jQuery.fn又是什么鬼? 我们继续看代码:

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },
  
 splice: arr.splice
};

为了节省篇幅,我省略了其中一些代码,从这里可以看出,jQuery.fn 其实就是jQuery的原型对象,这个原型对象中定义了一些对this对象进行操作的方法。到这里,你是不是感觉到有点绕,不要着急,我们来梳理一下思路:jQuery首先定义了一个init方法,然后在init的原型对象prototype上定义了一系列操作方法。最后将init方法的实例对象返回。所以上面的过程可以简化如下(伪代码表示):

var init = function(selector,context,root){
 //...
 return this;
}

init.prototype = {
 length:0,
 each:function(callback){
  //...
 },
 splice:[].splice
}

jQuery = function(selector,context,root){

 return new init(selector,context,root);
}

那么问题来了,jQuery.fn中的方法为什么不直接定义在init的prototype上,而要定义在jQuery的原型对象上?

其实,这样做的目的是为了提高jQuery的查询效率,如果直接定义在init的prototype对象上,那么每执行一次查询,就会在内存中创建这样一个庞大的prototype对象,而如果把这个对象定义在jQuery的prototype上,在jQuery加载时,这个对象就会被初始化并一直存在于内存中,以后每次执行$()时,只需要将init中的prototype指向这个对象就可以了,而不用每次都去创建一遍相同的对象。

我们再来看看 init 函数中返回的 this 到底是什么,我在之前的博客中讲过,函数中的this总是指向运行期的调用者,那init的调用者是谁呢?在上面代码中似乎找不到调用者,这时我们就需要深入的理解new运算符的运行机制了,借用我之前在博客中对new运算符的描述,我们对new init()的执行过程进行如下分解:

new init(selector,context,root) = {

 var obj = {};

 obj.__proto__ = init.prototype;

 init.call(obj,selector,context,root);

 return typeof result === 'obj'? result : obj;

}

如果对new的运行机制不理解的请参考博文: javascript new 的运行机制

从上述分解过程可以看出,javascript在通过 new 来创建一个实例对象的时候,会先创建了一个普通对象obj,然后将obj的内部属性__proto__指向了init的原型对象,因此obj的原型链将被改变,而第3步使用call方法调用init(),所以init中的this指的就是这里的obj对象。

init()执行以后,会将匹配到的所有DOM对象以数组的方式存储到this对象中并返回,也就是返回了obj对象,而new运算符最终也会将这个 obj 对象返回以作为新的实例对象。所以new运算符返回的这个实例对象具备两个特点:一是包含了DOM查询结果集,二是其原型链继承了init的prototype,而 init 的 prototype 又指向了jQuery.fn对象,因此实例对象也具备了这些操作方法。

jQuery每执行一次查询就会创建一个jQuery对象,而在同一个应用程序中,所有jQuery对象都会共享同一个jQuery原型对象。因此,jQuery对象不仅包含了DOM查询结果集,还继承了jQuery原型对象上的操作方法。这样,你就可以在查询后直接调用方法来操作这些DOM元素了。这就是jQuery的核心架构设计,简单、方便、实用!

如果你还不理解上面的讲解,不要着急,我按照jQuery的设计思路写了一个完整的小项目jDate,你可以对比着理解!jDate项目已上传至GitHub,你可以点击这里查看完整代码:jDate ,如有不同见解,欢迎讨论!

3 jQuery 的缺陷

通过对jQuery的核心架构分析,我们会发现,每执行一次查询,jQuery就要在内存中构建一个复杂的jQuery对象,虽然说每个jQuery对象都共享同一个jQuery原型,但jQuery的查询过程远比你想象的要复杂,它既要考虑各种不同的匹配标识,同时又要考虑不同浏览器的兼容性。因此,如果你只是对DOM做一些简单的操作,建议使用原生方法 querySelector 替代 jQuery,不过在使用原生方法时,对于不同的应用场景你可能要做一些兼容性的工作,你要学会取舍,不要过度依赖jQuery!

以上就是本文的全部内容,希望对大家学习jquery有所启发。

Javascript 相关文章推荐
纯js实现遮罩层效果原理分析
May 27 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
JavaScript常用本地对象小结
Mar 28 #Javascript
Bootstrap 粘页脚效果
Mar 28 #Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 #Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 #Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 #Javascript
You might like
php删除数组元素示例分享
2014/02/17 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python实现ATM系统
2020/02/17 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
市场营销管理制度
2014/01/29 职场文书
活动策划邀请函
2014/02/06 职场文书
村安全生产责任书
2014/08/25 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python