概览

  整体结构

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

匿名函数 :14

 
  1. (function (window,undefined){
  2. //......
  3. })(window)

为什么传入window

1:为了便于压缩 2:当方法内部使用的时候,查找的速度快。

为什么传入undefined

防止undefined在外部被修改

  1. var undefined=1

如果这样赋值,那undefined的值从此以后变为1,影响以后的判断。

严格执行 :20

'use strict'
低版本不支持,.net跟踪不支持。根据项目选型决定是否开启。

rootjQuery :23

 
  1. rootjQuery=jQuery(document);//:866

为了压缩,可维护

core_strundefined :30

 
  1. core_strundefined=typeof undefined

为了支持 IE9,从而使用type of xmlNode.method代替xmlNode.method !==undefined

变量存储 :33

 
  1. location = window.location //:33
  2. document=window.document
  3. docElem=document.documenttElement
  4.  
  5. core_concat = core_deletedIds.concat, //:52
  6. core_push = core_deletedIds.push,
  7. core_slice = core_deletedIds.slice,
  8. core_indexOf = core_deletedIds.indexOf,
  9. core_toString = class2type.toString,
  10. core_hasOwn = class2type.hasOwnProperty,
  11. core_trim = core_version.trim,

防冲突 :38

 
  1. _jQuery=window.jQuery
  2. _$=window.$

class2type={} :44

$.tpye() 会用到,clas2type形如 {'[objectt String]'}

core_version="2.0.3" :49

版本号

jQuery声明

最终$()调用的是这个

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

jQuery 原型

 
  1. //:96
  2. jQuery.fn = jQuery.prototype = {
  3. jquery: core_version,
  4. constructor: jQuery,
  5. init: function( selector, context, rootjQuery ) {...}
  6. }
  7. //:283
  8. jQuery.fn.init.prototype = jQuery.fn;

实际上jQuery.prototype.init.prototype = jQuery.prototype。之后的的代码就可以写成颗粒化的调用操作,形如jQuery().css()

通用正则

数字

 
  1. //:67
  2. core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,

非空字符,比如单词

 
  1. core_rnotwhite = /\S+/g,

html标签

