jQuery 1.9.1源码分析系列（十四）之常用jQuery工具

为了给下一章分析动画处理做准备，先来看一下一些工具。其中队列工具在动画处理中被经常使用。

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置。如果需要移除并执行队列中的第一个函数，请使用dequeue()函数。你也可以使用clearQueue()函数清空指定的队列）

jQuery.fn. dequeue([ dequeueName ])（移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数。你也可以使用clearQueue()函数清空指定的队列(不会执行其中的函数)）

jQuery.fn. clearQueue([ dequeueName ])（清空每个匹配元素的指定队列中所有尚未执行的项）

jQuery.error(msg)（抛出一个包含指定字符串信息的异常。）

jQuery.each(object, callback )（遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。所谓的上下文，意即该函数内部的this指针引用了该元素。该函数属于全局jQuery对象。请注意，这与jQuery对象(实例)的each()函数不同，不过jQuery对象(实例)的each()实现也是调用jQuery.each）

jQuery.proxy()（改变函数的上下文。你可以将指定函数传入该函数，该函数将返回一个新的函数，其执行代码不变，但函数内部的上下文(this)已经被更改为指定值

　　用法一：

jQuery.proxy( function, context [, additionalArguments ] )

Copy after login

　　将函数function的上下文对象更改为指定的context。

　　用法二：

jQuery.proxy( context, name [, additionalArguments ] )

Copy after login

　　将名为name的函数的上下文更改为指定的context。函数name应是context对象的一个属性。

jQuery.map(object, callback)（使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。jQuery库中还有一个同名的实例方法jQuery.fn.map()，它仅用于对当前jQuery对象所匹配的元素进行遍历处理）

jQuery.fn.data([ key [, value ] ])（在当前jQuery对象所匹配的所有元素上存取数据）

jQuery.fn.removeData(keys)（移除在当前jQuery对象所匹配的每一个元素上存储的指定键名的数据项）

jQuery.support（返回用户当前使用的浏览器的特性或bug信息。该属性是一个对象。该对象的属性并不是一成不变的，jQuery也并不保证指定的属性在未来的版本中一定可用，这些属性主要供插件或内核开发人员使用）

jQuery.contains(container, contained)（判断指定元素内是否包含另一个元素。简而言之，该函数用于判断另一个DOM元素是否是指定DOM元素的后代）

jQuery.extend([ deep ], target , object1 [, objectN... ])（将一个或多个对象的内容合并到目标对象。该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上，参数deep用于指示是否深度递归合并）

jQuery.fn.extend(object)（为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)）

jQuery.globalEval(code)（全局性地执行一段JavaScript代码，该函数作用与常规的JavaScript eval()函数相似。不同的是，jQuery.globalEval()执行代码的作用域为全局作用域）

jQuery.grep(array, function [, invert ])（使用指定的函数过滤数组中的元素，并返回过滤后的数组。源数组不会受到影响，过滤结果只反映在返回的结果数组中）

jQuery.inArray(value, array [, fromIndex ])（在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1）

jQuery.isArray(object)（判断指定参数是否是一个数组）

jQuery.isEmptyObject(object)（判断指定参数是否是一个空对象。所谓"空对象"，即不包括任何可枚举(自定义)的属性。简而言之，就是该对象没有属性可以通过for...in迭代）

jQuery.isPlainObject(object)(判断指定参数是否是一个纯粹的对象。所谓"纯粹的对象"，就是该对象是通过"{}"或"new Object"创建的)

jQuery.isFunction(object)（判断指定参数是否是一个函数）

jQuery.isNumeric(value)（判断指定参数是否是一个数字值）

jQuery.isWindow(object)（判断指定参数是否是一个窗口）

jQuery.isXMLDoc(node)(判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档。该函数主要用于判断指定文档是一个XML文档还是一个HTML(或XHTML)文档)

jQuery.makeArray(object)（将一个类数组对象转换为真正的数组对象。所谓"类数组对象"就是一个常规的Object对象，但它和数组对象非常相似：具备length属性，并以0、1、2、3……等数字作为属性名。不过它毕竟不是数组，没有从数组的原型对象上继承下来的内置方法(例如：push()、 sort()等)）

jQuery.noop()（是一个空函数，它什么也不做。当某些时候你需要传入函数参数，而且希望它什么也不做的时候，你可以使用该函数，也无需再新建一个空的函数）

jQuery.now()（返回当前时间距1970年1月1日午夜所经过的毫秒数。该函数的作用类似于new Date().getTime()）

jQuery.parseHTML(htmlString [, context ] [, keepScripts ])（将HTML字符串解析为对应的DOM节点数组。该函数将使用原生的DOM元素创建函数把HTML字符串转换为一个DOM元素的集合，你可以将这些DOM元素插入到文档中）

jQuery.parseJSON(jsonString )（将格式完好的JSON字符串转为与之对应的JavaScript对象。所谓"格式完好"，就是要求指定的字符串必须符合严格的JSON格式，例如：属性名称必须加双引号、字符串值也必须用双引号。如果传入一个格式不"完好"的JSON字符串将抛出一个JS异常）

jQuery.parseXML(XMLString)（将字符串解析为对应的XML文档。该函数将使用浏览器内置的解析函数来创建一个有效的XML文档，该文档可以传入jQuery()函数来创建一个典型的jQuery对象，从而对其进行遍历或其他操作）

jQuery.trim(str)（去除字符串两端的空白字符。该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。它会清除包括换行符、空格、制表符等常见的空白字符）

jQuery.type(object)（确定JavaScript内置对象的类型，并返回小写形式的类型名称。JavaScript也自带有一个typeof运算符，可以确定数据的类型。不过，对于绝大多数对象而言，typeof运算符都返回"object"，无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。例如：对于new Number(5)，typeof返回"object"，jQuery.type()返回"number"；对于new Date()，typeof返回"object"，jQuery.type()返回"date"。type的返回的结果有"Boolean Number String Function Array Date RegExp Object Error"的小写）

jQuery.unique(array)（根据元素在文档中出现的先后顺序对DOM元素数组进行排序，并移除重复的元素。

　　注意：该函数仅作用于DOM元素数组，而不是数字、字符串或其他类型。此外，这里的重复指的是两个元素实际上是同一个元素(通过全等"==="来判断)，而不是指两个属性相同的元素。

　　警告：通过实际测试发现，该函数并不能按照预期返回正确的结果。在不同的浏览器中、在不同版本的jQuery中，其返回结果可能不一致(请参考下面的演示代码)）

jQuery.fn.promise([type,] obj)（获取已解决的延时对象的promise，并和obj对象合并。并给指定类型的队列清空的时候（默认的类型是FX）添加解决处理）

a.jQuery.trim源码详解

　　trim函数有两个分支，第一个分支是：如果浏览器支持trim函数，则使用浏览器本地的trim函数；否则走第二个分支使用正则去除前后两边的空白。

//如果可以则使用浏览器支持的trim函数
// core_version.trim
jQuery.trim: core_trim && !core_trim.call("\uFEFF\xA0") &#63;
function( text ) {
  return text == null &#63;
  "" :
  core_trim.call( text );
} :
//否则使用正则去除前后两端的空白符
//rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
function( text ) {
  return text == null &#63;
  "" :
  ( text + "" ).replace( rtrim, "" );
},

Copy after login

b. 队列（queue）详解

jQuery.fn.queue( type, data )
　　处理步骤如下：
　　默认队列是fx类型的标准动画效果队列。如果队列类型不是字符串，则需要按默认类型调整数据。
if ( typeof type !== "string" ) {
  data = type;
  type = "fx";
  setter--;
}

Copy after login

　　根据参数判断是获取还是设置指定类型的队列。

　　如果是获取直接获取当前jQuery匹配的元素的第一个元素对应类型的队列；

//获取指定类型的队列
if ( arguments.length < setter ) {
  return jQuery.queue( this[0], type );
}

Copy after login

　　如果是设置，则遍历当前jQuery匹配的元素，给每个元素都设置指定类型的队列，并给每一个元素设置相应的hooks(用来做拓展处理，比如最后清除队列使用)

return data === undefined &#63;
this :
//每一个jQuery的元素都添加队列
this.each(function() {
  var queue = jQuery.queue( this, type, data );
  //确保队列有一个hooks。执行完这段代码以后保存了一个清空队列的函数empty
  jQuery._queueHooks( this, type );
  //如果为"fx"(表示jQuery中的标准动画效果队列)，并且队列中第一个函数没有正在执行
  //则执行队列中第一个函数。可见动画队列添加后会立马执行动画
  if ( type === "fx" && queue[0] !== "inprogress" ) {
    jQuery.dequeue( this, type );
  }
})

Copy after login

　　函数中使用了低级api jQuery.queue函数，是获取/设置队列的基础接口，源码如下

queue: function( elem, type, data ) {
  var queue;
  if ( elem ) {
    //先获取相应类型的队列
    type = ( type || "fx" ) + "queue";
    queue = jQuery._data( elem, type );
    //在队列末尾添加函数
    if ( data ) {
      if ( !queue || jQuery.isArray(data) ) {
        queue = jQuery._data( elem, type, jQuery.makeArray(data) );
      } else {
        queue.push( data );
      }
    }
    return queue || [];
  }
}

Copy after login

c.jQuery.fn.dequeue

　　移除每个匹配元素的指定队列中的第一个函数，并执行被移除的函数。内部调用jQuery.dequeue来实现。jQuery.dequeue的源码如下

　　jQuery.dequeue中需要特别注意的是对FX动画队列的处理

dequeue: function( elem, type ) {
  type = type || "fx";
  var queue = jQuery.queue( elem, type ),
    startLength = queue.length,
    fn = queue.shift(),//取出队列中第一个函数
    hooks = jQuery._queueHooks( elem, type ),
    next = function() {
      jQuery.dequeue( elem, type );
    };
  //如果FX队列中出列，总是取出进度点
  if ( fn === "inprogress" ) {
    fn = queue.shift();
    startLength--;
  }
  hooks.cur = fn;
  if ( fn ) {
    // 添加进度定点，以防止FX队列自动dequeue
    if ( type === "fx" ) {
      queue.unshift( "inprogress" );
    }
    // 清理最后一个队列停止函数
    delete hooks.stop;
    //next和hooks会传递给回调
    fn.call( elem, next, hooks );
  }
  //队列长度为0且hooks存在，则删除队列
  if ( !startLength && hooks ) {
    hooks.empty.fire();
  }
}

Copy after login

　　注意执行队列中函数传递的参数( elem, next, hooks )。

以上所述就是小编给大家分享的jQuery 1.9.1源码分析系列（十四）之常用jQuery工具，希望大家喜欢。