这张图片是对jQuery源码截图,一点一点拼出来的.
现在根据这张图片来对jQuery框架做一些说明.
一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含的所有js代码都会被执行.
二.在22行中声明的jQuery变量最终接受的是内部创建的jQuery构造器函数.
这个变量在9284行中被赋值给了window.jQuery属性.此时的jQuery可以被外界访问到了,并且也有了别名$.
三.97~319行,对jQuery的原型进行了重写.因为重新原型必然导致constructor的默认指向的改变,
所以98行重新对constructor属性进行了设置.
99行上,定义了原型上的方法jQuery.fn.init(),它负责解析参数selector和context的类型并执行相应的查找;
在27行上可以看到,当我们调用jQuery时,return的是jQuert.fn.init()的实例,
在init()后面还定义了一大堆的属性和方法,
例如selector,length,size(),toArray(),get()....在图中就没有显示出来了.
四.从322行可以看出很奇怪想象.jQuery的原型覆盖了jQueryfn.init()方法(构造器)的原型对象.
25~28行.我们调用jQuery方法时,内部调用的是jQuery.fn.init(),也就是说我们访问的应该是
jQuery.fn.init()原型中的属性,方法,可是我们为什么还可以访问到jQuery原型的属性和方法.
例如$("div").length;这个时候就可以从jQuery.fn.init.prototype=jQuery.fn;中找到答案了.
五.324行定义了jQuery.extend()和jQuery.fn.extend(),用于合并两个或多个对象的属性到第一个对象,
388~918行执行jQuery.extend()在jQuery构造函数三定义了一堆静态属性,
如:noConflict(),isReady,readyWait,holdReady()

六.使用过jQuery的人都知道,我们想要获取到一个jQuery对象,只需要这样写就可以了:$("#guo")或jQuery("#guo").
可是在js中我们通过构造器来实例化一个对象通常都是这种写法:new Fun().
为什么获取jQuery对象不需要使用new关键字呢?从25~28行可以找到答案.因为jQuery在构造器内部使用new创建了
一个对象,并且返回回来,这样大大的简化了在使用jQuery时的代码量.
七.从322行中看到,jQuery.prototype和jQuery.fn使用得是同一个引用.
这样做有一个好处,就是在使用jQuery原型时,可以直接使用jQuery.fn,这样比jQuery.prototype少些7个字符,
这也符合"write less,do more"思想.
八.22~983行是一个自执行函数,返回结果最终是内部jQuery变量,
为什么不直接去掉25行的函数,在22行代码上使用25行的效果.
981行这样写:return new jQuery.fn.init(.....).
如果这样写的话,就会增加了jQuery各个模块的耦合度.在25~97行中,定义了许多的局部变量,
而这些函数只需要在构造jQuery对象时才使用.所以jQuery的这种做法是一个高内聚低耦合的设计思想.
九.为什么重写jQuery的原型.在原型对象上定义的属性和方法会被所有jQuery对象继承,
可以有效减少每个jQuery对象所需的内存.因此不必担心jQuery拥有太多的属性和方法而担心占用太多的内存.

三.jQuery源码解析之jQuery的框架图的更多相关文章

  1. jquery源码解析:jQuery数据缓存机制详解2

    上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...

  2. jquery源码解析:jQuery数据缓存机制详解1

    jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...

  3. jquery源码解析:jQuery工具方法when详解

    我们先来看when方法是如何使用的: var cb = $.when();   //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...

  4. jquery源码解析:jQuery队列操作queue方法实现的原理

    我们先来看一下jQuery中有关队列操作的方法集: 从上图可以看出,既有静态方法,又有实例方法.queue方法,相当于数组中的push操作.dequeue相当于数组的shift操作.举个例子: fun ...

  5. jquery源码解析:jQuery静态属性对象support详解

    jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...

  6. jquery源码解析:jQuery工具方法Callbacks详解

    我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add ...

  7. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

    请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...

  8. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

    请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...

  9. 四.jQuery源码解析之jQuery.fn.init()的参数解析

    从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出 参数selector和context是来自我们在调用jQuery方法时 ...

随机推荐

  1. Codeforces Beta Round #57 (Div. 2) A,B,C,D,E

    A. Ultra-Fast Mathematician time limit per test 2 seconds memory limit per test 256 megabytes input ...

  2. codevs 2216 行星序列 线段树+延迟标记(BZOJ 1798)

    2216 行星序列  时间限制: 2 s  空间限制: 256000 KB     题目描述 Description “神州“载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始, ...

  3. [转]如何使用VS 2013發布一個可以在Windows XP中獨立運行的可執行文件

    https://read01.com/Mg337.html (台/湾的论坛,需要f/q) 1. 閱讀此文章的同學先看看我的另外一篇文章: 現在,我們深入探討一下: <如何使用VS 2013發布一 ...

  4. Android之shape与selector实现圆角

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  5. 51nod-1420-贪心

    1420 数袋鼠好有趣  题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有n只袋鼠.每只袋鼠的大小用一个整数表示 ...

  6. java Cookie 获取历史记录列表(三)

    /** * 获取Cookie里面的东西 */ protected List<String> getCookieList() { Cookie[] cookies = null; Cooki ...

  7. Jacoco的原理

    覆盖率计数器 Jacoco使用一系列的不同的计数器来做覆盖率的度量计算.所有这些计数器都是从java的class文件中获取信息,这些class文件可以(可选)包含调试的信息在里面.即使在没有源码的情况 ...

  8. PyalgoTrade 打印收盘价(二)

    让我们从一个简单的策略开始,就是在打印收盘价格的过程中: from pyalgotrade import strategy from pyalgotrade.barfeed import yahoof ...

  9. 各种Java加密算法

    如基本的单向加密算法: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法) SHA(Secure Hash Algorit ...

  10. scanf()与gets()的区别

    scanf()与gets()的区别 1.scanf()可以同时接受多个字符串,而gets()一次只能接受一个字符串. #include<stdio.h>int main(){ char s ...