防止通过location.hash的XSS注入(#9521)

 
  1. rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

独立空标签

比如 <p></p>

 
  1. rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,

IE驼峰转换

-ms-aaa-bbb转换成MsAaaBbb

 
  1. rmsPrefix = /^-ms-/,

普通驼峰转换

 
  1. rdashAlpha = /-([\da-z])/gi,

jQuery.prototype :98

jquery:版本 :100

jquery: core_version,

constructor:修正指向问题

constructor: jQuery,
不写容易被修改,例如

 

  1. //Aaa
  2. Aaa.prototype.name='hello'
  3. Aaa.prototype.age=30
  4. //Object
  5. AAA.prototype={
  6. name:'hello',
  7. age30
  8. }

init:初始化和参数管理 :101

对传入的参数分别处理

忽略的

 
  1. $(""), $(null), $(undefined), $(false)

字符的

 
  1. if 字符左侧是`<`且右侧是`>`且长度 大于3
  2. //$('<li>') $('<li>1</li><li>2</li>')
  3. match=[null,'<li>',null]
  4. else
  5. match=null //$('.box') $('div') $('#div1 div.box')
  6. match=['$#div1',null,'div1']//$('#div1')
  7. match=['<li>hello','<li>',null] $('<li>hello')
  8. if ( match && (match[1] || !context) ) {// :120
  9. //$('<li>') $('#div1')
  10. if(match[1]){
  11. //HANDLE: $(html) -> $(array)
  12. 使用jQuery.parseHTMLhtml代码转数组
  13. 使用jQuery.mergejson转数组
  14. // HANDLE: $(html, props)
  15. if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) )
  16. }else{
  17. //HANDLE: $(#id) :151
  18. elem = document.getElementById( match[2] );
  19. //黑莓4.6兼容代码 :155
  20. }
  21. // HANDLE: $(expr, $(...))
  22. }else if ( !context || context.jquery ) {
  23. // HANDLE: $(expr, context) 例如 $(context).find(expr)
  24. } else {
  25. }
  26. // HANDLE: $(DOMElement)
  27. else if ( selector.nodeType ) {
  28. // HANDLE: $(function)
  29. else if ( jQuery.isFunction( selector ) ) {
  30. jQuery.makeArray dom集合转数组或对象

selector:存储选择字符串

length:this对象的长度

toArray():转数组 :202

return core_slice.call( this );
$('div'):{0:div,1:div,length:2} =>[div,div]
实际是调用slice

get():转原生集合 :208

根据num返回全部或其中某个元素

 
  1. get: function( num ) {
  2. return num == null ?
  3. this.toArray() :
  4. ( num < 0 ? this[ this.length + num ] : this[ num ] );
  5. },

pushStack():jQ对象入栈 :220

一个栈里放1个jQ对象,1个jQ对象包含1个或多个dom

each():遍历集合 :236

工具方法jQuery.each

ready():DOM加载的接口 :240

工具方法jQuery.reday.promise.done(fn)

slice():集合的截取 :247

栈操作 this.pushStack( core_slice.apply( this, arguments ) );

first():集合的第一项

this.eq( 0 )

last():集合的最后一项

this.eq( -1 )

eq():集合的指定项

map():返回新集合

 
  1. return this.pushStack( jQuery.map(this, function( elem, i ) {
  2. return callback.call( elem, i, elem );
  3. }));

end():返回集合前一个状态

return this.prevObject || this.constructor(null);

push(): 内部使用

core_push

sort(): 内部使用

[].sort,

splice(): 内部使用

splice: [].splice

jQuery.extend

拷贝方法 :285

 
  1. 定义一些变量
  2. if(){} 看是不是深拷贝情况
  3. if(){} 看参数正确不
  4. if(){} 看是不是插件情况
  5. for(){ 可能有多个对象情况
  6. if(){} 防止循环引用
  7. if(){} 深拷贝
  8. else if(){} 浅拷贝
  9. }

防止循环引用

 
  1. if ( target === copy ) {
  2. continue;
  3. }

深拷贝

 
  1. if ( copyIsArray ) {
  2. copyIsArray = false;
  3. clone = src && jQuery.isArray(src) ? src : [];
  4. } else {
  5. clone = src && jQuery.isPlainObject(src) ? src : {};
  6. }
  7. // Never move original objects, clone them
  8. target[ name ] = jQuery.extend( deep, clone, copy );

浅拷贝

 
  1. target[ name ] = copy;

工具方法

 
  1. jQuery.extend({
  2. expando:生成唯一jQ字符串(内部)
  3. noConflict():防止冲突
  4. isReady: dom是否加载完(内部)
  5. readyWait:等待多少文件的计数器(内部)
  6. holdReady(): 推迟dom触发
  7. ready():准备dom触发
  8. isFunction():是否为函数
  9. isArray():是否为数组
  10. isWindow():是否为window
  11. isNumberic():是否为数字
  12. type():判断数据类型
  13. isPlainObjeect():是否为对象自变量
  14. isEmptyObject():是否为空的对象
  15. error():抛出异常
  16. parseHTML():解析节点
  17. parseJSON():解析JSON
  18. parseXML():解析XML
  19. noop():空函数
  20. globalEval():全局解析js
  21. })

expando 唯一映射 :351

生成唯一jQuery字符串,做映射关系用

 
  1. expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" ),

noConflict 防止冲突 :353

 
  1. if ( window.$ === jQuery ) {
  2. window.$ = _$;
  3. }
  4. if ( deep && window.jQuery === jQuery ) {
  5. window.jQuery = _jQuery;
  6. }
  7. return jQuery;

dom加载相关

jQuery.ready.promise

 
  1. if ( document.readyState === "complete" ) {
  2. // 防止Ie的提前执行
  3. setTimeout( jQuery.ready );
  4. } else {
  5. // 若dom加载了则执行,否则监听完成后执行
  6. document.addEventListener( "DOMContentLoaded", completed, false );
  7. window.addEventListener( "load", completed, false );
  8. }

readyList

holdReady(hold) :373

为true时执行ready,否则readyWait计数

 
  1. if ( hold ) {
  2. jQuery.readyWait++;
  3. } else {
  4. jQuery.ready( true );
  5. }

ready(wait) :382

 
  1. //如果有wait,或者ready,中止
  2. if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
  3. return;
  4. }
  5. jQuery.isReady = true;
  6. // 如果被触发,那么递减,如果需要则等待
  7. if ( wait !== true && --jQuery.readyWait > 0 ) {
  8. return;
  9. }
  10. //如果有函数绑定,则执行。
  11. readyList.resolveWith( document, [ jQuery ] );
  12. // 触发任何绑定事件
  13. if ( jQuery.fn.trigger ) {
  14. jQuery( document ).trigger("ready").off("ready");
  15. }

type(obj) :423

 
  1. if ( obj == null ) {
  2. return String( obj );
  3. }
  4. // 兼容: Safari <= 5.1
  5. return typeof obj === "object" || typeof obj === "function" ?
  6. class2type[ core_toString.call(obj) ] || "object" :
  7. typeof obj;

isWindow(obj) :415

不为空且window属性相同(undefined 没有属性)

 
  1. return obj != null && obj === obj.window;

isNumeric(obj) :417

typeof NaN 或 finite ==='number'

 
  1. return !isNaN( parseFloat(obj) ) && isFinite( obj );

parseHTML(data, context, keepScripts) :475

 
  1. //校验输入
  2. parsed=正则匹配data
  3. //单标签
  4. return context.createElement( parsed[1] )
  5. //多标签
  6. //判断是否保留script
  7. parsed = jQuery.buildFragment( [ data ], context, scripts )
  8. return jQuery.merge( [], parsed.childNodes );

globalEval(code) :528

直接调用eval无法全局访问,必须先赋值

 
  1. var indirect = eval;
  2. if 'use strict'
  3. createElement
  4. document.head.appendChild( script ).parentNode.removeChild( script )
  5. else
  6. indirect(code)

camelCase :552

修正IE,驼峰转换

 
  1. return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase )

