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

这段时间在学习研究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的实现可能是类似这样的:

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.prototype均有各自的属性和方法,两者的调用方法各不一样,这两个对象都有一个extend方法,都是用来扩展自身的属性和方法,在jQuery内部,extend的实现实际是靠一样的代码, 将在后面的源码分析中做以详细的分析。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 实现方式
内部原理
netty实现原理浅析、jquery实现原理、jquery的实现原理、jquery选择器实现原理、jquery ajax实现原理,以便于您获取更多的相关知识。

时间: 2024-09-17 17:48:24

jQuery内部原理和实现方式浅析_jquery的相关文章

jQuery绑定事件-多种实现方式总结_jquery

jQuery绑定事件-多种实现方式总结 <html> <head> <meta charset="utf-8" /> <script src=https://pan.baidu.com/s/1o8GiuOq?qq-pf-to=pcqq.c2c></script> </head> <body> <input type="text"/> <input type=&quo

jquery重复提交请求的原因浅析_jquery

一般来说有两个原因: 1.第一种是没有取消绑定,例如$("#test").unbind("click");$("#test").click(function(){....}); 2.是因为在不同的页面多次引用同一个js文件,这样也有可能会造成重复提交请求.

jquery原理以及学习技巧介绍_jquery

对于JQuery,想必大家都很熟悉.目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发.JQuery上手简单,也很容易学,即使是刚接触JQuery的开发人员,借助JQuery手册,也很快能在项目中使用开发. 虽然JQuery相对简单,但要全面掌握,且快速灵活的使用它也并不那么容易,它提供了很多方法,包含了网页开发的各个知识面,所以要全面掌握这些知识点,个人认为还是需要对jquery有深入的理解,对这

jQuery绑定事件的四种方式介绍_jquery

jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

JS两种定义方式的区别、内部原理_基础知识

相信两种方式大家都用过,但未必所有人都知道其 区别,内部原理. 复制代码 代码如下: // 方式1 function func1(x,y){ // your code } // 方式2 var func2 = function(x,y){ // your code } 方式1 是典型的函数声明(Function declarations). 方式2 是函数表达式(Function expressions),将一个匿名函数赋值给一个变量.或者说方式2中创建了一个具有形参为x,y的匿名函数,然后把该

多种jQuery绑定事件的实现方式_jquery

最近发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_but

jquery学习总结(超级详细)_jquery

window.onload $(document).ready() 执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 编写个数 不能同时编写多个,以下代码无法正确执行:window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出"test2&quo

Apache Storm内部原理分析

本文算是个人对Storm应用和学习的一个总结,由于不太懂Clojure语言,所以无法更多地从源码分析,但是参考了官网.好多朋友的文章,以及<Storm Applied: Strategies for real-time event processing>这本书,以及结合自己使用Storm的经历,希望对于想深入一点了解Storm原理的朋友能有所帮助,有不足之处欢迎拍砖交流. Storm集群架构 Storm集群采用主从架构方式,主节点是Nimbus,从节点是Supervisor,有关调度相关的信息

JVM内部原理

JVM内部原理 原文链接 原文作者:James D Bloom 翻译:梅小西(904516706)  校对:吴京润   这篇文章详细描述了Java虚拟机的内在结构.下面这张图来自<The Java Virtual Machine Specification Java SE 7 Edition>,它展示了一个典型的JVM的主要的内部结构. 接下来的2个部分,将详细介绍这幅图中所有组成结构. 第一部分涵盖了每个线程都会生成的结构, 第二部分 涵盖了单独的每个线程生成的结构. 线程 JVM 系统线程