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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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记录日志的实现代码
2011/08/08 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
JS验证不重复验证码
2017/02/10 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python yield 使用方法浅析
2017/05/20 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
军训拉歌口号
2014/06/13 职场文书
幼师大班个人总结
2015/02/13 职场文书
会计做账心得体会
2016/01/22 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL