jQuery 源码分析笔记

jQuery的宗旨是Write Less, Do More。它对JavaScript的开发风格侵入性不如YUI那么强,当然也不如Dojo和YUI如此庞大。它极大的简化了JavaScript的日常开发工作,主要是DOM元素的操作(从名字Query就可以看出)。另外一个主要工作就是每个前端开发者都需要面对的浏览器兼容性。jQuery兼容所有主流浏览器的大部分版本,从万恶的IE6开始直到Firefox,Chrome等现代浏览器。除了居于核心的一小部分代码之外,剩下的jQuery都是松散的函数,扩展性很强。http://plugins.jquery.com上有成千上万的jQuery插件,你需要的功能几乎都有对应的jQuery插件,而且不止一个。
jQuery代码的头部是License声明。采用了GPLv2和MIT双协议。而在jQuery声明下是另一个项目的声明:Sizzle。这是jQuery作者另外的一个开源项目,在MIT、BSD和GPL下发布。它是一个独立的selector实现(pure-JavaScript CSS selector engine),可以独立使用。它的压缩版本只有3KB多一点,号称效率最高的选择器实现。jQuery从1.3开始使用Sizzle代替了原来的selector实现。
JS代码中有大量的()和{},这里使用的是Vim阅读,因为%命令可以快速的找到匹配的括号。
代码总体结构和变量
jQuery的代码整体上就是一个匿名函数调用:


代码如下:

(function (window, undefined) {
// ...
})(window);

这是为了避免污染全局对象,同时也可以方便的管理执行上下文。这个技巧在JS代码中经常见到,在jQuery代码中也很常见。比如,在jQuery和其他JS库同时使用时,$符号可能已经被使用了。为了仍然使用$符号:


代码如下:

(function ($) {
// $("...")... 照常使用$
})(jQuery);

在这里传入真正的jQuery对象。
下面进入真正的实现部分,首先是$,也就是jQuery对象的声明,其中最基本的两个成员也列出来了:


代码如下:

var jQuery = (function() {
var jQuery = function(selector, context) {
// 真正的初始化函数
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 一大堆变量声明
// fn是主要的函数实现点,也是jQuery插件的起点。实际上就是JS原型
jQuery.fn = jQuery.prototype = {
};
// 一个扩展对象用的函数,可以动态地往对象上加成员。以后往jQuery里面加成员都是用extend函数完成的。
jQuery.extend = jQuery.fn.extend = function() {
};
// ...
return jQuery;
})();

jQuery对象是核心对象,所有$(...)得到的都是jQuery对象,除了少部分直接实现在jQuery下的Utility函数之外,大部分函数都是用extend方法加到jQuery对象里的。

(0)

相关推荐

  • jQuery 源码分析笔记(6) jQuery.data

    data部分的代码从1381行开始.最开始的几行关键代码: 复制代码 代码如下: jQuery.extend({ // 存储数据的地方,关键实现核心 cache: { }, // 分配ID用的seed uuid: 0, // 为了区别不同的jQuery实例存储的数据,使用前缀+jQuery版本号+随机数作为Key expando: "jQuery" + (jQuery.fn.jquery + Math.random()).replace(/\D/g, ""), //

  • jQuery 源码分析笔记(2) 变量列表

    _jQuery = window.jQuery; _$ = window.$; 这两个变量是jQuery唯一使用的两个全局变量.在jQuery.noConflict()函数中,会把这两个变量恢复回去. 对于浏览器检测,jQuery使用的是检查UserAgent,而没有使用特性检测. rwebkit = /(webkit)[ \/]([\w.]+)/, ropera = /(opear)(?:.*version)?[ \/](\w+)/, rmsie = /(msie) ([\w.]+)/, rm

  • jQuery源码分析之Event事件分析

    对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法.一般lib都会对浏览器的提供的函数做一些扩展,解决兼容性内存泄漏等问题.第三个问题就是如何得到domReady的状态. 6.1 event的包裹 浏览器的事件兼容性是一个令人头疼的问题.IE的event在是在全局的window下, 而mozilla的event是事件源参数传入到回调函数中.还有很多的事件处理方式也一样. Jquery提供了一个 event的包裹,这个相对于其它的lib提供的有点简单,

  • jQuery 源码分析笔记(5) jQuery.support

    其中jQuery.browser已经提供了根据UserAgent检测的浏览器信息.而jQuery.support 使用特性检测来检查浏览器的功能以及Bug. 和文档一样,首先说明一下,这个模块是很底层的代码,基本不需要在日常开发中使用,但是插件的开发者更需要.因为插件需要兼容各个浏览器.首先看一下 support模块提供了哪些浏览器特性的检测,以下结果是在Chrome 13 Dev下看到的结果.根据浏览器的不同,这里的成员可能会有变化.(PS:再次吐槽IE,大部分属性都是IE比较特别) ajax

  • jQuery 源码分析笔记(7) Queue

    每个Element可以拥有多个队列,但是基本上都只使用到一个,即默认的fn队列.队列允许一系列函数被异步地调用而不会阻塞程序.例如:$("#foo").slideUp().fadeIn();其实这个就是我们大家常用的链式调用,实际上这是一个Queue.所以队列和Deferred地位类似,是一个内部使用的基础设施.当slideUp运行时,fadeIn被放到fx队列中,当slideUp完成后,从队列中被取出运行.queue函数允许直接操作这个链式调用的行为.同时,queue可以指定队列名称

  • jQuery 源码分析笔记(4) Ready函数

    这个功能在 jQuery的文档中提到了三种等价的形式: 复制代码 代码如下: // 定义在jQuery.fn.ready $(document).ready(handler); // 和上一个是同一个,不推荐 $().ready(handler); // 单独在jQuery对象中处理 $(handler); // 以上这个形式的定义: if(jQuery.isFunction(selector) { return rootjQuery.ready(selector); } 因此实际上都归结与一个

  • jQuery 源码分析笔记(3) Deferred机制

    Deferred把回调函数注册到一个队列中,统一管理,并且可以同步或者异步地调用这些函数.jQuery.Deferred()用来构造一个Deferred对象.该对象有状态值,共有三种: Rejected, Resolved和初始状态.其中Resolved表示该操作成功完成了,而Rejected 则表示出现了错误,调用失败.Deferred对象的主要成员如下: done(callback): 注册一个callback函数,当状态为resolved时被调用. * fail(callback): 注册

  • jQuery 源码分析笔记

    jQuery的宗旨是Write Less, Do More.它对JavaScript的开发风格侵入性不如YUI那么强,当然也不如Dojo和YUI如此庞大.它极大的简化了JavaScript的日常开发工作,主要是DOM元素的操作(从名字Query就可以看出).另外一个主要工作就是每个前端开发者都需要面对的浏览器兼容性.jQuery兼容所有主流浏览器的大部分版本,从万恶的IE6开始直到Firefox,Chrome等现代浏览器.除了居于核心的一小部分代码之外,剩下的jQuery都是松散的函数,扩展性很

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

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

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

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

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

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

随机推荐