jquery源码分析(三)——工具函数
jQuery.extend({
expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),//生成字符串,使用Math.random生成随机数并使用正则去掉了非数字字符。
//这里它作为HTMLElement或JS对象的属性名
isReady: true, error: function( msg ) {
throw new Error( msg );
}, noop: function() {}, isFunction: function( obj ) {
return jQuery.type(obj) === "function";
}, isArray: Array.isArray || function( obj ) {
return jQuery.type(obj) === "array";
}, isWindow: function( obj ) {
/* jshint eqeqeq: false */
return obj != null && obj == obj.window;
}, isNumeric: function( obj ) {
// parseFloat NaNs numeric-cast false positives (null|true|false|"")
// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
// subtraction forces infinities to NaN
return obj - parseFloat( obj ) >= 0;
}, isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
}, isPlainObject: function( obj ) {
var key; if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
return false;
} try {
// Not own constructor property must be Object
if ( obj.constructor &&
!hasOwn.call(obj, "constructor") &&
!hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
return false;
}
} catch ( e ) {
// IE8,9 Will throw exceptions on certain host objects #9897
return false;
} // Support: IE<9
// Handle iteration over inherited properties before own properties.
if ( support.ownLast ) {
for ( key in obj ) {
return hasOwn.call( obj, key );
}
} // Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
for ( key in obj ) {} return key === undefined || hasOwn.call( obj, key );
}, type: function( obj ) {
if ( obj == null ) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" :
typeof obj;
}, // Evaluates a script in a global context
// Workarounds based on findings by Jim Driscoll
// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
globalEval: function( data ) {
if ( data && jQuery.trim( data ) ) {
// We use execScript on Internet Explorer
// We use an anonymous function so that context is window
// rather than jQuery in Firefox
( window.execScript || function( data ) {
window[ "eval" ].call( window, data );
} )( data );
}
}, // Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
}, nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
}, // args is for internal usage only
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); if ( args ) {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args ); if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args ); if ( value === false ) {
break;
}
}
} // A special, fast, case for the most common use of each
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) {
break;
}
}
}
} return obj;
}, // Use native String.trim function wherever possible
trim: trim && !trim.call("\uFEFF\xA0") ?
function( text ) {
return text == null ?
"" :
trim.call( text );
} : // Otherwise use our own trimming functionality
function( text ) {
return text == null ?
"" :
( text + "" ).replace( rtrim, "" );
}, // results is for internal usage only
makeArray: function( arr, results ) {
var ret = results || []; if ( arr != null ) {
if ( isArraylike( Object(arr) ) ) {
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
);
} else {
push.call( ret, arr );
}
} return ret;
}, inArray: function( elem, arr, i ) {
var len; if ( arr ) {
if ( indexOf ) {
return indexOf.call( arr, elem, i );
} len = arr.length;
i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0; for ( ; i < len; i++ ) {
// Skip accessing in sparse arrays
if ( i in arr && arr[ i ] === elem ) {
return i;
}
}
} return -1;
}, merge: function( first, second ) {
var len = +second.length,
j = 0,
i = first.length; while ( j < len ) {
first[ i++ ] = second[ j++ ];
} // Support: IE<9
// Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
if ( len !== len ) {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
} first.length = i; return first;
}, grep: function( elems, callback, invert ) {
var callbackInverse,
matches = [],
i = 0,
length = elems.length,
callbackExpect = !invert; // Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
callbackInverse = !callback( elems[ i ], i );
if ( callbackInverse !== callbackExpect ) {
matches.push( elems[ i ] );
}
} return matches;
}, // arg is for internal usage only
map: function( elems, callback, arg ) {
var value,
i = 0,
length = elems.length,
isArray = isArraylike( elems ),
ret = []; // Go through the array, translating each of the items to their new values
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg ); if ( value != null ) {
ret.push( value );
}
} // Go through every key on the object,
} else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg ); if ( value != null ) {
ret.push( value );
}
}
} // Flatten any nested arrays
return concat.apply( [], ret );
}, // A global GUID counter for objects
guid: 1, // Bind a function to a context, optionally partially applying any
// arguments.
proxy: function( fn, context ) {
var args, proxy, tmp; if ( typeof context === "string" ) {
tmp = fn[ context ];
context = fn;
fn = tmp;
} // Quick check to determine if target is callable, in the spec
// this throws a TypeError, but we will just return undefined.
if ( !jQuery.isFunction( fn ) ) {
return undefined;
} // Simulated bind
args = slice.call( arguments, 2 );// 从参数列表中去掉fn,context
proxy = function() {//使用apply修改fn执行上下文环境
return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
}; // Set the guid of unique handler to the same of original handler, so it can be removed
proxy.guid = fn.guid = fn.guid || jQuery.guid++;//统一guid,使得proxy能够被移除 return proxy;
}, now: function() {
return +( new Date() );
}, // jQuery.support is not used in Core but other projects attach their
// properties to it so it needs to exist.
support: support
});
(1)、首先来了解下调用Object原型上的方法,toString方法,通过调用该方法可以返回 "[object XXX]"格式的字符串。jQuery内部就是用过这种方式实现了数据类型判断:
toString.call(obj) 返回值为
参数 | 返回值 |
true | [object Boolean] |
'abcde' | [object String] |
123 | [object Number] |
function(){} | [object Function] |
new Date() | [object Date] |
/g/ | [object RegExp] |
{} | [object object] |
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});//统一设置通过toString来判断数据类型对应的返回值
type: function( obj ) {
if ( obj == null ) {
return obj + "";
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" :
typeof obj;
},
(2)、看下扩展了那些类型判断的方法:
isFunction、isNumeric 、isArray、isEmptyObject、
isPlainObject:obj不存在 或 非object类型 或 DOM节点 或 widnow对象,具有构造函数constructor,却不是自身的属性(即通过prototype继承的)都返回false
(3)、jQuery封装了几个常用遍历对象或数组方法:each map grep inArray makeArray,从应用场景来分析:
- grep ----(筛选出满足条件的数据,返回一个数组)
- each ---- 对数组或对象 进行处理,不返回数据 ,但是还是可以通过在回掉函数中返回false 来终止,args用来区分jQuery内部调用该方法还是外部调用。
- map ----对数组或对象 进行数据处理,遍历数组或对象收集处理每个item处理后结果(对每一个属性调用callback,将返回值不为null的值,存入ret返回)。代码中针对数组和对象做了判断,但仅仅是遍历的方式不同,处理方式没有其他的区别——返回null,则忽略(无返回值的function会返回undefined)。
- inArray ----返回值在数组中的键值
(4)、proxy( fn, context ) ——代理方法:为fn指定上下文(即this)。修改fn使用上下文环境。这在jQuery很常用到。
实际上它是通过apply来实现上下文环境的切换的。
proxy = function() {
return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
};
function proxy() 开始判断context类型是否为字符串。这样是处理了fn contex 参数位置互换问题。
2、前面分析这么多,突然发现把最常用的ready忘了,下面来对比下jQuery中ready与load事件。
$(document).ready(function() {
// ...代码...
})
$(function() {//上面document ready的简写
// ...代码...
})
$(document).load(function() {
// ...代码...
})
所以,实际也就两个针对文档加载方法:一个是ready一个是load,那么两个到底有什么区别呢?
(1)、疑问???ready与load谁先执行:答案是ready先执行,load后执行。
(2)、理解DOM文档加载的步骤:
要想理解为什么ready先执行,load后执行就要先了解下DOM文档加载的步骤:
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load
从上面的描述中应该很容易就能看出区别了吧,ready在第(4)步完成之后就执行了,但是load要在第(6)步完成之后才执行。
结论:
ready与load的区别就在于资源文件的加载,ready构建了基本的DOM结构,所以对于代码来说应该越快加载越好。在一个高速浏览的时代,没人愿意等待答案。假如一个网站页面加载超过4秒,不好意思,你1/4的用户将面临着流失,所以对于框架来说用户体验是至关重要的,我们应该越早处理DOM越好,而不需要等到图片资源都加载完才去处理框架的加载,当图片资源过多时会导致load事件就会迟迟得不到触发,严重影响用户体验。——后面有一篇专门分析 DOMContentLoaded 与onload区别
(3)、下面我们看看jQuery是如何处理文档加载时机的问题:
// The deferred used on DOM ready
var readyList;//作为异步回调队列 jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );//使用了状态机制 return this;
}; jQuery.extend({
// Is the DOM ready to be used? Set to true once it occurs.
isReady: false, // A counter to track how many items to wait for before
// the ready event fires. See #6781
readyWait: 1, // Hold (or release) the ready event
holdReady: function( hold ) {
if ( hold ) {
jQuery.readyWait++;
} else {
jQuery.ready( true );
}
}, // Handle when the DOM is ready
ready: function( wait ) { // Abort if there are pending holds or we're already ready
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
return;
} // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( !document.body ) {
return setTimeout( jQuery.ready );
} // Remember that the DOM is ready
jQuery.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
} // If there are functions bound, to execute
readyList.resolveWith( document, [ jQuery ] ); // Trigger any bound ready events
if ( jQuery.fn.trigger ) {
jQuery( document ).trigger("ready").off("ready");
}
}
}); /**
* Clean-up method for dom ready events
*/
function detach() {//清除DOM加载完成事件
if ( document.addEventListener ) {
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false ); } else {
document.detachEvent( "onreadystatechange", completed );
window.detachEvent( "onload", completed );
}
} /**
* The ready event handler and self cleanup method
*/
function completed() {
// readyState === "complete" is good enough for us to call the dom ready in oldIE
if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
detach();
jQuery.ready();
}
} jQuery.ready.promise = function( obj ) {//定义一个状态机
if ( !readyList ) { readyList = jQuery.Deferred(); // Catch cases where $(document).ready() is called after the browser event has already occurred.
// we once tried to use readyState "interactive" here, but it caused issues like the one
// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout( jQuery.ready ); // Standards-based browsers support DOMContentLoaded
} else if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false ); // A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false ); // If IE event model is used
} else {
// Ensure firing before onload, maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", completed ); // A fallback to window.onload, that will always work
window.attachEvent( "onload", completed ); // If IE and not a frame
// continually check to see if the document is ready
var top = false; try {
top = window.frameElement == null && document.documentElement;
} catch(e) {} if ( top && top.doScroll ) {
(function doScrollCheck() {
if ( !jQuery.isReady ) { try {
// Use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
top.doScroll("left");
} catch(e) {
return setTimeout( doScrollCheck, 50 );
} // detach all dom ready events
detach(); // and execute any waiting functions
jQuery.ready();
}
})();
}
}
}
return readyList.promise( obj );
};
jQuery的ready是通过promise给包装过的,这也是jQuery擅长的手法,统一了回调体系,在回调deferred中我会重点讨论下。
可见jQuery兼容的具体策略:针对高级的浏览器,我们当前很乐意用DOMContentLoaded事件了,省时省力。
那么旧的IE如何处理呢?继续看jQuery的方案:
如果浏览器存在 document.onreadystatechange
事件,当该事件触发时,如果 document.readyState=complete
的时候,可视为 DOM 树已经载入。不过,这个事件不太可靠,比如当页面中存在图片的时候,可能反而在 onload 事件之后才能触发,换言之,它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
jquery源码分析(三)——工具函数的更多相关文章
- jQuery 源码分析(五) map函数 $.map和$.fn.map函数 详解
$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回,该函数有三个参数,如下: elems Array/Object类型 指定的需要处理的数组或 ...
- jQuery 源码分析(四) each函数 $.each和$.fn.each方法 详解
$.each一般用来遍历一个数组或对象,$.fn.each()就是指jQuery实例可以执行的操作(因为$.fn是jQuery对象的原型) $.each用来遍历一个数组或对象,并依次执行回掉函数,最后 ...
- jQuery源码分析_工具方法(学习笔记)
expando:生成唯一JQ字符串(内部使用) noConflict():防止冲突 isReady:DOM是否加载完成(内部) readyWait:等待多少文件的计数器(内部) holdReady() ...
- Jquery源码分析之匿名函数的自执行
匿名函数的格式: 格式: (function(){ //代码 })(); //和这个基于jQuery的比较下: $(function(){ alert("this is a test&quo ...
- jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- [转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
- JUC源码分析-其它工具类(一)ThreadLocalRandom
JUC源码分析-其它工具类(一)ThreadLocalRandom ThreadLocalRandom 是 JDK7 在 JUC 包下新增的随机数生成器,它解决了 Random 在多线程下多个线程竞争 ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
随机推荐
- SPOJ XMAX - XOR Maximization
XMAX - XOR Maximization Given a set of integers S = { a1, a2, a3, ... a|S| }, we define a function X ...
- Android隐藏状态栏和标题栏,相当于全屏效果
隐藏标题栏需要使用预定义样式:android:theme=”@android:style/Theme.NoTitleBar”. 隐藏状态栏:android:theme=”@android:style/ ...
- bzoj2982 combination——卢卡斯定理
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2982 卢卡斯定理裸题: 原准备1A来着,结果输出忘了加回车! 预处理阶乘或者现求都可以,感觉 ...
- Vue.prototype的用法
基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...
- eclipse.ini启动参数配置的解析及方法
原文地址 - http://www.uzzf.com/news/18444.html 1.先了解下JVM内存管理机制,JVM内存分为堆内存和非堆内存 2.JVM内存限制 首先JVM内存限制于实际的最大 ...
- C. Unusual Product(cf)
http://codeforces.com/problemset/problem/405/C 题意: 给出一个n*n的矩阵,有q个操作,输入3时,输出A ,A等于第i行乘以第i列的对应元素的和(mod ...
- 9.9 NOIP模拟题
9.9 NOIP模拟题 T1 两个圆的面积求并 /* 计算圆的面积并 多个圆要用辛普森积分解决 这里只有两个,模拟计算就好 两圆相交时,面积并等于中间两个扇形面积减去两个三角形面积 余弦定理求角度,算 ...
- C语言编译器为什么能够用C语言编写?
不知道大家有没有想过一个问题:C语言编译器为什么能够用C语言编写? 所谓C语言编译器,就是把编程得到的文件,比如.c,.h的文件,进行读取,并对内容进行分析,按照C语言的规则,将其转换成cpu可以执行 ...
- Python基础类型(二) str 字符串
字符串str ' ' 字符串+ 都是字符串的时候才能相加 a = 'alex' b = 'wusir' print(a+b) #字符串拼接 字符串* 字符串和数字相乘 a = 6 b = 'alex' ...
- wcf 代理配置
<?xml version="1.0" encoding="utf-8"?> <configuration> <appSett ...