nodeName( elem, name ) :556

全转小写判断是否相同

 
  1. return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();

each( obj, callback, args ) :561

 
  1. i=0
  2. length=obj.length //若json则不存在
  3. isArray=isArraylike(obj)
  4. if isArray
  5. for(;;)
  6. callback.call
  7. else
  8. for in
  9. callback.call

makeArray :615

类数组转数组

 
  1. if isArraylike( Object(arr)
  2. jQuery.merge
  3. else
  4. core_push

inArray( elem, arr, i ) :632

indexOf

 
  1. return arr == null ? -1 : core_indexOf.call( arr, elem, i );

merge( first, second ) :636

获取2个变量的length

if 非json

 
  1. for
  2. first[ i++ ] = second[ j ]

else

 
  1. while
  2. first[ i++ ] = second[ j++ ]

grep( elems, callback, inv ) :656

过滤新数组

 
  1. for
  2. retVal = !!callback( elems[ i ], i )
  3. if inv !== retVal
  4. ret.push( elems[ i ] )

map( elems, callback, arg ) :676

 
  1. //分别处理arr 和json
  2. for
  3. value = callback( elems[ i ], i, arg );
  4. if ( value != null ) {
  5. ret[ ret.length ] = value;
  6. }
  7. return core_concat.apply( [], ret );

proxy( fn, context ) :713

 
  1. context 若是string
  2. content=fn(content)
  3. return function(){
  4. return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) )
  5. }
  6. proxy.guid = fn.guid = fn.guid || jQuery.guid++

access( elems, fn, key, value, chainable, emptyGet, raw ) :742

elems $('#div1')
fn 回调函数
key,value {background:'red'}

 
  1. if type(key) ==='object'
  2. for
  3. access
  4. else if value !== undefined
  5. //空
  6. //非函数
  7. //函数

swap( elem, options, callback, args ) :798

设置display可见
设置visibility:hidden
获取样式
属性再转回去

isArraylike(obj) :848

判断不是window

 
  1. nodeType==1&&length #是节点 返回true
  2. return type === "array"
  3. ||type !== "function"
  4. &&( length === 0
  5. ||typeof length === "number"
  6. && length > 0
  7. && ( length - 1 ) in obj )

createOptions(options)

将'once memory'=>{once:true,memory:true}
each

 
  1. obj[flag]=true

jQuery.Callbacks(options) :2880

once// fire for list
memory//add()时直接执行
unique//重复函数,add()时判断去重
stopOnFalse//fire for list

add(arg)

 
  1. 分别判断arg=aaa
  2. arg=aaa,bbb
  3. arg=[aaa,bbb]
  4. if menory==true
  5. fire

remove(arg) :2965

分隔数组

has(fn) :2987

jQuery.InArray

fireWith(context,args) :3018

 
  1. if list && ( !fired || stack )
  2. if firing
  3. stack.push(args)
  4. else
  5. fire(args)

Deferred(func) :3045

异步操作,延迟对象,基于$.Callbacks()
$.ajax(url).done(=>resolve).fail(=>reject)

"resolve", "done", jQuery.Callbacks("once memory"), "resolved"

成功
resolve=>fire
done=>add

"reject", "fail", jQuery.Callbacks("once memory"), "rejected"

失败
reject=>fire
fail=>add

"notify", "progress", jQuery.Callbacks("memory")

notify=>fire
progress =>add

when() 批量延迟:3133

内部有个计数器,当$.when(a(),b(),c()) 中的arguments.length随着done()后减少到0,实际执行$.Deferred->resolve()
参数必须返回deferred延迟对象,不然则跳过该项。

support 功能检测:3184

统一兼容性问题。

checkOn复选框value值

老版本chrome是‘’,新的是‘on’

optSelected下拉菜单子项第一项选中

