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,希望对正 ...
随机推荐
- MyEclipse构建maven项目报错
直接上图: 这里有三种方案: 1.检查jdk版本:最好换成1.8版本 项目右键-->build path-->configure build Path; 1.2 点击 libraries ...
- log4net的配置及使用
网上查了有很多种写法和配置,结果百度出来都是几种方法混合写法,拷在一起结果还不能正常运行.因此把自己做成功的代码写上来做个备份. 运行环境:log4net 2.03版本,.net 4.5 大体步骤为: ...
- linux scp命令 将数据从一台linux服务器复制到另一台linux服务器
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- Linux与windows的应急响应重点检查项
Linux应急响应重点检查项 用户账号审计: cat /etc/passwd & cat /etc/shadow 在线账户审计: w 登录状况审计: last 空口令账户审计: awk -F: ...
- Python—基础之杂货铺
列表.元组.字典之前的互相转换 列表与元组的转换 # 列表转换成元组:使用 tuple 函数 num_list = [3, 6, 9] num_tuple = tuple(num_list) prin ...
- Shell类
70个经典的 Shell 脚本面试问题 1) 如何向脚本传递参数 ? ./script argument 例子: 显示文件名称脚本 ./show.sh file1.txt cat show.sh ...
- 【cf915】E. Physical Education Lessons（线段树）
传送门 简单的线段树区间修改区间查询,但是因为数据范围过大,所以采用动态开点的方法(注意一下空间问题). 也可以直接对询问区间的端点离散化然后建树,这种方法时间复杂度和空间复杂度都比较优秀. 给出动态 ...
- RFM模型的应用 - 电商客户细分（转）
RFM模型是网点衡量当前用户价值和客户潜在价值的重要工具和手段.RFM是Rencency(最近一次消费),Frequency(消费频率).Monetary(消费金额) 消费指的是客户在店铺消费最近一次 ...
- [C4W1] Convolutional Neural Networks - Foundations of Convolutional Neural Networks
第一周 卷积神经网络(Foundations of Convolutional Neural Networks) 计算机视觉(Computer vision) 计算机视觉是一个飞速发展的一个领域,这多 ...
- 鲜贝7.3--pycharm切换
在pycharm中切换python版本 打开软件会看到,这里有明显的红色提示错误.原因是当前使用的是python3.3,当执行print的时候,打印的文字需要小括号’()‘括起来. 在工具栏中找到这个 ...