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

為了給下一章分析動畫處理做準備，先來看看一些工具。其中隊列工具在動畫處理中被經常使用。

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(取得或設定目前符合元素上待執行的函數佇列. 如果目前jQuery物件符合多個元素：取得佇列時，只取得第一個符合元素上的佇列；設定佇列(替換佇列、追加函數)時，則為每個符合元素分別進行設定。函數，請使用dequeue()函數。

jQuery.fn. dequeue([ dequeueName ])（移除每個符合元素的指定佇列中的第一個函數，並執行移除的函數。你也可以使用clearQueue()函數清空指定的佇列(不會執行其中的函數)）

jQuery.fn. clearQueue([ dequeueName ])（清空每個符合元素的指定佇列中所有尚未執行的項目）

jQuery.error(msg)（拋出一個包含指定字串資訊的例外。）

jQuery.each(object, callback )（遍歷指定的物件和數組，並以物件的每個屬性(或數組的每個成員)作為上下文來遍歷執行指定的函數。所謂的上下文，意即該函數內部的this指標引用了該元素。 ）

jQuery.proxy()（改變函數的上下文。你可以將指定函數傳入該函數，該函數將傳回一個新的函數，其執行程式碼不變，但函數內部的上下文(this)已經被更改為指定值

　　

用法一：

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

　　將函數function的上下文物件變更為指定的context。

　　用法二：

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

　　將名為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……等數字作為屬性名。

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格式，例如：屬性名稱必須加雙引號、字串值也必須用雙引號。

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") ?
function( text ) {
  return text == null ?
  "" :
  core_trim.call( text );
} :
//否则使用正则去除前后两端的空白符
//rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
function( text ) {
  return text == null ?
  "" :
  ( text + "" ).replace( rtrim, "" );
},

b. 队列（queue）详解

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

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

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

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

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

return data === undefined ?
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 );
  }
})

　　函数中使用了低级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 || [];
  }
}

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

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

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