ie不会选中

noCloneChecked 克隆复选框的选中状态

ie9,10没有选中

focusinBubbles 选中的冒泡机制

data 数据缓存 :3308

 
  1. key 自定义属性,<div JQueryxxxx="x">
  2. setgetaccessremovehasDatadiscard

jQuery2.0.3源码的更多相关文章

  1. 一起学习jQuery2.0.3源码—1.开篇

    write less,do more jQuery告诉我们:牛逼的代码不仅精简而且高效! 2006年1月由美国人John Resig在纽约的barcamp发布了jQuery,吸引了来自世界各地众多Ja ...

  2. jQuery2.0.3源码分析系列(28) 元素大小

    最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 ...

  3. jQuery2.0.3源码分析系列之(29) 窗口尺寸

    .height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width() 基础回顾 一般的,在获取浏览器窗口的大小和位置 ...

  4. 逐行分析jQuery2.0.3源码-完整笔记

    概览 (function (){ (21 , 94) 定义了一些变量和函数 jQuery=function(); (96 , 293) 给jQuery对象添加一些方法和属性; (285 , 347) ...

  5. jquery-2.0.3 源码分析 整体架构

    关键 var jQuery = function( selector, context ) { return new jQuery.fn.init(); } jQuery.fn = jQuery.pr ...

  6. 英蓓特Mars board的android4.0.3源码编译过程

    英蓓特Mars board的android4.0.3源码编译过程 作者:StephenZhu(大桥++) 2013年8月22日 若要转载,请注明出处 一.编译环境搭建及要点: 1. 虚拟机软件virt ...

  7. Ubuntu12.04编译Android4.0.1源码全过程-----附wubi安装ubuntu编译android源码硬盘空间不够的问题解决

    昨晚在编译源码,make一段时间之后报错如下: # A fatal error has been detected by the Java Runtime Environment: # # SIGSE ...

  8. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

  9. Android L(5.0)源码之手势识别onTouchEvent

    onTouchEvent同样也是在view中定义的一个方法.处理传递到view 的手势事件.通过MotionEvent的getAction()方法来获取Touch事件的类型,类型包括ACTION_DO ...

随机推荐

  1. json,异步加载,时间线

    JSON是一种传输数据的格式 JSON.stringify(obj);  obj--string JSON.parse(str);   string-->obj      

  2. DMA(Direct Memory Access直接存储器访问)总结

    转载于http://blog.csdn.net/peasant_lee/article/details/5594753 DMA一种高速的数据传输操作,允许在外部设备和存储器之间直接读写数据,不需要CP ...

  3. idea中在编码时候经常用到的快捷键

    Ctrl+z 撤销 Ctrl+shift+z 重做 复制 粘贴 剪贴 其中idea可以在光标的当前行不用选中代码,只用ctrl+c,ctrl+v,ctrl+x 就可以复制,粘贴,剪贴 光标的那一行的代 ...

  4. 注解@Slf4j的作用

    lombok.extern.slf4j 代码: @Slf4j public class LogExample { } 产生以下代码: public class LogExample { private ...

  5. Angular5 *ngIf 和 hidden 的区别

    问题 项目中遇到一个问题,有一个过滤查询的面板,需要通过一个展开折叠的button,来控制它的show 和 hide.这个面板中,有一个Select 组件,一个 input 查询输入框. 原来代码是: ...

  6. spring boot-7.日志系统

    日志系统分为两部分,一部分是日志抽象层,一部分是日志实现层.常见的日志抽象层JCL,SLF4J,JBoss-Logging,日志实现层有logback,log4j,log4j2,JUL.日志抽象层的功 ...

  7. Spring MVC 中使用AOP 进行统一日志管理--注解实现

    1.AOP简介 AOP称为面向切面编程 AOP的基本概念 (1)Aspect(切面):通常是一个类,里面可以定义切入点和通知 (2)JointPoint(连接点):程序执行过程中明确的点,一般是方法的 ...

  8. Java集合简单解析

    一. Collection 1. List a. ArrayList b. Vector c. LinkedList 首先要对List的三种实现进行一个简单的异同比较: 同: *ArrayList和V ...

  9. Java 读取application.properties配置文件中配置

    实际开发中若需要读取配置文件application.properties中的配置,代码如下.例:读取配置文件中name属性配置值: 代码如下: import org.springframework.c ...

  10. Comet OJ - Contest #13 「佛御石之钵 -不碎的意志-」(hard)

    来源:Comet OJ - Contest #13 一眼并查集,然后发现这题 tmd 要卡常数的说卧槽... 发现这里又要用并查集跳过访问点,又要用并查集维护联通块,于是开俩并查集分别维护就好了 一开 ...