一、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。

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

  1. jQuery源代码阅读之三——jQuery实例方法和属性

    jQuery实例方法及属性相关的代码结构如下 jQuery.fn=jQuery.prototype={ jQuery:core_version, constructor:jQuery, selecto ...

  2. jQuery源代码阅读之二——jQuery静态属性和方法

    一.jQuery.extend/jQuery.fn.extend //可接受的参数类型如下:jQuery.extend([deep],target,object1,[objectN]) jQuery. ...

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

    本文是Tomcat源代码阅读系列的第二篇文章,我们在本系列的第一篇文章:在IntelliJ IDEA 和 Eclipse运行tomcat 7源代码一文中介绍了如何在intelliJ IDEA 和 Ec ...

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

    相信大家都非常熟悉jQuery类库,绝对最受欢迎的JS框架,如果你也有兴趣阅读v源代码的话,或者你也会有同感. 以下便是阅读jQuery源代码后挖掘的18条令人惊奇的信息: 原文:阅读jQuery源代 ...

  5. jquery源码学习笔记一:总体结构

    练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...

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

    为什么选择2.X版本,而不是1.X版本,因为2.X不兼容IE6/7/8,所以少了兼容代码,让我们更专注于jquery原理的代码. 一共有8830行. 1.1 匿名函数自执行 首先,匿名函数的作用是,把 ...

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

    闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...

  8. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  9. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. 20145304 Java第三周学习报告

    20145304 <Java程序设计>第三周学习总结 教材学习内容总结 1.定义类: 类定义时使用class关键词,建立实例要使用new关键词. 代码如下: /*定义类 书上例子 衣服的型 ...

  2. HDU 4749 Parade Show(贪心+kmp)

    题目链接 题目都看不懂,做毛线...看懂了之后就是kmp出,所有的匹配区间,然后DP可以写,贪心也可以做把,DP应该需要优化一下,直接贪,也应该对的,经典贪心问题. #include<iostr ...

  3. 移动端页面0.5px border的实现

    移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...

  4. 纪念逝去的岁月——C++实现一个队列(使用类模板)

    1.代码 2.运行结果 1.代码 #include <stdio.h> #include <string.h> template <typename T> clas ...

  5. JAVA复制网络图片到本地

    import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.Out ...

  6. About_MySQL Select--来自copy_03

    MySQL Select   查询分类 单表查询:简单查询 多表查询:连接查询 联合查询:多个查询结果汇总 查询的组成 投影查询:挑选要显示的字段 select array1,array2,... f ...

  7. uva 1382 - Distant Galaxy

    题目连接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91208#problem/G 题意:  给出平面上的n个点,找出一个矩形,使得边 ...

  8. 搜索框js样式(通用型)

    HTML部分代码: -------------------------------------------------------------- <div class="search_ ...

  9. 【资源】mp3的外链资源

    做开发有时候会遇到需要mp3外链来进行程序的调试,但是自己搭建服务器比较麻烦,而主流的音乐平台都不提供外链音乐.晚上偶得一外链mp3的网站,标记之: http://9hok.com/

  10. [LintCode] Gray Code 格雷码

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...