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

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

jQuery.extend({

  ...... 

  guid: 1,

  //唯一标识符,跟事件有关。举个例子:function show(){alert(this);}, $("#input1").click(show),$("#input2").click(function(){$("#input1").off()}),这里的show方法是事件方法,所以通过off取消掉事件绑定,可以很容易找到事件方法show。但是如果把 $("#input1").click(show)改成 $("#input1").click($.proxy(show,window)),这时show不是事件方法,而是普通方法,那么通过off取消的时候,它是怎么找到这个普通方法show的,其实就是通过guid,因为guid会累加,所以是唯一的,因此可以找到。请看下个方法就知道详情了。

  proxy: function( fn, context ) {

    //改变方法(函数)执行的this指向。举例:$.proxy(show,document),想给show传参的话,有两种方式:var fn = $.proxy(show,document,1,2);fn(3,4)。最终show执行时就会变成show(1,2,3,4),proxy返回一个函数,调用fn时,就会执行show方法。
    var tmp, args, proxy;

    if ( typeof context === "string" ) {   //这里处理特殊调用情况,比如:$.proxy(obj,"show")(正常写法$.proxy(obj.show,obj)),show方法执行时,this指向的obj,并且show是obj的属性方法.var obj = { show: function(){}}。
      tmp = fn[ context ];
      context = fn;
      fn = tmp;
    }

    if ( !jQuery.isFunction( fn ) ) {
      return undefined;
    }

    args = core_slice.call( arguments, 2 );  //传入的参数,相当于例子的[1,2]
    proxy = function() {
      return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );  //把[3,4]和[1,2]合并成[1,2,3,4]
    };

    proxy.guid = fn.guid = fn.guid || jQuery.guid++;

    //第一次时,fn.guid(show.guid)是undefined,proxy.guid = fn.guid = 1,show.guid =1, 

    //function() {return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) )}.guid=1,唯一标识,取消绑定时,可以用到。

    return proxy;
  },

  //$().css(),$().attr(),通过参数的不同,实现get/set。参数的个数,以及参数的类型。$("div").css("width"),获得第一个div元素的width,$("div").css("width",100)设置所有的div元素的width。$("div").css({width:100,height:200}),也是设置所有的div元素,尽管只有一个参数,但是类型不一样。JQuery中有很多这种方法,所以统一用access实现。

  access: function( elems, fn, key, value, chainable, emptyGet, raw ) {

    //elems操作的元素,可能是一个集合。fn是一个回调函数(有区别的在回调函数中处理,比如,css设置样式,attr设置属性)。key和value就是属性名和属性值。chainable为true,设置,为false就获取。
    var i = 0,
      length = elems.length,
      bulk = key == null;

    if ( jQuery.type( key ) === "object" ) {//处理这种类型$("div").css({width:100,height:200})
      chainable = true;
      for ( i in key ) {
        jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
      }

    }

    else if ( value !== undefined ) {   //处理这种$("div").css("width",100)
      chainable = true;

      if ( !jQuery.isFunction( value ) ) {
        raw = true;    //字符串(数字)时
      }

      if ( bulk ) {   //如果没有key值
        if ( raw ) {   //如果value是字符串(数字)
          fn.call( elems, value );   //调用回调方法
          fn = null;   //把回调方法赋为空

        }

        else {     //如果是函数,这里面的不用深入理解
          bulk = fn;
          fn = function( elem, key, value ) {
            return bulk.call( jQuery( elem ), value );
          };
        }
      }

      if ( fn ) {    //如果没有key值,并且value是字符串(数字),这里就为null,不会执行
        for ( ; i < length; i++ ) {
          fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
        }
      }
    }

    return chainable ?     //获取时,chainable为false
        elems :     //设置时,chainable为true,直接返回元素,进行后续的链式操作

          bulk ?   
            fn.call( elems ) :  //没有key值时,就回调
              length ? fn( elems[0], key ) : emptyGet;  //有key值时,判断元素有没有元素,有的话就获取第一个元素的key值(属性名的值),没有元素的话,就返回emptyGet。
  },

  now: Date.now,  //当前时间距离1970年的毫秒数,相当于(new Date()).getTime()

  //以下方法是处理这种情况的:

  //<div id="div1" style="width:100px;height:100px;background:red;display:none;">ddd</div> 

$("#div1").get(0).offsetWidth取到的是0,因为它是display:none,不存在DOM树中。$("#div1").width()取到的是100,为啥jQuery可以。因为jQuery会对display:none的元素进行处理,变成<div id="div1" style="width:100px;height:100px;background:red;display:block;visibility:hidden;position:absolute">ddd</div>,这里就可以通过$("#div1").get(0).offsetWidth取到100了,然后再把新添加的样式去掉。

  swap: function( elem, options, callback, args ) {  //css的转换,内部使用
    var ret, name,
      old = {};

    for ( name in options ) {

      //保存老样式,插入新样式。这里假设options={width:100px;height:100px;background:red;display:block;visibility:hidden;position:absolute}

      //elem.style = {width:100px;height:100px;background:red;display:none;}
      old[ name ] = elem.style[ name ]; 
      elem.style[ name ] = options[ name ];
    }

    ret = callback.apply( elem, args || [] );

    //通过插入的新样式来获取元素的css值,callback = function(args){ if(args不是[]) return this[args]},args= offsetWidth;

    for ( name in options ) {       //恢复老样式
      elem.style[ name ] = old[ name ];
    }

    return ret;
  }

  ......

})

最后讲一下这个方法:

function isArraylike( obj ) {//判断是否是数组,类数组,带length的json,是的话就返回真
  var length = obj.length,
  type = jQuery.type( obj );

  if ( jQuery.isWindow( obj ) ) {  //担心window对象有length属性
    return false;
  }

  if ( obj.nodeType === 1 && length ) {

  //元素节点对象,并且有length属性,返回真。document.getElementsByTagName("div")和body.childNodes都不是这种情况。可能用于内部调用,这里如果有谁知道的,可以告诉我。

    return true;
  }

  return type === "array" || type !== "function" &&   //不能是函数,因为函数也可能有length属性
    ( length === 0 ||typeof length === "number" && length > 0 && ( length - 1 ) in obj );

    //typeof length === "number" && length > 0 && ( length - 1 ) in obj )处理{0:"a",1:"b",length:2}这种情况。length === 0处理arguments为空的时候,就是不传入函数任何数据,这时函数中的arguments的length为0,但是是类数组。document.getElementsByTagName("div")和body.childNodes也是类数组。
}

加油!

时间: 2024-10-10 09:54:40

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

十七.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