jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数

一、jQuery总体架构

jQuery作为一款强大的js库,由以下模块构成:

(function(window,undefined){
    var jQuery=function(selector,context){
        //...
    };
    //工具方法utilities
    //回调函数 callbacks
    //异步队列 Defered Object
    //浏览器功能测试 Support
    //数据缓存 Data
    //队列 Queue
    //属性操作 Attributes
    //事件系统 Events
    //选择器 Sizzle
    //DOM遍历 Traversing
    //DOM操作 Manipulation
    //样式操作 CSS
    //异步请求  Ajax
    //动画 Animation
    //坐标 offset,尺寸 Dimensions
    window.jQuery=window.$=jQuery;
}})(window);

关于上述代码,解释如下:

1.jQuery的整体代码包裹在一个立即执行的自调用匿名的函数中,这样可以尽量减少和其他第三方库的干扰;

2,在上述代码最后,将jQuery对象添加到全局window上,并为之设置变量$,从而使得可以在外界访问jQuery;

3,为自调用匿名函数设置参数window,并传入参数window,这样一方面可以缩短作用域链,可以尽快访问到window;另一方面便于代码压缩;

4,为自动用匿名函数设置参数undefined,一方面可以缩短查找Undefined的作用域链,另一方面可防止undefined在外界被修改。

二、构造jQuery对象

jQuery对象是一个类数组对象,含有连续的整型属性、length属性、context属性,selector属性(在jQuery.fn.init中设置),preObject属性(在pushStack中设置);此外,还包含非继承属性以及大量的jQuery方法。

jQuery构造函数根据传入参数不同,有7种用法,在自己尝试实现的轻量级jQuery中,暂不考虑传入复杂选择器表达式和html代码的情形。

jQuery构造函数的整体代码结构如下:

(function(window,undefined){
    var rootjQuery,
        jQuery=function(selector,context){
        return jQuery.fn.init(selector,context,rootjQuery);
    };

    jQuery.fn=jQuery.prototype={
        constructor:jQuery,
        init:function(selector,context,rootjQuery){
            //...
        }
    };

    jQuery.fn.init.prototype=jQuery.prototype;
    rootjQuery=jQuery(document);
    window.jQuery=window.$=jQuery;
}})(window);

针对上述代码,解释如下:

1)在jQuery构造函数中,使用new创建并返回另一个构造函数的实例,这样可以在创建jQuery对象时,省略运算符new而直接写jQuery;此时,在构造函数中返回的是jquery.fn.init的实例,为了保证能够在jQuery.fn.init()的实例上访问jQuery()的原型方法和属性,令 jQuery.fn.init.prototype=jQuery.prototype。

时间: 2024-11-05 18:41:41

jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数的相关文章

jquery源码--总体结构

1 (function( window, undefined ) { 2 // 构造jQuery 对象 3 var jQuery = (function() { 4 var jQuery = function( selector, context ) { 5 return new jQuery.fn.init( selector, context, ro otjQuery ); 6 } 7 return jQuery; 8 })(); 9 // 工具方法 Utilities 10 // 回调函数

十五.jQuery源码解析之Sizzle总体结构.htm

Sizzle是一款纯javascript实现的css选择器引擎,它具有完全独立,无库依赖;小;易于扩展和兼容性好等特点. W3C Selectors API规范定义了方法querySelector()和querySelectorAll(),但是IE6,7不支持这两个方法. 在Sizzele内部,如果浏览器支持方法querySelectorAll(),则调用该方法查找元素,如果不支持,则模拟该方法的行为. Sizzle支持几乎所有的css3选择器,并且会按照文档位置返回结果. 上面截取的只是Siz

【转】Tomcat总体结构(Tomcat源代码阅读系列之二)

本文是Tomcat源代码阅读系列的第二篇文章,我们在本系列的第一篇文章:在IntelliJ IDEA 和 Eclipse运行tomcat 7源代码一文中介绍了如何在intelliJ IDEA 和 Eclipse中运行Tomcat源代码,本文介绍一下Tomcat的总体结构. 本文没有特别指明的地方,源代码都是针对tomcat7.0.42来说. Tomcat的总体结构 Tomcat即是一个Http服务器也是一个Servlet容器,它的总体结构我们可以用下图来描述: 通过上图我们可以看出Tomcat中

阅读jQuery源代码带给我们的18个惊喜

相信大家都非常熟悉jQuery类库,绝对最受欢迎的JS框架,如果你也有兴趣阅读v源代码的话,或者你也会有同感. 以下便是阅读jQuery源代码后挖掘的18条令人惊奇的信息: 原文:阅读jQuery源代码带给我们的18个惊喜 1. sizzle的大小 Sizzle是用来帮助jQuery实现DOM查询操作的引擎,可能你不知道它占用了jQuery源代码的22%. 其次最大的特性是$.ajax,占用了jQuery源代码中的8%. 2. $.grep 这个方法类似underscore中的_.filter方

jquery的2.0.3版本源码系列(1)总体结构

为什么选择2.X版本,而不是1.X版本,因为2.X不兼容IE6/7/8,所以少了兼容代码,让我们更专注于jquery原理的代码. 一共有8830行. 1.1 匿名函数自执行 首先,匿名函数的作用是,把函数内部的变量和函数变成"局部变量"和"局部函数"的,那么就不会与外部的变量和函数发生冲突了. (function(){ var a=10; })(); alert(a);//console.log报错,"Uncaught ReferenceError: a

jQuery源代码解析(1)—— jq基础、data缓存系统

闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的时间非常短,应该在1月.那时的版本号还是1.11.3,通过看妙味课堂的公开课视频和文档里的全部api的注解学习. 源代码则是近期些日子直接生啃.跳过了sizzle和文档处理的部分(待业狗压力大.工作以后再看).关注data.ready.event.queue.Defferred(jq的promise

jQuery源代码学习之六——jQuery数据缓存Data

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解

jQuery源代码 框架分析

每个框架都有一个核心.全部的结构都是基于这个核心之上,结构建立好了之后,剩下的就是功能的堆砌. jQuery的核心就是从HTML文档中匹配元素并对其操作. 就跟一座大楼一样.让我们一步一步了解这座大厦的基石和结构. 1.构造函数 2.链式语法 3.选择器 4.扩展性  一.构造函数 我们知道类是面向对象编程的一个重要概念.它是对事物的最高抽象.它是一个模型.通过实例化一个类,我们能够创建一个实例. javascript本身没有类的概念.仅仅有原型prototype.prototype是什么呢?它

jQuery源码分析-01总体架构

1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, undefined ) { // jquery code })(window); 1.这是一个自调用匿名函数.在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2.为什么要创建这样一个“自调用匿名函数”呢? 通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命