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 调用一边分析源码，今天先到这里