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 相关文章推荐
如何编写高质量JS代码(续)
Feb 25 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 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
239军机修复记
2021/03/02 无线电
php中++i 与 i++ 的区别
2012/08/08 PHP
5 cool javascript apps
2007/03/24 Javascript
js 与或运算符 || && 妙用
2009/12/09 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
详解python 注释、变量、类型
2018/08/10 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python requests.post带head和body的实例
2019/01/02 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python 怎样进行内存管理
2020/11/10 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
华为慧通面试题
2012/09/11 面试题
八一演出活动方案
2014/02/03 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
退学证明范本3篇
2014/10/29 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android