您的位置:首页 > Web前端 > JQuery

extend扩展jQuery工具方法(一)

2017-07-11 23:24 316 查看

jQuery原型初始内容 ##:

在jQuery.2.03.js文件中的96~283行,定义了jQuery.prototype原型对象,它包括19个属性:jquery, constructor, selector, length, toArray, get, pushStack, each, ready, slice, first, last, eq, map, end, push, sort, splice。这些属性中jquery、constructorhe、selector这三个属性用于jQuery版本、指向修订以及默认选择符外,其余的属性都是用于数组操作,例如length、toArray、eq等等。原型prototype包含的内容不多,大部分都是类数组操作方法,而原型方法内部却使用了很多的jQuery静态工具方法。

jQuery.extend({…}) 扩展jQuery类方法

在jQuery.2.03.js中的352~823行是jQuery静态方法区,整个内容很长,快接近500行的代码量。虽然jQuery文件代码量很多,但是每个部分所聚集的代码都翻译了这部分jQuery代码所起的整体作用。此次扩展对象33个属性,可以将它们进行归类:版本控制、DOM加载完成事件、js类型判断、脚步解析、数组操作、权限控制、时间和其他工具方法。

jQuery.extend({
expando: null, noConflict: null, isReady: false, readyWait: 1, holdReady: null,
ready: null,isFunction: null, isArray: null, isWindow: null, isNumeric: null, type: null, isPlainObject: null, isEmptyObject: null, error: null, parseHTML: null, parseJSON: null, parseXML: null, noop: null, globalEval: null, camelCase: null, nodeName: null, each: null, trim: null, makeArray: null, inArray: null, merge: null, grep: null, map: null, guid: null, proxy: null, access: null, now: null, swap: null
});


expando版本

在一个页面html中,可能会引入多个jQuery版本,每个版本都必须有唯一的标识,因为jQuery、$都是直接绑定到window对象上。

//版本号加随机数,实际值可能为:"jQuery203021317612077109516";
var expando = "jQuery" + (core_version + Math.random()).replace(/\D/g, "");


noConflict归还命名空间

在jQuerye文件的38、40行中
_$
、_jQuery已经存了
window.$
和window.jQuery,也就是实现将window中的
$
和jQuery缓存起来,然后定义jQuery函数和别名
$


var rootjQuery,
_$ = window.$,
_jQuery = window.jQuery,
jQuery = function(selector, context) {
return jQuery.fn.init(selector, context, rootjQuery);
};
jQuery.extend({
//比较两个都想相等的条件是: 两个对象的引用地址相同;使用noConflict函数也是一个页面引入了多个jQuery相同版本的文件
noConflic: function(deep) {
//首先比较下$别名是否已经和jQuery相同
if(window.$ === jQuery) {
window.$ = _$;
}
if(deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
}
}
});
//将jQuery绑定到window上作为全局属性,同时取个别名$
if ( typeof window === "object" && typeof window.document === "object" ) {
window.jQuery = window.$ = jQuery;
}
//所有的jQuery对象都需要指向rootjQuery
rootjQuery = jQuery(document);


ready加载

在DOM操作中,有addEventListener来加载事件,而DOM内置事件类型有:加载事件(beforeunload、unload、load、pageshow和pagehide、DOMContentLoaded、readystatechange)、窗口事件(scroll、reszie、haschange和popstate)、文本操作事件(cut、copy和paste)、焦点事件(focus、focusin、focusout和blur)、鼠标事件MouseEvent、键盘事件KeyboardEvent等等。传统的window窗体内容加载是绑定window的onload事件。同时,事件本身可以注册多个处理器,处理器根据绑定的先后顺序进行执行。但jQuery自定义了一个特殊的ready事件,该事件先于DOM的load事件。

HTML DOM文档加载是按顺序进行的,这与浏览器的渲染方式相关。一般浏览器渲染操作的顺序大致按如下几个步骤: 1、解析HTML结构; 2、加载外部脚本(.js文件)和样式表(.css文件); 3、解析并执行脚本代码; 4、构造HTML DOM模型; 5、加载图片等外部文件; 6、页面加载完毕。load事件处理器是在页面加载完毕后才执行,而ready事件是在构造完DOM模型后开始执行。此外,load事件是注册在window上,而ready是注册在window.document上。

//这种方式,只能给onload绑定一个事件处理器
window.onload = function() { //逻辑内容}
/**
* @param eventName 事件名.
* @param handler 事件处理器(处理函数).
* @param useCapture 指定事件是否在捕获或冒泡阶段执行, true在捕获阶段执行,false在冒犯阶段执行
* addEventListener(eventName, handler, useCapture); 绑定事件处理器
* removeEventListener(eventName, handler, useCapture); 解绑定事件处理器
* 在IE8以下,attachEvent(eventName, handler)和detachEvent(eventName, hander);区别在于eventName必须加前缀"on",如"onclick"
*/
//通过addEventListener可以给docuemnt添加多个事件处理器,当然这里可以先检查下window.addEventListener,然后绑定调用window.attachEvent(IE)。
window.addEventListener(function() { // 处理器1});
window.addEventListener(function() { // 处理器2});
window.addEventListener(function() { // 处理器3});
// ... ...
window.addEventListener(function() { // 处理器n});
var readyList = [];
jQuery.extend({
//判断当前document绑定的ready事件处理器是否已经执行过了
isReady: false,
//一个计数器,用于记录有多少ready事件处理器已经绑定
readyWait: 1,
ready: function(wait) {
if(wait === true? --jQuery.readyWait : jQuery.isReady) {
return ;
}
jQuery.isReady = true;
if(wait !== true && --jQuery.readyWait > 0){
return;
}
//如果有函数绑定,则执行
execite(readyList);
if(jQuery.fn.trigger) {
jQuery(document).trigger("ready").off("ready");
}
},
//确定是否保持ready状态,如果否则调用ready触发事件。需要在$().ready(...)前调用,这样ready就会处于等待,如果需要执行则需要jQuery.holdReady(false);
holdReady: function(hold) {
if(hold) {
jQuery.readyWait++;
} else {
jQuery.ready(true);
}
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: