Jquery1.2.6 源码分析

jQuery是一个非常优秀的JS库，与Prototype,YUI,Mootools等众多的Js类库相比，它剑走偏锋，从web开发的实用角度出发，抛除了其它Lib中一些中看但不实用的东西，为开发者提供了优美短小而精悍的类库。其使用简单，文档丰富，而且性能高效，能极大地提高web系统的开发效率。因此可以说是web应用开发中最佳的Js辅助类库之一。大部分开发者正在抛弃Prototype，而选择Jquery做为他们进行web开发的JS库。

如是开发人员仅仅只知道文档中的简单的使用方法，却不明白Jquery的运行原理和内部机制，在使用jquery时，肯定会碰到许多的问题。这些问题有一部分是Jquery的Bug。大部分是自身的使用不当而造成的。而文档的简单的使用说明很难解决问题。在调试基于jQuery的web应用时，很多时候都要跟踪进入jQuery对象分析其运行状态以了解出错的原因。

如果对于web的应用的页面运行性能和效率有所要求的话，那么我们更应该去明白其运行机理和核心源码。但是jQuery源码不像其它的类库那样，它有点晦涩，难懂。这就是本源码分析的原因，让所有使用jQuery的读者，能快速上手jQuery的源码，并在开发中得心应用。

Jquery的网络资源丰富，但Baidu了很久，很难找到那种完全深入地分析Jquery源码的文稿。倒是Jquery的开发者，John Resi的《Pro Javascript Techniques》涉及到Jquery的源码的分析，但是其主指还是在于JavaScript的使用。那本书并不能使我们完全细致地了解Jquery的源码。



写个这个源码分析的理由其实很简单，在工作中使用jquery经常出问题，不得不分析其源码，我把分析的源码放在blog。其标题是jquery core 源码分析。结果有一网友竟评论说打到标题党，可见还是有很多人像我这样想完全了解jquery的core代码。

从自己能看懂，到自己写出来。发现自己有一个质的提高。但是由于水平有限，分析过程的难免有错误。请大家多多指教。不过嘴下能留情就最好了。有什么问题可以到blog:jljlpch.iteye.com去访问和评论。附件附有打包的源码。



  分析源码，最难的地方不是你能理解，你能分析得出来。如果把所有的分析都写在源文件中，我想很多人看不了多少行就会中止的。很难有人有兴趣对得源码一行行地去分析。何把源码有机地组合起来，串成一条线是本教程的最为头疼的地方。
读书的最高境界是厚积薄发。分析源码也是一样。对于4，5千行的jquery源码，我们如何做到心中有数，知道什么功能在什么函数里内呢？ 什么函数用在什么地方呢？这样就得把所有的函数有机分类地重组起来，想着Jquery的主要目的和自己对于js方面的理解。我把整个Jquery薄发成三个单词 query-->manipulate-->expand。

  jquery一个很紧缩的lib，它的主要目的就是对dom元素进行操作。那么dom元素的从哪里？
  到dom树中去找。这就是query。$()，Jquery的构建就是一个query的过程。我们可以把这个query范围放大一点，它不光是从dom中查找的CSS selector，还有可能是从html的片断中去寻找的dom元素生成，更进一步就是直接的dom元素（集）。$()的构建就是从这里出发的。
  query到元素集，这个query的过程还没有最终完成。因为这些结果集不一定满足我们的要求，那么就要筛选，要过滤。要进行数组方面的相关的操作。这就涉及到jquery对象的类数组的特征。我们就可以把这些类数组的相关的函数放在一起来分析。

  当最终的需求的集合形成，我们要的完成我们真正要做的，对集合中的dom元素进行操作。
怎么操作？操作什么呢？不就是对dom元素的attribute,class, style,css，event等进行操作吗？
  细化一下：
  1、我们可以把attribute,class,style都看作是是属性的操作，还有expando的自定义的属性。这就涉及到jquery.data。
  2、对dom元素的内容。什么是内容。innerHtml是。all childNodes也是,value也可以算。对于内容的操作就有追加，插入，前插，后插，内部前插和内部后插。那当然不能少了clone,remove这些操作。
3、CSS是可以在dom元素中单独出来分成一块来做分析的。对于css的操作，不就是height,width,innerHeight,innerWidth,out(height,widith)的操作，还有元素的位置（position,offset),display or not。这就是对于CSS的操作。
4、Event也是元素的操作中的一部分。这一部分除了addEvent,fireEvent,removeEvent,和domready就没有别的啦。
5、Ajax是给元素从服务器中找内容填充的。真正用到最多不还是load吗，对于getScript,getJson之类全都是在jQuery.ajax的函数的基础而出来。
6、Fx可以看做是CSS的操作。但是其又高于CSS。对于FX,最基本不就show,hide,slide(down,up),fade(in,out)这几种用法。无论什么用法，都基于时间的长短映射到元素CSS的属性值的对对应比率的大小。采用setInterval间隔来运行就形成了动画。这就animate()函数。所有效果的发源地。

想想整个jquery就是这么简单。当然如果没有去身体力行去自己分析，无论什么教程都是没有用的。

其实query-->manipulate是表层的东西。还有一个高层的就是expand。这涉及到一个lib的架构与设计。

