bootstrap data與jquery .data，jquery.data

bootstrap data與jquery .data，jquery.data

jquery官網對.data函數描述是:在匹配元素上儲存任意相關資料 或 返回匹配的元素集合中的第一個元素的給定名稱的資料存放區的值。

儲存索引值（key/value）：

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

 
  取索引值
 

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

以上這些都很容易掌握和理解，今天在看bootstrap 的彈窗掩碼的時候遇到了這樣一段代碼讓我產生了疑惑

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

代碼中的三目運算子 $target.data('modal')?'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())

是判斷視窗是否是第一次渲染 。第一次渲染視窗的時候執行了

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

$target.data()是Null 物件{} ，$this.data()值是{toggle: "modal"} 。這裡不經要問 $this.data() 的傳回值哪來的

看了下html代碼，剛好與被綁定click方法的dom對象的屬性值一樣，以下是被綁定的dom對象的html代碼

<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

我加入的代碼alert($(this).data().toggle)列印的值是modal ，所以這裡只能是jquery做的文章，於是我研究了jquery的源碼發現果然真是 ！

以下是jQuery.fn.data函數中的部分代碼 , 當key未定義也就是調用 .data() 未傳參數時會將屬性名稱為data-開頭的索引值對存入匹配元素上。

本例中<a href="#myModal" rel="external nofollow" rel="external nofollow" role="button" class="btn" data-toggle="modal">Launch demo modal</a>，將{toggle:"modal"}索引值對存入

有興趣的同學可以去試調以下jquery代碼

    // 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;    }

我再去詳細閱讀了jquery官網的協助文檔有如下一段話
HTML5 data-* Attributes（HTML5 data-* 屬性）
從jQuery 1.4.3起， HTML 5 data- 屬性 將自動被引用到jQuery的資料對象中。嵌入式破折號處理屬性（ attributes）的方式在 jQuery 1.6 中已經改變，以使之符合W3C HTML5 規範.

舉個例子, 給定下面的HTML:

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

下面所有的 jQuery 代碼都能運行。

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

jquery data()快取資料有用?重新整理頁面就沒了

沒有快取資料的作用，只是方便在某一域上存取對象
 
jquery easyui外掛程式開發中的data用法

這就是一個為了一個方便。兩種調用方式。
一種是以對象的名義發起。
假設，obj是一個jQuery對象,value是我想綁定在dom節點上的一個值，可以是數字、字串或者對象。
那我可以兩種方式調用data方法。
一種是obj.data(value);
第二種是$.data(obj,value);
怎麼方便怎麼用，沒有區別。