谈一谈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中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
javascript实现商品图片放大镜
Nov 28 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
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
javascript静态的url如何传递
2007/05/03 Javascript
javascript prototype 原型链
2009/03/12 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
weblogic面试题
2016/03/07 面试题
拆迁委托协议书
2014/09/15 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
详解Oracle块修改跟踪功能
2021/11/07 Oracle
Tomcat弱口令复现及利用
2022/05/06 Servers