注意:本次源码分析选择2.0.3(因为不支持IE6、7、8,就少了很多兼容的hack的写法,对了解jQuery的实现原理有很大的帮助)

1.jQuery有不同的版本,从2.x版本便不再支持IE6、7、8

将jQuery拆分长框架一点一点进行了解

2.

(function ())();

这个叫匿名函数自执行

3.匿名函数自执行的好处是什么呢?

匿名函数自执行里面的所有东西都是一个局部的。防止和其他的代码冲突。

栗子①

(function () {
   var a=10;
})();
alert(a);

控制台报错,说a is not defined。

4.如何能够访问到匿名函数自执行中的方法呢?

很多种方法(⊙o⊙)哦。可以把你要对外提供的接口作为window的属性或者是方法。

栗子②

(function () {
var a=10; function abc(){
alert(a);
}
//将abc方法作为window的方法,就可以在匿名函数自执行外面进行访问了
window.abc=abc;
})();
abc();

但是要对外提供接口,我们才能找到使用的方法和属性

5.在jQuery中,$()是jQuery()的简写方式。

6.在jQuery文件中第21行到第94行就是定义了一些变量和函数。

其中,60-64行是一个特别重要的函数,就是平时用的$() jQuery()对外的接口

// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

但是现在这个jQuery还是以局部变量的形式存在,要提供对外的接口,才能使用。提供接口在第8823-8827行

// If there is a window object, that at least has a document property,
// define jQuery and $ identifiers
if ( typeof window === "object" && typeof window.document === "object" ) {
window.jQuery = window.$ = jQuery;
}

7.在第96-283行,都是给jQuery对象添加一些方法和属性。

prototype(原型)是面向对象的东西,所以说,jQuery就是一个基于面向对象的程序,jQuery里面写的都是跟面向对象有关的。

//96行
jQuery.fn = jQuery.prototype

8.为什么jQuery是一个基于面向对象的程序??

栗子③

//jQuery是这样调用方法的对吧。是不是和下面数组使用方法的方式非常像。
//但是实际上$("div")他本身是一个函数调用,但是函数调用的执行结果是一个对象,所以,这就是为什么说jQuery是基于面向对象的程序喽~~~
$("div").css();
$("div").text();

//这是Array对象方法的使用方式,先实例化一个对象,然后使用对象调用方法。
var arr=new Array(3);
arr.sort();
arr.splice();
//61--64
jQuery = function( selector, context ) {
//在这个函数执行完了就是一个new构造函数的过程,返回的就是一个jQuery对象~~既然返回的是对象,当然可以调用方法喽~~
return new jQuery.fn.init( selector, context, rootjQuery );
}

9.285--347行-->  extend:是jQuery当中的一个继承方法,希望后续添加的方法都能挂在jQuery对象上,很方便扩展

10.

//通过使用对象调用的方法,是实例方法。
$().text();
$().html(); //$是一个函数,在函数下面来扩展方法的话,就是扩展一些静态方法
//在jQuery当中,给面向对象扩展静态属性和静态方法叫做扩展工具方法
//工具方法和实例方法区别就在于,它既可以给jQuery对象来用,也可以给源生的JS来用,实例方法只能给jQuery对象调用
$.trim();
$.proxy();

11.静态方法和实例方法在jQuery中的关系?

可以把静态方法看作是在jQuery中的最底层,而实例方法是上一层或者是更高层的。

很多方法都是实例方法,里面调用的都是工具方法。

12.877行--2856行  Sizzle 复杂选择器的实现

13.2880行--3042行  Callbacks 回调对象 : 函数的统一管理

逐行分析jQuery源码的更多相关文章

  1. 分析jQuery源码时记录的一点感悟

    分析jQuery源码时记录的一点感悟      1.  链式写法      这是jQuery语法上的最大特色,也许该改改POJO里的set方法,和其他的非get方法什么的,可以把多行代码合并,减去每次 ...

  2. 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

    背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...

  3. jQuery源码解析资源便签

    最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...

  4. jQuery源码分析学习--资料收集--更新中

    1.逐行分析jQuery源码的奥秘 - 网易云课堂  http://study.163.com/course/courseMain.htm?courseId=465001#/courseDetail? ...

  5. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  6. jquery 源码分析

    想给自己一个任务,接下来要分析jquery源码,然后按照jquery的思想打造一个适合webkit的类jquery微框架,一切从模仿起!

  7. jquery源码分析之一前言篇

    1.问:jquery源码分析的版本是什么? 答:v3.2.1 2.问:为什么要分析jquery源码? 答:javascript是一切js框架的基础,jquery.es6.vue.angular.rea ...

  8. jQuery源码分析之整体框架

    之前只是知道jQuery怎么使用,但是我觉得有必要认真的阅读一下这个库,在分析jQuery源码之前,很有必要对整个jQuery有个整体的框架概念,才能方便后面对jQuery源码的分析和学习,以下是我总 ...

  9. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

随机推荐

  1. Intellij dea 注释行如何自动缩进?

    Intellij dea 注释行如何自动缩进?   进入 Settings -> Code Style -> Java ,在右边选择 “Code Generation” Tab,然后找到 ...

  2. MapReduce中,new Text()引发的写入HDFS的输出文件多一列的问题

    前段时间业务系统有个模块数据没有了,在排查问题的时候发现中间处理环节出错了,错误日志为文件格式不正确,将数据导出后发现这个处理逻辑的输入文件中每一行都多了一列,而且是一个空列(列分隔符是\t).第一次 ...

  3. springboot 中使用Druid 数据源提供数据库监控

    一.springboot 中注册 Servlet/Filter/Listener 的方式有两种,1 通过代码注册 ServletRegistrationBean. FilterRegistration ...

  4. django -- 为模式增加方法

    在django中模式中的方法是行级的.也就是说它操作是表里的行.不是整个表 一.模式定义: from django.db import models # Create your models here ...

  5. uefi+GPT分区安装ubuntu[zz]

    现状:1.预装win8的笔记本几乎都是uefi启动模式,配合GPT磁盘分区,于是遇到了“麻烦”不会装了,或者说按照老教程安装,结果失败了.而且有很多人在问怎么解决,其实网上就有嘛,关键词就是“uefi ...

  6. postman发送post数据到node.js中

    使用get请求我们很容易的来利用postman来发送数据,但是今天的express在使用postman进行post请求的时候,竟然解析的body是空对象.在网上找了一下果然有解决方法,如下: 因为是P ...

  7. Feign请求中报错:Request header is too large 的解决方案。

    现在我们项目中都已迁入spring boot和spring cloud. 服务间调用现在都改成feign的调用方式,但是上次在实际使用过程中出现过:Request header is too larg ...

  8. SaaS多租户模式数据存储方案

    云计算多租户几乎用于所有软件即服务 (Software as a Service, SaaS) 应用程序,因为计算资源是可伸缩的,而且这些资源的分配由实际使用决定.话虽如此,用户可以通过 Intern ...

  9. Objective-C 位运算符

    转自:http://www.yiibai.com/objective_c/objective_c_bitwise_operators.html 下表中列出了支持Objective-C语言的位运算符.假 ...

  10. 逆向project实战--Acid burn

    0x00 序言 这是第二次破解 crackme 小程序,感觉明显比第一次熟练.破解过程非常顺利,差点儿是分分钟就能够找到正确的 serial,可是我们的目标是破解计算过程.以下将具体介绍. 0x01 ...