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学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
element跨分页操作选择详解
Jun 29 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
Opacity.js
2007/01/22 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Python操作SQLite简明教程
2014/07/10 Python
Python socket编程实例详解
2015/05/27 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
关于python多重赋值的小问题
2019/04/17 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
幼儿园数学教学反思
2014/02/02 职场文书
学习经验交流会主持词
2014/04/01 职场文书
个人贷款担保书
2014/04/01 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
学校通报表扬范文
2015/05/04 职场文书
小学六一主持词开场白
2015/05/28 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS