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

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(獲取或設(shè)置當前匹配元素上待執(zhí)行的函數(shù)隊列. 如果當前jQuery對象匹配多個元素：獲取隊列時，只獲取第一個匹配元素上的隊列；設(shè)置隊列(替換隊列、追加函數(shù))時，則為每個匹配元素都分別進行設(shè)置。如果需要移除并執(zhí)行隊列中的第一個函數(shù)，請使用dequeue()函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊列）

jQuery.fn. dequeue([ dequeueName ])（移除每個匹配元素的指定隊列中的第一個函數(shù)，并執(zhí)行被移除的函數(shù)。你也可以使用clearQueue()函數(shù)清空指定的隊列(不會執(zhí)行其中的函數(shù))）

jQuery.fn. clearQueue([ dequeueName ])（清空每個匹配元素的指定隊列中所有尚未執(zhí)行的項）

jQuery.error(msg)（拋出一個包含指定字符串信息的異常。）

jQuery.each(object, callback )（遍歷指定的對象和數(shù)組，并以對象的每個屬性(或數(shù)組的每個成員)作為上下文來遍歷執(zhí)行指定的函數(shù)。所謂的上下文，意即該函數(shù)內(nèi)部的this指針引用了該元素。該函數(shù)屬于全局jQuery對象。請注意，這與jQuery對象(實例)的each()函數(shù)不同，不過jQuery對象(實例)的each()實現(xiàn)也是調(diào)用jQuery.each）

jQuery.proxy()（改變函數(shù)的上下文。你可以將指定函數(shù)傳入該函數(shù)，該函數(shù)將返回一個新的函數(shù)，其執(zhí)行代碼不變，但函數(shù)內(nèi)部的上下文(this)已經(jīng)被更改為指定值

　　用法一：

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

　　將函數(shù)function的上下文對象更改為指定的context。

　　用法二：

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

　　將名為name的函數(shù)的上下文更改為指定的context。函數(shù)name應(yīng)是context對象的一個屬性。

jQuery.map(object, callback)（使用指定函數(shù)處理數(shù)組中的每個元素(或?qū)ο蟮拿總€屬性)，并將處理結(jié)果封裝為新的數(shù)組返回。jQuery庫中還有一個同名的實例方法jQuery.fn.map()，它僅用于對當前jQuery對象所匹配的元素進行遍歷處理）

jQuery.fn.data([ key [, value ] ])（在當前jQuery對象所匹配的所有元素上存取數(shù)據(jù)）

jQuery.fn.removeData(keys)（移除在當前jQuery對象所匹配的每一個元素上存儲的指定鍵名的數(shù)據(jù)項）

jQuery.support（返回用戶當前使用的瀏覽器的特性或bug信息。該屬性是一個對象。該對象的屬性并不是一成不變的，jQuery也并不保證指定的屬性在未來的版本中一定可用，這些屬性主要供插件或內(nèi)核開發(fā)人員使用）

jQuery.contains(container, contained)（判斷指定元素內(nèi)是否包含另一個元素。簡而言之，該函數(shù)用于判斷另一個DOM元素是否是指定DOM元素的后代）

jQuery.extend([ deep ], target , object1 [, objectN... ])（將一個或多個對象的內(nèi)容合并到目標對象。該函數(shù)可以將一個或多個對象的成員屬性和方法復(fù)制到指定的對象上，參數(shù)deep用于指示是否深度遞歸合并）

jQuery.fn.extend(object)（為jQuery擴展一個或多個實例屬性和方法(主要用于擴展方法)）

jQuery.globalEval(code)（全局性地執(zhí)行一段JavaScript代碼，該函數(shù)作用與常規(guī)的JavaScript eval()函數(shù)相似。不同的是，jQuery.globalEval()執(zhí)行代碼的作用域為全局作用域）

jQuery.grep(array, function [, invert ])（使用指定的函數(shù)過濾數(shù)組中的元素，并返回過濾后的數(shù)組。源數(shù)組不會受到影響，過濾結(jié)果只反映在返回的結(jié)果數(shù)組中）

