données d'amorçage - jquery .data_jquery

La description de la fonction .data sur le site officiel de jquery est la suivante : stocker toutes les données pertinentes sur l'élément correspondant ou renvoyer la valeur stockée dans les données du prénom du premier élément de l'ensemble d'éléments correspondant.

Clé/valeur de stockage :

　　$("body").data("foo", 52);
　　$("body").data("bar", { myType: "test", count: 40 });
　　$("body").data({ baz: [ 1, 2, 3 ] });

Obtenez la valeur clé

　　$("body").data("foo"); // 52
　　$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

Ce qui précède est facile à maîtriser et à comprendre. Aujourd'hui, lorsque je regardais le masque contextuel de bootstrap, j'ai rencontré un tel morceau de code qui m'a rendu confus

 $(document).on('click.modal.data-api', '[daTa-toggle="modal"]', function (e) {
  alert($(this).data().toggle) //这行是我加入的代码 打印的值是modal
  var $this = $(this)
   , href = $this.attr('href')
   , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
   , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())  
  e.preventDefault()
  $target
   .modal(option)
   .one('hide', function () {
    $this.focus()
   })
 })

Opérateur ternaire $target.data('modal')?'toggle' dans le code : $.extend({ remote:!/#/.test(href) && href }, $target.data() , $ this.data())

consiste à déterminer si la fenêtre est rendue pour la première fois. Exécuté lors du rendu de la fenêtre pour la première fois

option = $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) //结果是 option= {remote: false,toggle: "modal"}

$target.data() est un objet vide {} et la valeur de $this.data() est {toggle: "modal"}. Il va sans dire ici d'où vient la valeur de retour de $this.data()

En regardant le code html, il s'avère que c'est la même chose que la valeur d'attribut de l'objet dom auquel la méthode click est liée. Ce qui suit est le code html de l'objet dom lié

.

aac23be7491467ec6009169c7eae1a15Lancer la démo modal5db79b134e9f6b82c0b36e0489ee08ed

La valeur imprimée par le code alert($(this).data().toggle) que j'ai ajouté est modale, donc cela ne peut être qu'un article réalisé par jquery, j'ai donc étudié le code source de jquery et j'ai trouvé qu'il c'est effectivement vrai !

Ce qui suit fait partie du code de la fonction jQuery.fn.data Lorsque la clé n'est pas définie, c'est-à-dire lorsque .data() est appelé sans passer de paramètres, la paire clé-valeur dont le nom d'attribut commence par. data- sera stocké dans l’élément correspondant.

Dans ce casaac23be7491467ec6009169c7eae1a15Lancer la démo modale553a280de7202c0dce8dfe871821475e, enregistrez la paire clé-valeur {toggle:"modal"} dans

Les étudiants intéressés peuvent essayer le code jquery suivant

    // Gets all values
    if ( key === undefined ) {
      if ( this.length ) {
        data = jQuery.data( elem );
        if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
          attrs = elem.attributes;
          for ( ; i < attrs.length; i++ ) {
            name = attrs[i].name;
            if ( name.indexOf("data-") === 0 ) {
              name = jQuery.camelCase( name.slice(5) );

              dataAttr( elem, name, data[ name ] );
            }
          }
          jQuery._data( elem, "parsedAttrs", true );
        }
      }
      return data;
    }

J'ai lu en détail le document d'aide du site officiel de jquery et il y a le paragraphe suivant
Données HTML5-* Attributs (Données HTML5-* attributs)
À partir de jQuery 1.4.3, l'attribut data-HTML 5 sera automatiquement référencé dans l'objet de données de jQuery. La façon dont les tirets intégrés gèrent les attributs a changé dans jQuery 1.6 pour se conformer à la spécification HTML5 du W3C.

Par exemple, étant donné le code HTML suivant :

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

Tout le code jQuery ci-dessous fonctionnera.

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";