Série d'analyses de code source jQuery 1.9.1 (14) Outils jQuery couramment utilisés

Afin de préparer le prochain chapitre sur l'analyse du traitement de l'animation, jetons d'abord un coup d'œil à quelques outils. L'outil de file d'attente est souvent utilisé dans le traitement d'animation.

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback )) (Obtient ou définit la file d'attente de fonctions à exécuter sur l'élément correspondant actuel. Si l'objet jQuery actuel correspond éléments multiples : lors de l'obtention de la file d'attente, obtenez uniquement la file d'attente sur le premier élément correspondant ; lors de la définition de la file d'attente (file d'attente de remplacement, fonction d'ajout), définissez-la séparément pour chaque élément correspondant si vous devez supprimer et exécuter le premier de la file d'attente. . veuillez utiliser la fonction dequeue(). Vous pouvez également utiliser la fonction clearQueue() pour effacer la file d'attente spécifiée)

jQuery.fn. dequeue([ dequeueName ]) (supprime la première fonction dans la file d'attente spécifiée de chaque élément correspondant et exécute la fonction supprimée. Vous pouvez également utiliser la fonction clearQueue() pour effacer la file d'attente spécifiée (les fonctions dans il ne sera pas exécuté))

jQuery.fn. clearQueue([ dequeueName ]) (efface tous les éléments non exécutés dans la file d'attente spécifiée de chaque élément correspondant)

jQuery.error(msg) (Lance une exception contenant les informations de chaîne spécifiées.)

jQuery.each(object, callback) (parcourt l'objet et le tableau spécifiés et utilise chaque propriété de l'objet (ou chaque membre du tableau) comme contexte pour parcourir et exécuter la fonction spécifiée. Le soi-disant contexte signifie que le pointeur this à l'intérieur de la fonction fait référence à l'élément. Cette fonction appartient à l'objet jQuery global. Notez que ceci est différent de la fonction each() de l'objet jQuery (instance), mais de l'implémentation each() de jQuery. l'objet (instance) appelle également jQuery.each )

jQuery.proxy() (Changer le contexte de la fonction. Vous pouvez passer la fonction spécifiée dans cette fonction, qui renverra une nouvelle fonction. Son code d'exécution reste inchangé, mais le contexte (this) à l'intérieur de la fonction a été modifié. Pour la valeur spécifiée

　Utilisation 1 :

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

Copier après la connexion

Remplacez l'objet contextuel de la fonction par le contexte spécifié.

Utilisation 2 :

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

Copier après la connexion

Modifiez le contexte de la fonction nommée name par le contexte spécifié. Le nom de la fonction doit être un attribut de l'objet contextuel.

jQuery.map(object, callback) (Utilisez la fonction spécifiée pour traiter chaque élément du tableau (ou chaque attribut de l'objet), et encapsuler les résultats du traitement dans un nouveau tableau et le renvoyer. Il existe également un jQuery. bibliothèque du même nom Méthode d'instance jQuery.fn.map(), qui n'est utilisée que pour parcourir les éléments correspondant à l'objet jQuery actuel)

jQuery.fn.data([ key [, value ] ]) (accéder aux données sur tous les éléments correspondant à l'objet jQuery actuel)

jQuery.fn.removeData(keys) (supprime l'élément de données avec la clé spécifiée stockée sur chaque élément correspondant à l'objet jQuery actuel)

jQuery.support (renvoie des informations sur les fonctionnalités ou les bogues du navigateur actuellement utilisé par l'utilisateur. Cette propriété est un objet. Les propriétés de cet objet ne sont pas immuables et jQuery ne garantit pas que les propriétés spécifiées seront disponibles à l'avenir versions , ces propriétés sont principalement utilisées par les développeurs de plugins ou de noyau)

jQuery.contains(container, contain) (détermine si l'élément spécifié contient un autre élément. En bref, cette fonction est utilisée pour déterminer si un autre élément DOM est un descendant de l'élément DOM spécifié)

jQuery.extend([ deep ], target , object1 [, objectN... ]) (Fusionner le contenu d'un ou plusieurs objets dans l'objet cible. Cette fonction peut ajouter des propriétés membres et des méthodes d'un ou plusieurs objets Copier à l'objet spécifié, le paramètre deep est utilisé pour indiquer s'il faut fusionner profondément de manière récursive)

jQuery.fn.extend(object) (étend une ou plusieurs propriétés et méthodes d'instance pour jQuery (principalement utilisé pour les méthodes d'extension))

jQuery.globalEval(code) (exécute globalement un morceau de code JavaScript. Cette fonction est similaire à la fonction JavaScript eval() classique. La différence est que la portée du code exécuté par jQuery.globalEval() est la portée globale portée)

jQuery.grep(array, function [, invert ]) (utilise la fonction spécifiée pour filtrer les éléments du tableau et renvoie le tableau filtré. Le tableau source ne sera pas affecté et les résultats du filtrage ne sont reflétés que dans le tableau de résultats renvoyé)

jQuery.inArray(value, array [, fromIndex ]) (Recherche la valeur spécifiée dans le tableau et renvoie sa valeur d'index. Si la valeur n'existe pas dans le tableau, elle renvoie -1)

jQuery.isArray(object) (détermine si le paramètre spécifié est un tableau)

jQuery.isEmptyObject(object) (détermine si le paramètre spécifié est un objet vide. Le soi-disant "objet vide" n'inclut aucun attribut énumérable (personnalisé). En bref, l'objet n'a aucun attribut. Parcourez pour ...dans)

jQuery.isPlainObject(object) (détermine si le paramètre spécifié est un objet pur. Le soi-disant "objet pur" signifie que l'objet est créé via "{}" ou "nouvel objet")

jQuery.isFunction(object) (détermine si le paramètre spécifié est une fonction)

jQuery.isNumeric(value) (détermine si le paramètre spécifié est une valeur numérique)

jQuery.isWindow(object) (détermine si le paramètre spécifié est une fenêtre)

jQuery.isXMLDoc(node) (détermine si un nœud DOM est situé dans un document XML, ou est lui-même un document XML. Cette fonction est principalement utilisée pour déterminer si le document spécifié est un document XML ou un HTML (ou XHTML )document)

jQuery.makeArray(object) (convertit un objet de type tableau en un véritable objet de tableau. Le soi-disant "objet de type tableau" est un objet Object normal, mais il est très similaire à un objet de tableau : il a un attribut de longueur et se termine par 0 , 1, 2, 3... et d'autres nombres comme noms d'attribut. Cependant, ce n'est pas un tableau après tout, et il n'y a pas de méthodes intégrées héritées de l'objet prototype du tableau ( par exemple : push(), sort(), etc.)

jQuery.noop() (est une fonction vide, elle ne fait rien. Lorsque parfois vous devez transmettre des paramètres de fonction et que vous souhaitez qu'elle ne fasse rien, vous pouvez utiliser cette fonction, et il n'est pas nécessaire de créer un nouveau vide fonction)

jQuery.now() (renvoie le nombre de millisecondes depuis minuit le 1er janvier 1970. Cette fonction est similaire à new Date().getTime())

jQuery.parseHTML(htmlString [, context ] [, keepScripts ]) (analyse la chaîne HTML dans le tableau de nœuds DOM correspondant. Cette fonction utilisera la fonction native de création d'éléments DOM pour convertir la chaîne HTML en une collection d'éléments DOM, vous pouvez insérer ces éléments DOM dans le document)

jQuery.parseJSON(jsonString) (Convertit une chaîne JSON bien formée en son objet JavaScript correspondant. Le soi-disant « bien formé » signifie que la chaîne spécifiée doit être conforme au format JSON strict, par exemple : l'attribut le nom doit ajouter des guillemets doubles et les valeurs de chaîne doivent également utiliser des guillemets doubles. Si une chaîne JSON avec un format incomplet est transmise, une exception JS sera levée)

jQuery.parseXML(XMLString) (analyse la chaîne dans le document XML correspondant. Cette fonction utilisera la fonction d'analyse intégrée du navigateur pour créer un document XML valide, qui peut être transmis à la fonction jQuery() pour créer un Un objet jQuery typique, permettant de le parcourir ou de le manipuler d'une autre manière)

jQuery.trim(str) (Supprimez les caractères d'espacement aux deux extrémités de la chaîne. Cette fonction peut supprimer les caractères d'espacement aux deux extrémités de la chaîne (jusqu'à ce que la première chaîne non-espace soit rencontrée). Elle effacera, y compris les symboles de nouvelle ligne. , espaces, tabulations et autres caractères d'espacement courants)

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, "" );
},

Copier après la connexion

b. 队列（queue）详解

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

Copier après la connexion

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

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

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

Copier après la connexion

　　如果是设置，则遍历当前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 );
  }
})

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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