extend扩展jQuery工具方法（一）

最新推荐文章于 2022-12-06 21:52:17 发布

vZou

最新推荐文章于 2022-12-06 21:52:17 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_26971305/article/details/75000079

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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);
        }
    }
});