这篇文章主要介绍了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内部原理和实现方式浅析的更多相关文章

  1. jquery ready方法实现原理 内部原理

    jquery ready方法实现原理 内部原理 今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下 ...

  2. Git内部原理浅析

    Git独特之处 Git是一个分布式版本控制系统,首先分布式意味着Git不仅仅在服务端有远程仓库,同时会在本地也保留一个完整的本地仓库(.git/文件夹),这种分布式让Git拥有下面几个特点: 1.直接 ...

  3. Android线程管理(三)——Thread类的内部原理、休眠及唤醒

    线程通信.ActivityThread及Thread类是理解Android线程管理的关键. 线程,作为CPU调度资源的基本单位,在Android等针对嵌入式设备的操作系统中,有着非常重要和基础的作用. ...

  4. ElasticSearch 学习记录之集群分片内部原理

    分片内部原理 分片是如何工作的 为什么ES搜索是近实时性的 为什么CRUD 操作也是实时性 ES 是怎么保证更新被持久化时断电也不丢失数据 为什么删除文档不会立即释放空间 refresh, flush ...

  5. Git详解之九:Git内部原理

    Git 内部原理 不管你是从前面的章节直接跳到了本章,还是读完了其余各章一直到这,你都将在本章见识 Git 的内部工作原理和实现方式.我个人发现学习这些内容对于理解 Git 的用处和强大是非常重要的, ...

  6. JVM内部原理

    这篇文章详细描述了Java虚拟机的内在结构.下面这张图来自<The Java Virtual Machine Specification Java SE 7 Edition>,它展示了一个 ...

  7. 深入剖析kafka架构内部原理

    1 概述 Kakfa起初是由LinkedIn公司开发的一个分布式的消息系统,后成为Apache的一部分,它使用Scala编写,以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cl ...

  8. JVM 内部原理(七)— Java 字节码基础之二

    JVM 内部原理(七)- Java 字节码基础之二 介绍 版本:Java SE 7 为什么需要了解 Java 字节码? 无论你是一名 Java 开发者.架构师.CxO 还是智能手机的普通用户,Java ...

  9. JVM 内部原理(六)— Java 字节码基础之一

    JVM 内部原理(六)- Java 字节码基础之一 介绍 版本:Java SE 7 为什么需要了解 Java 字节码? 无论你是一名 Java 开发者.架构师.CxO 还是智能手机的普通用户,Java ...

随机推荐

  1. 【laravel5.6】 Laravel 数据迁移给表和字段添加注释

    1 引用DB use Illuminate\Support\Facades\DB; 2 up方法 public function up() { Schema::create('code_table', ...

  2. 异常:Servlet class X is not a javax.servlet.Servlet

    使用Maven命令 mvn archetype:create 创建了一个简单的web项目.导入Eclipse运行时,报这样的异常信息: Servlet class X is not a javax.s ...

  3. 【Studio】解决格式化时,注释部分没有缩进的问题

    android studio默认代码格式化(默认Ctrl+Alt+L),是让注释从每行最左边开始显示,比如这样: 我个人喜欢注释也要缩进对齐.其实这个需要自己设置,打开studio的设置,依次找 Se ...

  4. Free Download Manager (FDM) 中文版 - 替代迅雷最佳免费开源下载工具软件

    https://www.freedownloadmanager.org/ Free Download Manager (FDM) 是一款经典免费纯粹的下载软件,它开源无广告,界面简洁清爽,支持 BT. ...

  5. 编译内核时出现__bad_udelay错误

    今天编译内核时候遇到了__bad_udelay错误,然后编不过去了,仔细一看发现是udelay函数的参数太大,内核不允许延时这么多.于是换成了mdelay函数,以毫秒为单位延时,问题解决.

  6. 前端开发利器 Emmet 介绍与基础语法教程

    在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...

  7. python nose测试框架全面介绍八---接口测试中非法参数的断言

    在测接口时,会有这样的场景,输入非法的参数,校验返回的错误码及错误内容 通常做法为发请求,将错误的返回结果拿出,再进行对比匹配:但存在一个问题,需要再写错误返回分析函数,不能与之前正常发请求的函数共用 ...

  8. REM+SVG Sprite,web app案例

    REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...

  9. vue--获取监听获取radius的改变

    做一个考试系统,单选题都是后台来的数据,所以一时间没有想到 @change这个方法: <template> <div id="Home"> <v-he ...

  10. CentOS7.5搭建Solr7.4.0集群服务

    一.Solr集群概念 solr单机版搭建参考: https://www.cnblogs.com/frankdeng/p/9615253.html 1.概念 SolrCloud(solr 云)是Solr ...