jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)

第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~

在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结构,如下:

 1 (function(){
 2 (21 , 94) 定义了一些变量和函数 jQuery = function(){};
 3 (96 , 283) 给JQ对象,添加一些方法和属性
 4 (285 , 347) extend : JQ的继承方法
 5 (349 , 817) jQuery.extend() : 扩展一些工具方法
 6 (877 , 2856) Sizzle : 复杂选择器的实现
 7 (2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理
 8 (3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理
 9 (3184 , 3295) support : 功能检测
10 (3308 , 3652) data() : 数据缓存
11 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理
12 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作
13 (4300 , 5128) on() trigger() : 事件操作的相关方法
14 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选
15 (6058 , 6620) css() : 样式的操
16 (6621 , 7854) 提交的数据和ajax() : ajax() load() getJSON()
17 (7855 , 8584) animate() : 运动的方法
18 (8585 , 8792) offset() : 位置和尺寸的方法
19 (8804 , 8821) JQ支持模块化的模式
20 (8826) window.jQuery = window.$ = jQuery;
21 })();

这一次,我们将开始对jQuery源码进行逐行分解。

首先从一开始的注释开始

开始的注释包含了以下内容:jQuery版本,jQuery官网,sizzle官网,jQuery版权信息,软件许可以及更新时间

接下来便开始了匿名自执行函数

1 (function(window,undefined){})(window);

先看下传参的作用:

window参数有两个作用:第一,在代码执行过程中,一些方法、属性都是通过树形结构联结的,传入window参数就相当于给程序指明了一个查找方向,这样提高了程序查找的效率;第二,传入window参数,这样便于后期对于代码压缩,在压缩过程中,window参数会变成一个压缩程序自动生成的变量代号,这样就便于压缩了。

undefined参数有一个作用:因为在这样大体量的程序中,像undefined这样的值很容易被篡改,所以在自执行匿名函数的参数中传入undefined,防止在程序过程中被无意篡改。

接下来的注释中,有关于use strict的部分,在此做一下说明:在严格模式下,代码需要特别规范,稍有不规范就会报错,建议不要使用。举个例子:

我们正常在声明赋值变量时,以下写法是正确的:

1 a=10;

但是在use strict模式下就会报错,必须要是

1 var a=10;

又比如关于八进制数,我们一般情况下,我们可以定义八进制数:

1  var a=010;

但是在use strict模式下,这个八进制数是不支持的,就会报错。

接下来从(23)行开始,定义了一些变量和一些函数

  rootjQuery:该变量表示jQuery的根目录,在第(866)行

1 rootjQuery=jQuery(document);

定义该变量便于后期代码的可维护

readyList:该变量和DOM加载有关,和ready(fn)相关的一个变量

core_strundefined=typeof undefined,字符串形式的undefined

在a==undefined和typeof a==‘undefined‘中,新版本浏览器没有差别,但是老版本浏览器可能前者无法判别,所以在此处,采用这种虽然难写一点但是保全的方式。

  location=window.location;将window下的location对象单独定义存储

  document=window.document;将window下的document对象单独定义存储

  docElem=document.documentElement;将document.element对象单独定义存储

接下来

  _jQuery=window.jQuery,

  _$=window.$,

这两个变量是用于防止和其他程序产生冲突的,很多程序在对外暴露接口的时候都会选择使用$符号,这样就难免发生冲突,此处就是解决了这样的冲突问题。

  class2type={}

$.type(),这是用来判断类型的

  core_deletedIds=[]

这个变量和缓存数据有关,一般在老版本中有用

  core_version=‘2.0.3‘

这个变量是该版本jQuery的版本号

  (52,58)core_concat=...

一些核心方法的存储,这其中包括了concat,push,slice,indexOf,toString,hasOwn,trim方法

接下来定义了jQuery函数

  jQuery=function(){}

  $() = jQuery()

下面对这个结构分析一下

1 jQuery=function(selector,context){
2         return new jQuery.fn.init(selector,context,rootjQuery);
3 }

但在第(283)行,出现了如下代码

1 (283)jQuery.fn.init.prototype=jQuery.fn;

jQuery.fn的初始化方法的原型就是jQuery.fn

在普通写面向对象时

1 function Aaa(){}
2 Aaa.prototype.init=function(){};
3 Aaa.prototype.css=function(){};

调用的时候:

var a1=new Aaa();
a1.init();
a1.css();

我们需要手动调用初始化方法,然后再去调用其他方法;

在jQuery中,面向对象是这样的:

1  function jQuery(){
2      return new jQuery.prototype.init();
3  }
4  jQuery.prototype.init=function(){};
5  jQuery.prototype.css=function(){};
6  jQuery.prototype.init.prototype=jQuery.prototype;

调用的时候:

1  var a2=new jQuery();
2  a2.css();

就不需要再去调用初始化方法了,初始化方法在new对象的时候就已经被调用过了。

接下来定义了一些匹配正则

  (67)core_pnum=...这匹配数字的正则

  core_rnotwhite=...这是匹配单词

  rquickExpr=...匹配防止XSS注入,防止输入框输入病毒的正则,类似<p>aaa 或者#div    这样的形式

  rsingleTag=...匹配独立空标签,例如<p></p>    <div></div>    这样的形式

  rmsPrefix=...IE浏览器前缀

  rdashAlpha=...转大小写    -l转成L这样的形式

接下来

1 fcamelCase=function(all,letter){
2         return letter.toUpperCase();
3 }

转驼峰命名法的回调函数

1 completed=function(){
2         document.removeEventListener(‘DOMContentLoaded‘,completed,false);
3         window.removeEventListener(‘load‘,completed,false);
4         jQuery.ready();
5 }

DOM加载成功之后触发的回调函数

感谢大家百忙之中来阅读我的博客~~

点击下载jQuery代码文件

上一篇传送门:jQuery源码逐行分析学习01(jQuery的框架结构简化)

原文地址:https://www.cnblogs.com/cumtchj/p/8458408.html

时间: 2024-08-13 13:48:54

jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)的相关文章

jQuery源码逐行分析学习01(jQuery的框架结构简化)

最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美化工作可能不够到位,也希望大家多多见谅! 首先这篇文章要给大家分享的是:jQuery的框架结构,把框架结构简单化处理 此处我所学习使用的jQuery版本是2.0.3版本(文件已经上传到我的文件中,大家可以去下载),一个相对比较老的版本,但是其实基本的功能都与新版本类似,该版本开发版代码共8830行.

jQuery源码研究分析学习笔记-静态方法和属性(10)

jQuery源码中定义了一些重要的静态属性和方法,它们是其他模块实现的基础,整体的源码结构如下 //把window.jQuery和winow.$备份到局部变量_jQuery和_$ _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, jQuery.extend({ //许多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样.在 jQuery 中,$ 仅仅是 jQuery

jquery源码学习笔记(一)jQuery的无new构建

本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不多说了,直接切入正题. 最近看了好几篇jQuery 源码的文章,对于jQuery的无new构建  很是不解. 查了很多资料,总算是搞明白了. jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery

jquery 源码学习(四)构造jQuery对象-工具函数

jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:[email protected] 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪

jQuery源码解读 - 数据缓存系统:jQuery.data

jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据如何关联着这个Element一直是web前端的大姨妈,而最初的jQuery事件系统照搬Dean Edwards的addEvent.js:将回调挂载在EventTarget上,这样下来,循环引用是不可忽视的问题.而在web前端中,数据和DOM的关系太过基情和紧张,于是jQuery在1.2中,正式缔造了

jquery源码笔记(四): jquery.extend=jquery.fn.extend

extend()  方法,   合并两个或更多对象的属性到第一个对象中,jQuery后续的大部分功能都通过该函数扩展, 当参数只有一个对象时,则将对象的属性添加到jQuery对象中. jquery 中扩展插件的形式:  2种方法 $.extend({ //扩展工具方法 aaa:function(){ alert(10); }, bbb:function(){ alert(20) } }); $.fn.extend({ //扩展jquery实例方法 aaa:function(){ alert("f

jquery源码笔记(三): jquery.prototype的一些方法 和属性 init

jquery.fn = jquery.prototype = { 添加实例属性和方法, jquery: 版本, constructor: 修正指向问题 init(): 初始化 和 参数管理 selector:存储选择字符串 length: this 对象的长度 toArray(): 转数组 get(): 转原生集合 pushStack(): jquery 对象入栈 each()  :  便利集合 ready():DOM加载的接口 slice(): 集合的截取 first(): 集合的第一项 la

jQuery源码研究分析学习笔记-回调函数(11)

回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. // 工具函数,将字符串格式的标记转换为对象格式,并把转换结果缓存起来 function createFlags( flags ) { //初始化返回值object和flagsCache[flags]为空对象,同时指向了同一个空对象,当变

jQuery源码研究分析学习笔记-jQuery.deferred()(12)

JS是单线程语言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些复杂问题. 但js暴露了应用开发中的一个严重问题,单线程环境看起来对用户请求响应迅速,但是当线程忙于处理其它事情时,就不能对用户的鼠标点击和键盘操作做出响应. jQuery.deferred异步模型提供了一个抽象的非阻塞的解决方案. jQuery.deferred()在jQ中常用的有: promise Ajax模块 动画模块 DOM ready jQuery.Defe