jQuery 源码分析(一) 代码结构
jQuery是一个Javascript库,它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅,而且有强大的选择器,出色的DOM操作,可靠的事件处理机制,完善的Ajax,关键是有出色的浏览器兼容性,开发项目时可以不用考虑兼容性,因为jQuery已经替我们都修正好了,最后还有一点是jQuery有非常多的插件,功能非常丰富。
jQuery和Vue(包括react、angular)的区别就不说了,网上一大堆哈哈,前者是MVC模式,后者是MVVM模式,MVVM模式的出现不是说为了取代MVC模式的,它们是可以共同存在的,很多时候还是使用mvc模式更方便,对于一些数据交互比较多的可以使用vue之类的脚手架来进行开发项目,难度相比较也有点大
jQuery的代码结构相比较简单,就是一个匿名函数,将入口挂载到window.$和window.jQuery属性上,我们模拟一下jQuery的结构,由浅入深,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
(function(window,undefined){
var jQuery = (function(){
return 'Hello jQuery';
})()
window.jQuery = window.$ = jQuery;
})(window)
console.log($)
</script>
</body>
</html>
writer by:大沙漠 QQ:22969969
就是定义一个匿名函数,内部再定义一个jQuery变量,值为一个立即执行表达式,最后将值挂载到window.jQuery和window.$上,打印出来的如下:
实际上当然不可能直接返回一个字符串,其实在这个立即执行表达式里,会执行new jQuery.fn.init()创建一个函数对象,最后返回改函数对象,我们加深一点代码,和jQuery内部一样,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="p">123</p>
<script>
(function(window,undefined){
var jQuery = (function(){
var jQuery = function(selector){ //再定义一个函数,内部返回new一个jQuery.fn.init对象,并返回
return new jQuery.fn.init(selector)
}
jQuery.fn={
init:function(selector){
this[0] = selector;
return this
}
}
return jQuery;
})()
window.jQuery = window.$ = jQuery;
})(window) console.log($('p'))
console.log($('p')[0])
</script> </body>
</html>
打印如下:
第一行输出是$('p')对象,第二行就是p这个Dom节点引用了,第一行输出是不是和真实的jQuery对象很像呢,我们用真实的jQuery打印看看:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p id="p">123</p>
<script>
console.log($(p))
console.log($(p)[0])
</script>
</body>
</html>
输出如下:
可以看到真实的jQuery返回的也是一个init对象,第二行输出么就是一摸一样了。
jQuery的代码结构就是这样的,最后返回的其实内部的jQuery.fn.init对象,然后会把jQuery.fn设置为jQuery.fn.init的原型,最后在jQuery.fn或jQuery.fn.prototype上设置大量的属性和方法,这些属性和方法就是jQuery对外的属性和方法,供我们使用了。
jQuery的代码结构按照功能不同分为三部分:
入口模块(用于构造jQUery对象)
底层支持模块(供功能模块使用的)
功能模块(最后实现的操作)
底层支持模块又分为:
选择器模块
浏览器功能测试
异步队列
数据缓存和队列模块
功能模块又细分为
属性操作
事件系统
DOM遍历
DOM操作
样式操作CSS
异步请求
动画模块
后面慢慢介绍每个模块,每个API的用法和原理实现。
jQuery 源码分析(一) 代码结构的更多相关文章
- Vue.js 源码分析(一) 代码结构
关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...
- [转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
- MySQL源码分析以及目录结构 2
原文地址:MySQL源码分析以及目录结构作者:jacky民工 主要模块及数据流经过多年的发展,mysql的主要模块已经稳定,基本不会有大的修改.本文将对MySQL的整体架构及重要目录进行讲述. 源码结 ...
- MySQL源码分析以及目录结构
原文地址:MySQL源码分析以及目录结构作者:jacky民工 主要模块及数据流经过多年的发展,mysql的主要模块已经稳定,基本不会有大的修改.本文将对MySQL的整体架构及重要目录进行讲述. 源码结 ...
- jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)
在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...
- ffplay源码分析2-数据结构
ffplay是FFmpeg工程自带的简单播放器,使用FFmpeg提供的解码器和SDL库进行视频播放.本文基于FFmpeg工程4.1版本进行分析,其中ffplay源码清单如下: https://gith ...
- jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- storm源码之storm代码结构【译】【转】
[原]storm源码之storm代码结构[译] 说明:本文翻译自Storm在GitHub上的官方Wiki中提供的Storm代码结构描述一节Structure of the codebase,希望对正 ...
随机推荐
- GNSS频率分配表
说明: 公开资料表示,GPS L3用于核爆炸等高能红外辐射事件的侦查,L4用于电离层研究. GLONASS FDMA信号G1.G2.G3三个频段各自频点见以下附表,摘自ITU的频率协调结果. GLON ...
- centos 8 docker-ce 安装
https://www.techrepublic.com/article/a-better-way-to-install-docker-on-centos-8/ https://linuxconfig ...
- Zabbix 预警问题-预警对应的用户报警媒介收不到
问题背景 公司现在有这种需求,需要我们对关键的预警发送到对应的项目组负责人,比如 保险项目组的服务器预警大于警告的预警发送到保险负责人的邮箱(也会发送给运维的,背锅逃不掉的). 进行创建一个 用户群组 ...
- nginx: [emerg] unknown directive “ ” in /usr/local/nginx/nginx.conf.conf:xx报错处理
当我们在修改Nginx的配置文件,然后加载配置文件./nginx -s reload 报错类似的错误, nginx: [emerg] unknown directive “ ” in /usr/l ...
- 3DES对称加密算法(ABAP 语言实现版)
公司人事数据要求在系统间加密传输,而对接系统大部分是Java系统,要在不同的异构系统间能很好的加解密码,想到了标准的对称加密算法DES,因为是标准的算法,网络上存在大量公开用Java的DES算法,JA ...
- Java生鲜电商平台-商品基础业务架构设计-商品设计
Java生鲜电商平台-商品基础业务架构设计-商品设计 在生鲜电商的商品中心,在电子商务公司一般是后台管理商品的地方.在前端而言,是商家为了展示商品信息给用户的地方,它是承担了商品的数据,订单,营销活动 ...
- git fetch & pull详解
1.简单概括 先用一张图来理一下git fetch和git pull的概念: 可以简单的概括为: git fetch是将远程主机的最新内容拉到本地,用户在检查了以后决定是否合并到工作本机分支中. 而g ...
- 浅谈Java中switch分支语句
前言: 在程序中遇到多分支选择的时候,想必大家都喜欢用if...else if...else...语句,尤其是初学者,因为在了解switch语句之前,我也是只会用if...else语句.那么现在看完这 ...
- arcgis api for javascript 学习(六) 地图打印
1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
- ORACLE基础之oracle锁(oracle lock mode)详解
ORACLE里锁有以下几种模式: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share 3:Row-X 行独占(RX):用于行的修改,sub exclusiv ...