jQuery内部原理和实现方式浅析


Posted in Javascript onFebruary 03, 2015

这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQuery的大牛越来越多,学习的资料也比前两年好找了,有很多非常不错的资源,如高云的jQuery1.6.1源码分析系列。这些教程非常细致的分析了jQuery内部原理和实现方式,对学习和理解jQuery有非常大的帮助。但是个人认为很多教程对jQuery的整体结果把握不足,本人试图从整体来阐述一下jQuery的内部实现。

大家知道,调用jQuery有两种方式,一种是高级的实现,通过传递一个参数实现DOM选择,如通过$(“h1″)选择所有的h1元素,第二种是较为低级的实现,如果通过$.ajax实现ajax的操作。那么,这两种方式到底有何不同?用typeof函数检测$(‘h1′)和$.ajax,类型分别为object和function,稍微学过jQuery的都知道或者听过过,前者返回的是一个jQuery对象,那么jQuery对象是什么,它和jQuery是什么关系呢?我们先来通过for(var i in $(”)) document.write(i+” :::”+$(“”)[i]+””);打印一下jQuery对象的属性和对应的值,可以看到它有100多个属性,通过console输入$(“*”)可以看到大部分属性是继承自jQuery原型的属性,jQuery对象实际上是这样一个对象:

jQuery内部原理和实现方式浅析

所以我们来推测,jQuery的实现可能是类似这样的:

function jQuery(){
 this[0]="Some DOM Element";
 this[1]="Some DOM Element";
 this[2]="Some DOM Element";
 this.length=3;
 this.prevObject="Some Object";
 this.context="Some Object";
 this.selector="Some selector";
}
jQuery.prototype={
get:function(){},
each:function(){},
......
}

这些代码通过new操作符就就能创建出拥有上述属性的jQuery对象,但是实际上我们调用jQuery创建jQuery对象时并没有使用new操作符,这是如何实现的呢?来看jQuery的实现:

var jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn=jQuery.prototype={
 jquery: core_version,
 init:function(selector,context){
 //some code
 return this;
 }
 //some code there
 //......
}
jQuery.fn.init.prototype=jQuery.fn;

这里有几点做得非常巧妙的地方,第一点是通过jQuery原型属性的init方法来创建对象来达到不用new创建对象的目的,第二点是对init方法内this指向的处理。我们知道,通过调用init返回一个jQuery的实例,那么这个实例就必须要继承jQuery.prototype的属性,那么init里面这个this, 就继承jQuery.prototype的属性。但是init里面的this,受制于作用域的限制,并不能访问jQuery.prototype其它的属性,jQuery通过一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,这样以来,init产生的jQuery对象就拥有了jQuery.fn的属性。

到这里,一个jQuery的基本原型就浮出水面了。这里有两个对象,一个是jQuery这个构造函数,另外一个是这个构造函数产生的对象(我们称之为jQuery对象,它和普通对象没有什么区别), 如下关系图:

jQuery内部原理和实现方式浅析

可以看到jQuery构造函数和jQuery.prototype均有各自的属性和方法,两者的调用方法各不一样,这两个对象都有一个extend方法,都是用来扩展自身的属性和方法,在jQuery内部,extend的实现实际是靠一样的代码, 将在后面的源码分析中做以详细的分析。

Javascript 相关文章推荐
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
jQuery中extend函数的实现原理详解
Feb 03 #Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 #Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 #Javascript
JavaScript闭包详解
Feb 02 #Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 #Javascript
javascript的switch用法注意事项分析
Feb 02 #Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 #Javascript
You might like
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
php命令行模式代码实例详解
2021/02/26 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
2013/05/15 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
javascript常用方法总结
2015/05/14 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
会计职业生涯规划范文
2014/01/04 职场文书
六一节目主持词
2014/04/01 职场文书
购房协议书范本
2014/10/02 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
公司庆典主持词
2015/07/04 职场文书
单位提档介绍信
2015/10/22 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python