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 ...
随机推荐
- 一段shell脚本
//根据入参增加nginx反向代理#!/bin/bash#set -x log_path="./proc/logs/shellExecute.log"log_path_back=& ...
- Git下的冲突解决【转】
本文转载自:http://www.cnblogs.com/sinojelly/archive/2011/08/07/2130172.html 冲突的产生 很多命令都可能出现冲突,但从根本上来讲,都是m ...
- VS2010 使用TeeChart绘图控件 - 之一 - 控件和类的导入
vs2010的用法和vc6有很大的不同,特别是在一些函数调用那里,当然.控件导入也是很不一样的 安装好控件后就可以在工程里加入teechart控件了 加入方法有如下几种: 1.添加Teechart控件 ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- (函数即服务)Faas的现状与未来
刚看到jolestar一位从法律转行程序员的前辈写了一篇Faas现状与未来的文章,里面很多观点都很有启发,或许正如他说的那样,由于Faas能较好的解决资源利用率和开发效率问题,2018年Faas将变得 ...
- bzoj 3944 Sum —— 杜教筛
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3944 杜教筛入门题! 看博客:https://www.cnblogs.com/zjp-sha ...
- 【转载】基于AFNetWorking3.0的图片缓存分析
原文出处: Yasin的简书 理论 不喜欢理论的可以直接跳到下面的Demo实践部分 缓存介绍 缓存按照保存位置可以分为两类:内存缓存.硬盘缓存(FMDB.CoreData…).我们常说的网络请求缓存包 ...
- PCB genesis连孔加除毛刺孔(圆孔与槽孔)实现方法(二)
一.为什么 连孔加除毛刺孔 原因是 PCB板材中含有玻璃纤维, 毛刺产生位置在于2个孔相交位置,由于此处钻刀受力不均导致纤维切削不断形成毛刺 ,为了解决这个问题:在钻完2个连孔后,在相交处再钻一个孔, ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- Sorting It All Out 拓扑排序+确定点
这一道题的话 数据有一点问题 ........ 例如 不过 还是 能理解一下 试试吧 ......... A<B B<C C<A A<C B<A ...