jquery源码解析:jQuery工具方法详解1

jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的。

jQuery.extend({       //当只有一个对象时,就把这个对象中的属性和方法扩展到this对象中,这里的this指向jQuery

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

  //唯一性,core_version 为jQuery的版本号。\D的意思是:不是数字的,就选中。因此expando就是jQuery+一段整数。数据缓存,ajax,事件机制都用到了这个。

  noConflict: function( deep ) {

    //处理冲突,因为有些库可能会用到$甚至jQuery,这时就可以调用chaojidan = $.onConflict(true);这时chaoijdan就可以当做jQuery了,并且其他库可以使用$标识了
    if ( window.$ === jQuery ) {
      window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
      window.jQuery = _jQuery;
    }

    return jQuery;
  }, 

  isReady: false,

  readyWait: 1,

  holdReady: function( hold ) {
    if ( hold ) {
      jQuery.readyWait++;
    } else {
      jQuery.ready( true );
    }
  },

  ready: function( wait ) {

    if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
      return;
    }

    jQuery.isReady = true;

    if ( wait !== true && --jQuery.readyWait > 0 ) {
      return;
    }

    readyList.resolveWith( document, [ jQuery ] );

    if ( jQuery.fn.trigger ) {
      jQuery( document ).trigger("ready").off("ready");
    }
  },

  //以上几个属性和方法其实就是解决DOM加载问题的,大家都知道onload是等DOM树建造完成,并且资源加载完成才会触发。但是我们只需要DOM树构造完成,就执行绑定事件,所以有一个DOMContentLoaded事件。但是低版本浏览器不支持,所以需要兼容,jQuery就写了兼容方法。所以在这里介绍一下它是怎么处理的。

  $(function(){}) -> $(document).ready(function(){}) -> $().ready() -> jQuery.ready.promise().done(fn),

    jQuery.ready.promise = function( obj ) {
      if ( !readyList ) {       //第一次调用时,为空,所以进入。之后就直接使用这个对象

        readyList = jQuery.Deferred();     //新建一个延迟对象

        if ( document.readyState === "complete" ) {

          //DOM已经加载结束了,这时就可以直接调用jQuery.ready,不用再绑定事件了
          setTimeout( jQuery.ready );

          //DOM快加载好的时候,IE的readyState有可能就是complete了,这时调用jQuery.ready会出问题,因此延迟调用,确保IE下也没问题。

        } else {

          document.addEventListener( "DOMContentLoaded", completed, false );

          window.addEventListener( "load", completed, false );

          //火狐浏览器可能会缓存onload事件,这时onload会先于DOMContentLoaded触发。写两个,更保险
        }
      }
      return readyList.promise( obj );  //延迟对象的状态有几种,在外面可以被修改,但是promise不能修改
    };   

    completed = function() {
      document.removeEventListener( "DOMContentLoaded", completed, false );   //只调用一次completed 方法
      window.removeEventListener( "load", completed, false );
      jQuery.ready();
    };

    //jQuery.ready.promise().done(fn)  (延迟对象调用done方法,把fn方法加入延迟对象,当触发延迟对象的resolveWith时,就会执行fn方法) -> jQuery.ready() -> readyList.resolveWith( document, [ jQuery ] )   

    ready: function( wait ) {

      if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {   
        return;
      }

      jQuery.isReady = true;   //只触发一次

      if ( wait !== true && --jQuery.readyWait > 0 ) {   //DOM的ready正常触发时,也要检查是否需要等待
        return;
      }

      readyList.resolveWith( document, [ jQuery ] );

      //第一个参数是指向this(回调方法的执行上下文),第二个参数是传给回调方法的参数。这个回调方法,就是通过延迟对象的done方法加进来的fn.因此,resolveWith( document, [ jQuery ] );相当于fn(jQuery),在document中执行。

      if ( jQuery.fn.trigger ) {   //这里处理jQuery第三种DOM加载完成执行js的方式。
        jQuery( document ).trigger("ready").off("ready");   //触发ready事件后,马上移除掉,只触发一次。

        //$(document).on("ready",function(){}),通过document绑定ready事件来实现。
      }
    },

    holdReady: function( hold ) {   //阻止Dom加载完成执行function,$.holdReady(true),
      if ( hold ) {
        jQuery.readyWait++;   //要加载多个文件时(a.js,b.js),就要每次都++。
      } else {
        jQuery.ready( true );    //$.holdReady(false),恢复执行,减少一次jQuery.readyWait,直到它为0.
      }
    },

    这个方法有什么用呢?举个例子:$.getScript("a.js",function(){});  $(function(){ a.say(); });这个代码的意思是加载完a.js,然后再调用a的say 方法。但是a.js需要下载,所以执行a.say会报错。这时,可以先$.holdReady(true),这样$(function(){ a.say(); }中的a.say(); 就不会执行了。直到我在$.getScript("a.js",function(){$.holdReady(false)});才可以执行。而这时,a.js加载完成,并执行结束后,调用回调方法,执行$.holdReady(false),恢复执行。

  

  

  isFunction: function( obj ) {     //在低版本IE浏览器下typeof alert   返回object,而不是function
    return jQuery.type(obj) === "function";
  },

  isArray: Array.isArray,   //不兼容IE8以及以下版本

  isWindow: function( obj ) {
    return obj != null && obj === obj.window;

    //false == null  ->  false ,true == null -> false。只有null和undefined才等于null,而只有这两个变量没有属性。其他的像字符串有包装对象,可以有属性。window有两种意思:(1)全局对象,(2)浏览器窗口。而只有window才有window属性,因此只有window才会返回true.window.window表示全局对象中的浏览器窗口。
  },

  isNumeric: function( obj ) {   //typeof NaN   ->  number
    return !isNaN( parseFloat(obj) ) && isFinite( obj );    //Number.MAX_VALUE最大值,加1就会是无限大,就不是number类型

    //先判断参数是否能转成数字,不可以就是NaN,那么isNaN就会返回true。如果是数字,但是必须是有限数,不然也不是number类型。
  },

  ...

})

