Jquery源码分析---导言

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.javaeye.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的角度去分析。

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

文章来源: http://jljlpch.javaeye.com/category/37744

时间: 2024-11-01 23:30:47

Jquery源码分析---导言的相关文章

jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

jQuery源码分析-03构造jQuery对象-工具函数_jquery

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

Jquery源码分析---概述

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库 相比,它剑走偏锋,从web开发实用的角度出发,抛除了其它Lib中一些不实用的 东西,为开发者提供了短小精悍的类库.其短小精悍,使用简单方便,性能高效 ,能极大地提高开发效率,是开发web应用的最佳的辅助工具之一.因此大部分 开发者在抛弃Prototype而选择Jquery来进行web开发. 一些开发人员在使用jquery时,由于仅仅只知道Jquery文档中的使用方法, 不明白Jquery的运行原理

jQuery源码分析之jQuery中的循环技巧详解_jquery

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha

jQuery源码分析-01总体架构分析_jquery

1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

jQuery 源码分析 CSS 操作原理

jquery.fn.css获取当前jQuery所匹配的元素中第一个元素的属性值[$(-).css(cssName),注意这个cssName可以是数组]或给当前jQuery所匹配的每个元素设置样式值[$(-).css(cssname,value) / $(-).css(obj)]; 可以看见函数内部直接调用了jquery.access来处理.access将当前多个元素组成的jQuery对象所匹配的元素分解成单一元素逐个调用第二个参数中的回调function( elem, name, value )

jQuery源码分析之Callbacks详解

 这篇文章主要分为以下知识:什么是Callbacks.Callbacks模型.基本模块实现.once和auto(memory).源码和源码下载,十分的细致全面,这里推荐给大家,有需要的小伙伴参考下吧.     代码的本质突出顺序.有序这一概念,尤其在javascript--毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行.优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函

Jquery源码分析---expand(扩展)

9 jquery的架构 9.1.架构概述 前面二篇就jquery 的源码进 行了逐一进行了分析.那么我们现在站在一定的高度来分析或看看jquery的源码 . Jquery的源码不同于prototype,mootools,它们对 Array,String,Event,Hash都进行了大量的扩展,然后才对element,form之类的 dom元素提供了方便及兼容的操作. Jqueryr 源码也不同于YUI,采用组 件的方式按照java面向对象的中规中律地去构建类库,向用户提供方便地操作. Jquer

Jquery源码分析---jQuery类数组的分析

4.1.类数组构建 从上节可以看出jquery构建函数完成了查找或转换 或其它的功能,其结果就是查找到元素.Dom树查找,html转换成Dom元素,还是 直接传入Dom元素都不过是方式而已.找到这些元素就得找个地方去存储起来. 存储有序数据的地方(集合)在JS中最好的当然是数组.那么又如何在 jQuery内面实现数组呢?可以采用如下的方式: jQuery.fn.prototype=new Array(); 在上一节中 的this.setArray(arr)函数中加上 Array.apply (t