jQuery.inArray(value, array [, fromIndex ])（在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1）

jQuery.isArray(object)（判斷指定參數(shù)是否是一個數(shù)組）

jQuery.isEmptyObject(object)（判斷指定參數(shù)是否是一個空對象。所謂"空對象"，即不包括任何可枚舉(自定義)的屬性。簡而言之，就是該對象沒有屬性可以通過for...in迭代）

jQuery.isPlainObject(object)(判斷指定參數(shù)是否是一個純粹的對象。所謂"純粹的對象"，就是該對象是通過"{}"或"new Object"創(chuàng)建的)

jQuery.isFunction(object)（判斷指定參數(shù)是否是一個函數(shù)）

jQuery.isNumeric(value)（判斷指定參數(shù)是否是一個數(shù)字值）

jQuery.isWindow(object)（判斷指定參數(shù)是否是一個窗口）

jQuery.isXMLDoc(node)(判斷一個DOM節(jié)點是否位于XML文檔中，或者其本身就是XML文檔。該函數(shù)主要用于判斷指定文檔是一個XML文檔還是一個HTML(或XHTML)文檔)

jQuery.makeArray(object)（將一個類數(shù)組對象轉(zhuǎn)換為真正的數(shù)組對象。所謂"類數(shù)組對象"就是一個常規(guī)的Object對象，但它和數(shù)組對象非常相似：具備length屬性，并以0、1、2、3……等數(shù)字作為屬性名。不過它畢竟不是數(shù)組，沒有從數(shù)組的原型對象上繼承下來的內(nèi)置方法(例如：push()、 sort()等)）

jQuery.noop()（是一個空函數(shù)，它什么也不做。當某些時候你需要傳入函數(shù)參數(shù)，而且希望它什么也不做的時候，你可以使用該函數(shù)，也無需再新建一個空的函數(shù)）

jQuery.now()（返回當前時間距1970年1月1日午夜所經(jīng)過的毫秒數(shù)。該函數(shù)的作用類似于new Date().getTime()）

jQuery.parseHTML(htmlString [, context ] [, keepScripts ])（將HTML字符串解析為對應(yīng)的DOM節(jié)點數(shù)組。該函數(shù)將使用原生的DOM元素創(chuàng)建函數(shù)把HTML字符串轉(zhuǎn)換為一個DOM元素的集合，你可以將這些DOM元素插入到文檔中）

jQuery.parseJSON(jsonString )（將格式完好的JSON字符串轉(zhuǎn)為與之對應(yīng)的JavaScript對象。所謂"格式完好"，就是要求指定的字符串必須符合嚴格的JSON格式，例如：屬性名稱必須加雙引號、字符串值也必須用雙引號。如果傳入一個格式不"完好"的JSON字符串將拋出一個JS異常）

jQuery.parseXML(XMLString)（將字符串解析為對應(yīng)的XML文檔。該函數(shù)將使用瀏覽器內(nèi)置的解析函數(shù)來創(chuàng)建一個有效的XML文檔，該文檔可以傳入jQuery()函數(shù)來創(chuàng)建一個典型的jQuery對象，從而對其進行遍歷或其他操作）

jQuery.trim(str)（去除字符串兩端的空白字符。該函數(shù)可以去除字符串開始和末尾兩端的空白字符(直到遇到第一個非空白字符串為止)。它會清除包括換行符、空格、制表符等常見的空白字符）

jQuery.type(object)（確定JavaScript內(nèi)置對象的類型，并返回小寫形式的類型名稱。JavaScript也自帶有一個typeof運算符，可以確定數(shù)據(jù)的類型。不過，對于絕大多數(shù)對象而言，typeof運算符都返回"object"，無法區(qū)分具體的類型。jQuery.type()可以更加精確地確定JS內(nèi)置對象的類型。例如：對于new Number(5)，typeof返回"object"，jQuery.type()返回"number"；對于new Date()，typeof返回"object"，jQuery.type()返回"date"。type的返回的結(jié)果有"Boolean Number String Function Array Date RegExp Object Error"的小寫）

