jQuery是一个Javascript库，它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅，而且有强大的选择器，出色的DOM操作,可靠的事件处理机制,完善的Ajax,关键是有出色的浏览器兼容性，开发项目时可以不用考虑兼容性，因为jQuery已经替我们都修正好了，最后还有一点是jQuery有非常多的插件，功能非常丰富。

jQuery和Vue(包括react、angular)的区别就不说了，网上一大堆哈哈，前者是MVC模式，后者是MVVM模式,MVVM模式的出现不是说为了取代MVC模式的，它们是可以共同存在的，很多时候还是使用mvc模式更方便，对于一些数据交互比较多的可以使用vue之类的脚手架来进行开发项目,难度相比较也有点大

jQuery的代码结构相比较简单，就是一个匿名函数，将入口挂载到window.$和window.jQuery属性上，我们模拟一下jQuery的结构，由浅入深，如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         (function(window,undefined){
  10.             var jQuery = (function(){
  11.                 return 'Hello jQuery';
  12.             })()
  13.             window.jQuery = window.$ = jQuery;
  14.         })(window)
  15.         console.log($)
  16.     </script>
  17. </body>
  18. </html>

writer by:大沙漠 QQ:22969969

就是定义一个匿名函数，内部再定义一个jQuery变量，值为一个立即执行表达式，最后将值挂载到window.jQuery和window.$上，打印出来的如下:

实际上当然不可能直接返回一个字符串，其实在这个立即执行表达式里，会执行new jQuery.fn.init()创建一个函数对象，最后返回改函数对象，我们加深一点代码，和jQuery内部一样，如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <p id="p">123</p>
  9.     <script>
  10.         (function(window,undefined){
  11.             var jQuery = (function(){
  12.                 var jQuery = function(selector){ 　　　　　　　　//再定义一个函数，内部返回new一个jQuery.fn.init对象，并返回
  13.                     return new jQuery.fn.init(selector)
  14.                 }
  15.                 jQuery.fn={
  16.                     init:function(selector){
  17.                         this[0] = selector;
  18.                         return this
  19.                     }
  20.                 }
  21.                 return jQuery;
  22.             })()
  23.             window.jQuery = window.$ = jQuery;
  24.         })(window)
  25.  
  26.         console.log($('p'))
            console.log($('p')[0])
  27.     </script>
  28.  
  29. </body>
  30. </html>

打印如下:

第一行输出是$('p')对象，第二行就是p这个Dom节点引用了，第一行输出是不是和真实的jQuery对象很像呢，我们用真实的jQuery打印看看:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <p id="p">123</p>
  10.     <script>
  11.         console.log($(p))
  12.         console.log($(p)[0])
  13.     </script>
  14. </body>
  15. </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 源码分析(一) 代码结构的更多相关文章

  1. Vue.js 源码分析(一) 代码结构

    关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...

  2. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  3. MySQL源码分析以及目录结构 2

    原文地址:MySQL源码分析以及目录结构作者:jacky民工 主要模块及数据流经过多年的发展,mysql的主要模块已经稳定,基本不会有大的修改.本文将对MySQL的整体架构及重要目录进行讲述. 源码结 ...

  4. MySQL源码分析以及目录结构

    原文地址:MySQL源码分析以及目录结构作者:jacky民工 主要模块及数据流经过多年的发展,mysql的主要模块已经稳定,基本不会有大的修改.本文将对MySQL的整体架构及重要目录进行讲述. 源码结 ...

  5. jQuery 源码分析 8： 回头看jQuery的构造器（jQuery.fn，jQury.prototype，jQuery.fn.init.prototype的分析）

    在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...

  6. ffplay源码分析2-数据结构

    ffplay是FFmpeg工程自带的简单播放器,使用FFmpeg提供的解码器和SDL库进行视频播放.本文基于FFmpeg工程4.1版本进行分析,其中ffplay源码清单如下: https://gith ...

  7. jQuery源码分析-each函数

    本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...

  8. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  9. storm源码之storm代码结构【译】【转】

    [原]storm源码之storm代码结构[译]  说明:本文翻译自Storm在GitHub上的官方Wiki中提供的Storm代码结构描述一节Structure of the codebase,希望对正 ...

随机推荐

  1. 黄聪：不使用 webpack，vuejs 异步加载模板

    webpack 打包不会玩,整了这么个小玩具 一段 vue 绑定代码,关键点在 gmallComponent 1.异步加载外部 vue 文件(非 .vue) 2.按一定规则拆分 template.sc ...

  2. Python中最常用的字符串方法！

    字符串是字符序列.Python中内置的string类代表基于Unicode国际字符集的字符串.除了Python中常见的操作外,字符串还有一些专属于它们的附加方法.下图显示了所有这些可用的方法: Pyt ...

  3. 通过SSH通道来访问MySQL

     许多时候当要使用Mysql时,会遇到如下情况: 1. 信息比较重要,希望通信被加密.2. 一些端口,比如3306端口,被路由器禁用. 对第一个问题的一个比较直接的解决办法就是更改mysql的代码,或 ...

  4. [20191011]bash任意进制编码表.txt

    [20191011]bash任意进制编码表.txt --//bash可以使用任意进制编码转化为十进制.我想了解内部编码:--//实际上受字符集的限制,"任意"进制有限制的.测试看看 ...

  5. .net core 发布IIS 出现Http 500错误

    首先再webconfig中设置stdoutLogEnabled="true",然后运行之后,到logs中查看登陆错误日志. 根据不同的错误进行解决: 我的错误是发布文件夹中缺少Dw ...

  6. Falling back to java on path. This behavior is deprecated

    windows启动elasticsearch报错:warning: Falling back to java on path. This behavior is deprecated. Specify ...

  7. JDBC API浅析

    使用java开发数据库应用程序一般都需要用到四个接口:Driver.Connection.Statement.ResultSet 1.Driver接口用于加载驱动程序 2.Connection接口用于 ...

  8. yum update 执行报错： error : unpacking of archive failed on file /usr/.../...;5d26ff7c: cpio : symlink

    早前已发现有台机一直在报这么个错误, 一用yum update 就报一堆: Error: unpacking rpm package ..... error: xxxx : install faile ...

  9. postman---post请求数据类型

    我们都知道接口post方法中有不同的请求类型,再写postman中发送请求的时候只是简单的写了一种,今天我们重新了解下Postman如何发送post的其他数据类型 Postman中post的数据类型 ...

  10. 源码编译Kubeadm二进制文件

    kubeadm是Kubernetes官方提供的用于快速安装Kubernetes集群的工具,伴随Kubernetes每个版本的发布都会同步更新,kubeadm会对集群配置方面的一些实践做调整,通过实验k ...