加油!

时间: 2024-10-13 18:50:51

jquery源码解析:jQuery工具方法详解1的相关文章

十七.jQuery源码解析之入口方法Sizzle(1)

函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: 1.解析选择器表达式,解析出块表达式和关系符. 2.如果存在位置伪类,则从左向右查找: a.查找第一个块表达式匹配的元素集合,得到第一个上下文元素集合. b.遍历剩余的块表达式和块间关系符,不断缩小上下文元素集合. 3.否则从右向左查找: a.查找最后一个块表达式匹配的元素集合,得到候选集,映射集

jQuery源码学习3——工具方法篇

基本工具方法结构如下: jQuery.extend({ init:function(){}, each:function(){}, className:{ add:function(){}, remove:function(){}, has:function(){}, }, swap:function(){}, css:function(){}, curCSS:function(){}, clean:function(){}, expr:{}, token:[], find:function()

jQuery源码学习5——工具方法之attr parents sibling clean

(1).attr attr: function(elem, name, value){ var fix = { "for": "htmlFor", "class": "className", "float": "cssFloat", innerHTML: "innerHTML", className: "className" }; if ( fix

JQuery源码解析-JQuery的工具方法(3)

这篇文章主要对下面这几个方法进行解释 error();抛出异常 parseHTML():解析节点 parseJSON():解析JSON parseXML:解析XML noop():空函数 globalEval():全局解析JS camelCase():转驼峰 nodeName():是否为指定节点(内部) error:方法: error方法的作用是抛出一个自定义异常,内部直接调用了原生解释的throw new Error error: function( msg ) { throw new Err

JQuery源码解析-JQuery的工具方法(2)

这篇对下面的方法进行讲解: isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric()是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObject():是否为空的对象 isFunction方法: 这个方法很简单,判断对象是否为函数,返回bool类型,看一下源码: // See test/unit/core.js for details concerning isFu

JQuery源码解析-JQuery的工具方法(5)

下面对最后这几个方法进行讲解. guid():唯一表示(内部) proxy():改变this指向 access(): 多功能值操作 now():当前时间 swap():css交换(内部) guid: 这个属性是对事件进行控制的,例如每次对dom元素进行绑定事件的时候,会通过这个属性进行绑定,这个属性每次自增,产生一个唯一的标示,所以对dom元素进行事件解绑等操作的时候,通过这个属性就可以找到. 源码: // A global GUID counter for objects guid: 1, p

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

guava-retrying 源码解析(停止策略详解)

一.停止策略相关类 1.停止策略接口:StopStrategy接口,只有一个抽象方法 // 是否应该停止重试.不同的停止策略有不同的实现.boolean shouldStop(Attempt failedAttempt); 2.停止策略工厂类:StopStrategies类 这是一个常量类.工厂类,用于创建停止策略对象.这个工厂类里面定义了三种停止策略,都是常量静态内部类. 该工厂类是创建停止策略的唯一途径. 二.详解三种停止策略 1.从不停止策略:NeverStopStrategy 使用这种策

guava-retrying 源码解析(阻塞策略详解)

这是一种策略,用于决定重试者应如何在重试尝试之间进行阻止.通常这只是一个thread.sleep(),但是如果需要的话,实现可能更复杂. 一.阻塞策略相关的类或接口 1.阻塞策略接口:BlockStrategy 底层默认使用来 Thread.sleep 完成线程阻塞,从而实现重试之间的等待{@link com.github.rholder.retry.WaitStrategy}.如果需要,实现可以更加复杂. 接口里面有一个实现方法,如下. 2.阻塞策略工厂类:BlockStrategies. 该

jQuery方法源码解析--jQuery($)方法(一)

jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在使用过程中,它还有另外一个名字,美元符号:$,$(...)其实就是jQuery(...); 它有很多种用法,通常都返回一个jquery对象,也可以作为$(document).ready(...);的简写形式,分析之前先看一下jQuery都有什么用法. 1.jQuery( selector [, co