这部分我们可以从源码的角度去解读对于js lib的架构。
除了扩展性（extend)之后，一个lib肯定是要花大力气去考虑它的性能。
考虑它的内存使用。
这是站在设计Jquery的角度去分析。

想了很久，但是这一部分还没有写入目前的源码分析中。


                              2008-08-31   prk

John写的JS很trick，个人风格比较明显吧

john写的代码有点个人作风。
还是觉得Ext的代码比较优雅了。

  分析源码，最难的地方不是你能分析出来，写出你的理解。如果所有的分析都在源文件中，我想很多人都会看不到一半，就不会去看了。
  如何把源码有机地组合起来，串成一条线。我们读书的最高境界是厚积薄发。分析源码也是一样。对于4，5千行的源码，我们如何做到心中有数，知道什么功能在什么函数里内呢？
  我们不光在去猜想开发Jquery的主要目的，还要加上自己对于js方面的理解。把整个Jquery就分成三个单词
  query-->manipulate-->expand。

jquery不像其它的lib，它是一个很紧缩的lib。它的主要目的就是对dom元素进行操作。那么dom元素的从哪里？
到dom树中去找。这就是query。也是$()的作用。Jquery的构建就是一个query的过程。这个query是一个大范围的，不光是CSS selector。还有可能从html的片断中去寻找，还有可能直接就是dom元素。$()的构建就是从这个方面出发的。
query到元素集，这个query的过程还没有最终完成。因为这些结果集不一定满足我们的要求，那么就要筛选，要过滤。要进行数组方面的相关的操作。这就涉及到jquery对象的类数组的特征。我们就可以把这些类数组的相关的函数放在一起来分析。

当最终的需求的集合形成，我们要的就是真正的目的，对集合中的dom元素进行操作。怎么操作？不就是对dom元素的attribute,class, style,css，event等进行操作吗？
这些又如何分更小的类别呢？我们可以把attribute,class,style都看作是是属性的操作，还有expando的自定义的属性。这就涉及到jquery.data。
attribute是一部分，还有一部分是对dom元素的内容。什么是内容。innerHtml是。all childNodes也是,value也可以算。对于内容的操作就有追加，插入，前插，后插，内部前插和内部后插。那当然不能少了clone,remove这些操作。
CSS是可以在dom元素中单独出来分成一块来做分析的。对于css的操作，不就height,width,innerHeight,innerWidth,out(height,widith)的操作，还有元素的位置（position,offset),display or not。这就是对于CSS的操作。
Event也是元素的操作中的一部分。这一部分除了addEvent,fireEvent,removeEvent,和domready就没有别的啦。
Ajax是给元素从服务器中找内容填充的。真正用到最多不还是load吗，对于getScript,getJson之类全都是在jQuery.ajax的函数的基础而出来。
Fx可以看做是CSS的操作。但是其又高于CSS。对于FX,最基本不就show,hide,slide(down,up),fade(in,out)这几种用法。无论什么用法，都基于时间的长短映射到元素CSS的属性值的对对应比率的大小。采用setInterval间隔来运行就形成了动画。这就animate()函数。所有效果的发源地。

想想整个jquery就是这么简单。当然如果没有去身体力行去自己分析，无论什么教程都是没有用的。

其实query-->manipulate是表层的东西。还有一个高层的就是expand。这涉及到一个lib的架构与设计。
这部分我们可以从源码的角度去解读对于js lib的架构。
除了扩展性（extend)之后，一个lib肯定是要花大力气去考虑它的性能。
考虑它的内存使用。
这是站在设计Jquery的角度去分析。

想了很久，但是这一部分还没有写入目前的源码分析中。


上面的文字只是即兴而发，可能会有些函数名或单词错误，如果能表明自己的意思，我就很满足。

最后希望所有想弄懂Jquery的用户能静下心来去分析和思考源码，对于本教程一步一步去把整个jquery的源码给串起来，最终成为自己的东西。

   prk  08-08-31  1:30

楼主非常感谢 ！！
    非常棒 ！！  你对于jQuery的源码分析应该是目前为止最为详细的了 ！！！
    我经过之前对jQuery的学习使用，也逐渐在阅读理解它的源码，你的这份源码分析一定会给我和其他朋友们很大的帮助 ！
    最后，希望你可以继续努力，把jQuery源码的分析做的越来越好 ！

非常感觉楼上的支持。

源码的分析中尽管对于每个难点都给出例子和说明，
而且还给出其设计的原理分类总结

但是还是没有从架构上去分析。
就是expand.
我也构想了很久了，想把内存的管理、架构、测试加进去，
其实我是一直在构思自己心中的框架。一直都没有想好。

希望越来越多的朋友给出见意，在下一个版本中，一定会加进去。

我见过的最完善的jq源码分析，希望能继续完善

非常的不错，强烈支持LZ出一本书。。

非常感觉楼上的支持。
写jquery的书但是不写。因为其作者有一个书叫jquery in action.翻译成了中文 。讲用法讲得很全。
不过想把jquery改造一下。因为它的内存，性能等方面还是有待改进的。
Ext做得很大，其源码的性能的处理是相当好的。

楼主源码包中有个intro.js，outro.js两个文件！前者代码为(function(){，后者里面代码为})();
貌似这两个文件放在一起才能构成一个(function(){})();如此的代码吧！

不明白！望楼主给说说！