jQuery源码解读一
来源:互联网 发布:淳萃洗发水 知乎 编辑:程序博客网 时间:2024/06/16 12:14
前言:
我为什么要看这个源码,很简单,寻找我自己写的js框架与jQuery之间的差异,取长补短,最终目标是提高js编程的一个眼界,看看别人是怎么想的,因为自己一个人的想法往往是片面的,也为了能让自己的主观渐渐接近客观事实。
虽然jQuery框架能直接拿来用,但是对于偏爱研究的人来说,还是喜欢写原生js,就好像能自己写操作系统的人不会喜欢去用别人的操作系统,就好像乔布斯不会甘心用别人的产品,他要自己搞他认为更好的,差不多就这么个道理。当然,考虑到效率,我自然也会用js 写适合自己的框架,光会用jQuery是满足不了我的,比如我随便想到一个有点创意的页面插件,如果不懂js,那么我是很难实现的。
jQuery版本:随便一个版本,既然是个js框架,那么万变不离其宗,再怎么升级无非就是删删减减、增增添添、改点架构,总框架和一些基本的代码是不会变的,就拿现在的
jquery-2.2.2.js 为例分析。Lets get started...
一、jQuery代码有多少行
要研究他,下载的必然是未压缩版,打开,1w行出头,如果去掉空行和注释行,也就 七千行 的样子,其实并不多,js随便写个稍大一点的插件就要上千行,曾经看完过一个三千多行的插件源码,看源码大概是最有效的学习方式,也是最困难的方式,打开之后,把所有能折叠的方法折叠一下,阅读就方便多了。
二、jQuery是如何工作的(总体框架,加精)
1、首先我们要知道,js代码是什么时候执行的,很简单,当页面从上到下加载到js文件或代码时就会执行一次。
当在 head 标签中引入jQuery ,如下所示
<script src="../Scripts/jquery-2.2.2.js"></script>
页面加载到这里时浏览器的js主线程就会首先进入这个文件执行里面的js代码
执行完毕才会继续加载下面的标签比如 body 标签,这点毋庸置疑
2、既然浏览器的js主线程在这里执行了一次jquery代码,那要看看它都干了些什么事情,进入 jquery-2.2.2.js 看到这样的结构的代码
(function( global, factory ) { 这里省略十几行代码 }(this,function(){这里省略几千行代码,也就是jq主要的代码都在这个function里面}));
这个结构再简化一下
(function(){}(此括号里面的内容是传入前面function的参数)); //这是个自执行函数,下面举例子
(function(a,b){alert(a+b)}(1,2)); //输出3
(function(a,b){b(a);}(1,function(c){alert(c);})); //输出1,这也是仿jq的构造
看到这里,也就是说,这个包含几千行的function会自动执行里面的内容
3、自执行函数 (function(a,b){alert(a+b);}(1,2));
普通函数执行 function fun(a,b){alert(a+b);} fun(1,2);
两者运行效果一样 但有不同点 就是后者暴露了名字 fun 考虑到框架给很多人用,那么别人也写了一个同名函数就会覆盖掉之前的,要想知道更多区别建议自行百度js自执行函数或自调用函数。
4、下面就要重点看这个包含几乎所有代码的function,如下是我的总结
function(){
//定义了很多变量
建立jQuery
jQuery = function( selector, context ){...}
不断扩展 jQuery 的属性和功能方法,绝大多数代码做这个事情
最后 return jQuery
}
几千行代码顺利结束
也就是说jQuery文件运行完之后返回一个jQuery 对象,这意味着后面自己写的js文件,就可以通过它调用它的一些方法或属性
5、$ 美元符号是啥,很简单,jquery-2.2.2.js文件 倒数几行就会看见这样一句代码
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
$ 这个变量就是jQuery,$也成为window对象的属性,所以后面可以在任何地方使用它,如果不喜欢$这个符号,完全可以把它改成你想要的变量,或者删除它直接使用jQuery如果不嫌打字多,还有,这个$符号在linux系统中被用作文件实质换行符,可以用cat -A 文件名
命令看一下,因此如果在Linux中直接引入jQuery就很容易出问题,强烈建议在Linux中使用jQuery把 $ 符号换掉。
三、结合具体jQuery代码详细分析jQuery执行流程
jQuery就是js,只是把几千行js代码命名为jQuery,建立的主要对象也命名为jQuery,文件名也命名为jquery,命名的东西不用在意,看它的运行实质,也就是看执行了哪些js代码
这个需要慢慢更新,一边看jQuery 调用一边分析源码,今天先到这里
我为什么要看这个源码,很简单,寻找我自己写的js框架与jQuery之间的差异,取长补短,最终目标是提高js编程的一个眼界,看看别人是怎么想的,因为自己一个人的想法往往是片面的,也为了能让自己的主观渐渐接近客观事实。
虽然jQuery框架能直接拿来用,但是对于偏爱研究的人来说,还是喜欢写原生js,就好像能自己写操作系统的人不会喜欢去用别人的操作系统,就好像乔布斯不会甘心用别人的产品,他要自己搞他认为更好的,差不多就这么个道理。当然,考虑到效率,我自然也会用js 写适合自己的框架,光会用jQuery是满足不了我的,比如我随便想到一个有点创意的页面插件,如果不懂js,那么我是很难实现的。
jQuery版本:随便一个版本,既然是个js框架,那么万变不离其宗,再怎么升级无非就是删删减减、增增添添、改点架构,总框架和一些基本的代码是不会变的,就拿现在的
jquery-2.2.2.js 为例分析。Lets get started...
一、jQuery代码有多少行
要研究他,下载的必然是未压缩版,打开,1w行出头,如果去掉空行和注释行,也就 七千行 的样子,其实并不多,js随便写个稍大一点的插件就要上千行,曾经看完过一个三千多行的插件源码,看源码大概是最有效的学习方式,也是最困难的方式,打开之后,把所有能折叠的方法折叠一下,阅读就方便多了。
二、jQuery是如何工作的(总体框架,加精)
1、首先我们要知道,js代码是什么时候执行的,很简单,当页面从上到下加载到js文件或代码时就会执行一次。
当在 head 标签中引入jQuery ,如下所示
<script src="../Scripts/jquery-2.2.2.js"></script>
页面加载到这里时浏览器的js主线程就会首先进入这个文件执行里面的js代码
执行完毕才会继续加载下面的标签比如 body 标签,这点毋庸置疑
2、既然浏览器的js主线程在这里执行了一次jquery代码,那要看看它都干了些什么事情,进入 jquery-2.2.2.js 看到这样的结构的代码
(function( global, factory ) { 这里省略十几行代码 }(this,function(){这里省略几千行代码,也就是jq主要的代码都在这个function里面}));
这个结构再简化一下
(function(){}(此括号里面的内容是传入前面function的参数)); //这是个自执行函数,下面举例子
(function(a,b){alert(a+b)}(1,2)); //输出3
(function(a,b){b(a);}(1,function(c){alert(c);})); //输出1,这也是仿jq的构造
看到这里,也就是说,这个包含几千行的function会自动执行里面的内容
3、自执行函数 (function(a,b){alert(a+b);}(1,2));
普通函数执行 function fun(a,b){alert(a+b);} fun(1,2);
两者运行效果一样 但有不同点 就是后者暴露了名字 fun 考虑到框架给很多人用,那么别人也写了一个同名函数就会覆盖掉之前的,要想知道更多区别建议自行百度js自执行函数或自调用函数。
4、下面就要重点看这个包含几乎所有代码的function,如下是我的总结
function(){
//定义了很多变量
建立jQuery
jQuery = function( selector, context ){...}
不断扩展 jQuery 的属性和功能方法,绝大多数代码做这个事情
最后 return jQuery
}
几千行代码顺利结束
也就是说jQuery文件运行完之后返回一个jQuery 对象,这意味着后面自己写的js文件,就可以通过它调用它的一些方法或属性
5、$ 美元符号是啥,很简单,jquery-2.2.2.js文件 倒数几行就会看见这样一句代码
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
$ 这个变量就是jQuery,$也成为window对象的属性,所以后面可以在任何地方使用它,如果不喜欢$这个符号,完全可以把它改成你想要的变量,或者删除它直接使用jQuery如果不嫌打字多,还有,这个$符号在linux系统中被用作文件实质换行符,可以用cat -A 文件名
命令看一下,因此如果在Linux中直接引入jQuery就很容易出问题,强烈建议在Linux中使用jQuery把 $ 符号换掉。
三、结合具体jQuery代码详细分析jQuery执行流程
jQuery就是js,只是把几千行js代码命名为jQuery,建立的主要对象也命名为jQuery,文件名也命名为jquery,命名的东西不用在意,看它的运行实质,也就是看执行了哪些js代码
这个需要慢慢更新,一边看jQuery 调用一边分析源码,今天先到这里
0 0
- jQuery源码解读一
- jQuery源码解读一
- jquery插件select2源码解读(一) 概述
- jQuery support 源码解读
- jQuery support 源码解读
- jQuery源码解读二
- JQuery源码解读
- jQuery support 源码解读
- jQuery support 源码解读
- jQuery源码解读二
- JQuery3.1.1源码解读(一)【jQuery总体架构】
- IndexedRDD 源码解读一
- THUCTC源码解读(一)
- WebRTC源码解读一
- hadoop源码解读一
- MJExtension源码解读一
- HashMap源码解读(一)
- MINA源码解读(一)
- day1
- mybatis 个人笔记
- 使用Spring Security保护web应用安全
- ListView中条目指定位置停留和动画效果
- ZOJ 3780 - Paint the Grid Again
- jQuery源码解读一
- Unity 单例与实例的区别
- CentOS vim插件——Doxygen注释插件(用命令生成各种注释)
- FOJ Problem 2214 Knapsack problem
- 霍夫曼编码和解码
- 1094. The Largest Generation (25)
- xpath对XML进行模糊查询
- StringUtils中 isNotEmpty 和isNotBlank的区别
- 警告:receiver Exported receiver does not require permission