jQuery.unique(array)（根據(jù)元素在文檔中出現(xiàn)的先后順序?qū)OM元素數(shù)組進行排序，并移除重復(fù)的元素。

　　注意：該函數(shù)僅作用于DOM元素數(shù)組，而不是數(shù)字、字符串或其他類型。此外，這里的重復(fù)指的是兩個元素實際上是同一個元素(通過全等"==="來判斷)，而不是指兩個屬性相同的元素。

　　警告：通過實際測試發(fā)現(xiàn)，該函數(shù)并不能按照預(yù)期返回正確的結(jié)果。在不同的瀏覽器中、在不同版本的jQuery中，其返回結(jié)果可能不一致(請參考下面的演示代碼)）

jQuery.fn.promise([type,] obj)（獲取已解決的延時對象的promise，并和obj對象合并。并給指定類型的隊列清空的時候（默認的類型是FX）添加解決處理）

a.jQuery.trim源碼詳解

　　trim函數(shù)有兩個分支，第一個分支是：如果瀏覽器支持trim函數(shù)，則使用瀏覽器本地的trim函數(shù)；否則走第二個分支使用正則去除前后兩邊的空白。

//如果可以則使用瀏覽器支持的trim函數(shù)
// 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類型的標準動畫效果隊列。如果隊列類型不是字符串，則需要按默認類型調(diào)整數(shù)據(jù)。
if ( typeof type !== "string" ) {
  data = type;
  type = "fx";
  setter--;
}

　　根據(jù)參數(shù)判斷是獲取還是設(shè)置指定類型的隊列。

　　如果是獲取直接獲取當前jQuery匹配的元素的第一個元素對應(yīng)類型的隊列；

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

　　如果是設(shè)置，則遍歷當前jQuery匹配的元素，給每個元素都設(shè)置指定類型的隊列，并給每一個元素設(shè)置相應(yīng)的hooks(用來做拓展處理，比如最后清除隊列使用)

return data === undefined ?
this :
//每一個jQuery的元素都添加隊列
this.each(function() {
  var queue = jQuery.queue( this, type, data );
  //確保隊列有一個hooks。執(zhí)行完這段代碼以后保存了一個清空隊列的函數(shù)empty
  jQuery._queueHooks( this, type );
  //如果為"fx"(表示jQuery中的標準動畫效果隊列)，并且隊列中第一個函數(shù)沒有正在執(zhí)行
  //則執(zhí)行隊列中第一個函數(shù)?？梢妱赢嬯犃刑砑雍髸ⅠR執(zhí)行動畫
  if ( type === "fx" && queue[0] !== "inprogress" ) {
    jQuery.dequeue( this, type );
  }
})

　　函數(shù)中使用了低級api jQuery.queue函數(shù)，是獲取/設(shè)置隊列的基礎(chǔ)接口，源碼如下

queue: function( elem, type, data ) {
  var queue;
  if ( elem ) {
    //先獲取相應(yīng)類型的隊列
    type = ( type || "fx" ) + "queue";
    queue = jQuery._data( elem, type );
    //在隊列末尾添加函數(shù)
    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

　　移除每個匹配元素的指定隊列中的第一個函數(shù)，并執(zhí)行被移除的函數(shù)。內(nèi)部調(diào)用jQuery.dequeue來實現(xiàn)。jQuery.dequeue的源碼如下

　　jQuery.dequeue中需要特別注意的是對FX動畫隊列的處理

dequeue: function( elem, type ) {
  type = type || "fx";
  var queue = jQuery.queue( elem, type ),
    startLength = queue.length,
    fn = queue.shift(),//取出隊列中第一個函數(shù)
    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" );
    }
    // 清理最后一個隊列停止函數(shù)
    delete hooks.stop;
    //next和hooks會傳遞給回調(diào)
    fn.call( elem, next, hooks );
  }
  //隊列長度為0且hooks存在，則刪除隊列
  if ( !startLength && hooks ) {
    hooks.empty.fire();
  }
}

　　注意執(zhí)行隊列中函數(shù)傳遞的參數(shù)( elem, next, hooks )。

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

最新評論