氟塑料離心泵www.buybeng.com
          

          jquery教程http://www.software8.co/wzjs/jquery/
          
			
          
				
					
	
          
		
          
			jQuery對象數據緩存Cache原理及jQuery.data詳解
		
          
		
          網上有很多教你怎么使用jQuery.data(..)來實現數據緩存，但有兩個用戶經常使用的data([key],[value])和jQuery.data(element,[key],[value])幾乎沒有什么文章說清楚它們兩的區別，所以我用到了，研究下分享給大家。
          $("").data([key],[value])與jQuery.data(element,[key],[value])的區別
          這兩個函數都是用來在元素上存放數據也就平時所說的數據緩存,都返回jQuery對象，當時我分別在使用它倆的時候真的嚇我一跳，區別可大了，真是不用不知道，一用嚇一跳。看例子先吧，后再根據源代碼分析。
          Js代碼： 
          1. <div id="test2" onclick="test()">test2</div>  
          2.           <div id="abc3" onclick="test()">test3</div>  
          3.           <div id="test" onclick="test()">test</div>  
          4.           <p id="ttt">aaaa</p>  
          5.     <script>  
          6.       $(document).ready(function(){  
          7.         $("#test").click(function(){  
          8.         alert("JQUERY");  
          9.        
          10.      var e=$("div");//定義了兩jquery對象  
          11.      var w=$("div");//e是不等于w的。  
          12.   
          13.      //首先使用data([key],[value])用法。  
          14.       $(e).data("a","aaaa");//分別在e和w上保存Key一樣的數據，  
          15.       $(w).data("a","wwww");// 看它是否會覆蓋前面的，雖然是保存在不同對象上。  
          16.       alert($(e).data("a"));//你猜到答案了嗎，里輸出是wwww;是不是有點意外？  
          17.       alert(e===w)//false  
          18.       alert($(w).data("a"));//這里也是wwww;  
          19.        
          20.   //使用jQuery.data(element,[key],[value])來存放數據。  
          21.       $.data(e,"b","cccc");//分別在e和w上保存Key一樣的數據，  
          22.       $.data(w,"b","dddd");// 看它是否會覆蓋前面的，雖然是保存在不同對象上。  
          23.       alert($.data(e,"b"));//應該你能猜答案吧，輸出cccc  
          24.       alert($.data(w,"b"));//這輸出dddd  
          25.       
          26.          });  
          27.      });  
          28. </script>  
              看了上面的例子是不是發現data([key],[value])與jQuery.data(element,[key],[value])兩個根本就不一樣了對吧？它們之間到底有沒有關系呢。怎么data([key],[value])會覆蓋前面key相同的值呢？
          而jQuery.data(element,[key],[value])只要是綁定到不同的對象上都不會造成覆蓋。是這樣嗎？那來研究下它們的源代碼吧。
          先看jQuery.data(element,[key],[value])源代碼。
          Js代碼：  
          1. jQuery.extend({  
          2.     cache: {},  
          3.   
          4.     // Please use with caution  
          5.     uuid: 0,  
          6.   
          7.     // Unique for each copy of jQuery on the page  
          8.     // Non-digits removed to match rinlinejQuery  
          9.     expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),  
          10.   
          11.     ....  
          12.     data: function( elem, name, data, pvt /* Internal Use Only */ ) {  
          13.     // 是否可以附加數據，不可以則直接返回  
          14.         if ( !jQuery.acceptData( elem ) ) {  
          15.             return;  
          16.         }  
          17.   
          18.         var privateCache, thisCache, ret,  
          19.             //jQuery.expando這是一個唯一的字符串，是這介jquery對象產生的時候就生成了。  
          20.             internalKey = jQuery.expando,  
          21.             getByName = typeof name === "string",  
          22.   
          23.             // 必須區分處理DOM元素和JS對象，因為IE6-7不能垃圾回收對象跨DOM對象和JS對象進行的引用屬性  
          24.             isNode = elem.nodeType,  
          25.   
          26.              // 如果是DOM元素，則使用全局的jQuery.cache   
          27.              // 如果是JS對象，則直接附加到對象上  
          28.             cache = isNode ? jQuery.cache : elem,  
          29.   
          30.             // Only defining an ID for JS objects if its cache already exists allows  
          31.             // the code to shortcut on the same path as a DOM node with no cache  
          32.             id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey,  
          33.             isEvents = name === "events";  
          34.   
          35.          // 避免做更多的不必要工作，當嘗試在一個沒有任何數據的對象上獲取數據時  
          36.        // 對象沒有任何數據，直接返回  
          37.         if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) {  
          38.             return;  
          39.         }  
          40.         // id不存在的話就生成一個  
          41.         if ( !id ) {  
          42.             // Only DOM nodes need a new unique ID for each element since their data  
          43.             // ends up in the global cache  
          44.             if ( isNode ) {  
          45.              // 如果是DOM元素則在元素上產生唯一的ID 并且以jQuery.expando  
          46.              //為屬性值為id保存在elem元素上，以便以后再根據jQuery.expando來查找ID。  
          47.                 elem[ internalKey ] = id = ++jQuery.uuid;  
          48.             } else {  
          49.             // JS對象則直接使用jQuery.expando，既然是直接附加到對象上，又何必要id呢？  
          50.               // 避免與其他屬性沖突！  
          51.                 id = internalKey;  
          52.             }  
          53.         }  
          54.   
          55.         //// 當我們試著訪問一個鍵是否含有值的時候，如果不存在jQuery.cache[id]值,  
          56.         // 初始化jQuery.cache[id]值 為一個空對象{}  
          57.         if ( !cache[ id ] ) {  
          58.          cache[ id ] = {};  
          59.    
          60.             if ( !isNode ) {  
          61.                 cache[ id ].toJSON = jQuery.noop;  
          62.             }  
          63.         }  
          64.   
          65.         // An object can be passed to jQuery.data instead of a key/value pair; this gets  
          66.         // shallow copied over onto the existing cache  
          67.         // data是接收對象和函數，淺拷貝  
          68.         if ( typeof name === "object" || typeof name === "function" ) {  
          69.             if ( pvt ) {  
          70.                 cache[ id ] = jQuery.extend( cache[ id ], name );  
          71.             } else {  
          72.                 cache[ id ].data = jQuery.extend( cache[ id ].data, name );  
          73.             }  
          74.         }  
          75.         / 存儲對象，存放了所有數據的映射對象  
          76.         privateCache = thisCache = cache[ id ];  
          77.   
          78.         // jQuery data() is stored in a separate object inside the object's internal data  
          79.         // cache in order to avoid key collisions between internal data and user-defined  
          80.         // data.  
          81.         // jQuery內部數據存在一個獨立的對象（thisCache.data==thisCache[ internalKey ]）  
          82.           //上，為了避免內部數據和用戶定義數據沖突  
          83.         if ( !pvt ) {  
          84.               // 存放私有數據的對象不存在，則創建一個{}  
          85.             if ( !thisCache.data ) {  
          86.                 thisCache.data = {};  
          87.             }  
          88.              // 使用私有數據對象替換thisCache  
          89.             thisCache = thisCache.data;  
          90.         }  
          91.        // 如果data不是undefined，表示傳入了data參數，則存儲data到name屬性上  
          92.         if ( data !== undefined ) {  
          93.         // jQuery.camelCase( name )作用是如果傳入的是object/function，不做轉換，  
          94.         //只有傳入的name是字符串才會轉換。所以最終保存下來的是key/value對;  
          95.             thisCache[ jQuery.camelCase( name ) ] = data;  
          96.         }  
          97.   
          98.         //從這以后下面的代碼都是處理data: function( elem, name）data為空，求返回值data的情況了。  
          99.   
          100.         if ( isEvents && !thisCache[ name ] ) {  
          101.             return privateCache.events;  
          102.         }  
          103.   
          104.        // 如果name是字符串，則返回data 
          105.        // 如果不是，則返回整個存儲對象  
          106.         if ( getByName ) {  
          107.   
          108.             // First Try to find as-is property data  
          109.             ret = thisCache[ name ];  
          110.   
          111.             // Test for null|undefined property data  
          112.             if ( ret == null ) {  
          113.   
          114.                 // Try to find the camelCased property  
          115.                 ret = thisCache[ jQuery.camelCase( name ) ];  
          116.             }  
          117.         } else {  
          118.             ret = thisCache;  
          119.         }  
          120.   
          121.         return ret;  
          122.     },  
          123.     ............  
          124.     });  
          請看圖。
           
           看jQuery.data(element,[key],[value])源代碼后可以知道，每一個element都會有自己的一個{key:value}對象保存著數據，所以新建的對象就算有key相同它也不會覆蓋原來存在的對象key所對應的value，因為新對象保存是是在另一個{key:value}對象中。

                   接下來要分析data([key],[value])源代碼使用到了each(callback)，在分析它之前先看下each(callback)用法和源代碼。
          Js代碼： 
          1.     <div id="test2" onclick="test()">test2</div>  
          2.          <div id="abc3" onclick="test()">test3</div>  
          3.           <div id="test" onclick="test()">test</div>  
          4.           <p id="ttt">aaaa</p>  
          5.     <script>  
          6.       $(document).ready(function(){  
          7.         $("#test").click(function(){  
          8.         alert("JQUERY");  
          9.   
          10.         var i=0;  
          11.         $("#abc3").each(function() {  
          12.         alert(++i);//只輸出1;因為只有一個<div id="abc3">  
          13.         });  
          14.      alert("----");  
          15.         var j=0;  
          16.         $("div").each(function() {  
          17.         alert(++j);//分別輸出1，2，3;因為有三個<div>所以循環三遍  
          18.         });  
          19.      });  
          20.    });  
          21.     </script>  
          22.   
          23. 現在來看each方法的具體實現如下：  
          24. jQuery.fn = jQuery.prototype = {  
          25.     each: function( callback, args ) {  
          26.        return jQuery.each( this, callback, args );  
          27.     }  
          28. }  
          29.   
          30. 可以看到它返回的是全局的each方法，并且將自身jQuery對象做為參數給它，全局的each方法的具體實現如下：  
          31. // args 作為內部成員的調用來使用  
          32. each: function( object, callback, args ) {  
          33.     var name, i = 0, length = object.length;  // 當object為jQuery對象時，length非空  
          34.   
          35.     if ( args ) {  
          36.         if ( length === undefined ) {  
          37.             for ( name in object )  
          38.                 if ( callback.apply( object[ name ], args ) === false )  
          39.                     break;  
          40.         } else  
          41.             for ( ; i < length; )  
          42.                 if ( callback.apply( object[ i++ ], args ) === false )  
          43.                     break;    
          44.     // 以下是客戶端程序進行調用  
          45.     } else {  
          46.         if ( length === undefined ) {  
          47.             for ( name in object )  
          48.                 if ( callback.call( object[ name ], name, object[ name ] ) === false )  
          49.                     break;  
          50.         } else  
          51.             // i表示索引值，value表示DOM元素  
          52.             for ( var value = object[0];  
          53.                 i < length && callback.call( value, i, value ) !== false;   
          54.                 value = object[++i] ){}  
          55.     }    
          56.   
          57.     return object;  
          58. }  
           現在我們關注下 for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 這句代碼；其中object[0]取得jQuery對象中的第一個DOM元素，通過for循環，
          得到遍歷整個jQuery對象中對應的每個DOM元素，通過callback.call( value,i,value); 將callback的this對象指向value對象，并且傳遞兩個參數,i表示索引值，value表示DOM元素；其中callback是類似于 function(index, elem) { } 的方法。所以就得到 $("").each(function(index, elem){ }); 
           再來看看data([key],[value])的源代碼
          Js代碼：  
          1. jQuery.fn.extend({  
          2.     data: function( key, value ) {  
          3.         var parts, part, attr, name, l,  
          4.             elem = this[0],  
          5.             i = 0,  
          6.             data = null;  
          7.   
          8.         // Gets all values  
          9.         if ( key === undefined ) {  
          10.             .....//處理沒有Key的情況，這里不是我們要討論的
          11.   
          12.             return data;  
          13.         }  
          14.   
          15.         // Sets multiple values  
          16.         if ( typeof key === "object" ) {  
          17.             return this.each(function() {  
          18.                 jQuery.data( this, key );  
          19.             });  
          20.         }  
          21.   
          22.         parts = key.split( ".", 2 );  
          23.         parts[1] = parts[1] ? "." + parts[1] : "";  
          24.         part = parts[1] + "!";  
          25.   
          26.         return jQuery.access( this, function( value ) {  
          27.   
          28.             if ( value === undefined ) {  
          29.                 。。。//這里是沒有value時，是索取返回值的情況，這不是我們討論  
          30.             }  
          31.   
          32.             parts[1] = value;  
          33.   
          34.            //如果我使用用$("div").data("a","aaa"))，下面調用each前的this指的是$("div")這返回的對象，  
          35.             this.each(function() {//注意了，這里是以每一個匹配的元素作為上下文來執行一個函數  
          36.                 var self = jQuery( this );  
          37.   
          38.                 self.triggerHandler( "setData" + part, parts );  
          39.   
          40.                 //這里在元素上存放數據，本質還是委托data(element,[key],[value]）來做的。  
          41.                  //看前面有分析過了。  
          42.                  //下面data( this, key, value )里的this指的是遍歷整個jQuery對象中對應的每個DOM元素  
          43.                  //$("div")它對應頁面中一個<div>數組。  
          44.             jQuery.data( this, key, value )<span style="background-color: #ffcc00;">;//這名句會被循環多次執行，也就是保存數據</span>。  
          45.                 //這里就是核心一句話。但要清楚看上面了它是在each（functipn(){}）中的。  
          46.                 self.triggerHandler( "changeData" + part, parts );  
          47.             });  
          48.         }, null, value, arguments.length > 1, null, false );  
          49.     },  
          50. //在元素上移除存放的數據。具體實現如下：   
          51.     removeData: function( key ) {  
          52.         return this.each(function() {  
          53.             jQuery.removeData( this, key );  
          54.         });  
          55.    }  
          56. });  
           
           如果對于data([key],[value])的源代碼不是很了解，好吧，我就用一個例子來模仿實現它吧。
          Js代碼：  
          1. <div id="test2" onclick="test()">test2</div>  
          2.           <div id="abc3" onclick="test()">test3</div>  
          3.           <div id="test" onclick="test()">test</div>  
          4.           <p id="ttt">aaaa</p>  
          5.     <script>  
          6.       $(document).ready(function(){  
          7.         $("#test").click(function(){  
          8.         alert("JQUERY");  
          9.   
          10.         var i=0;  
          11.         $("#abc3").each(function() {  
          12.         alert(++i);//只輸出1;因為只有一個<div id="abc3">  
          13.         });  
          14.      alert("----");  
          15.         var j=1;  
          16.         $("div").each(function() {//以每一個匹配的元素作為上下文來執行這個函數  
          17.   
          18.                     $.data(this,"a","wwww");//這里的this就是指$("div")，  
          19.                                                        //分別遍歷每一個匹配的元素給它們每一個對象{}都保存一個key/value  
          20.                     alert(j++);//分別輸出1 ，2 ，3 因為有三個<div>元素  
          21.         });  
          22.          alert($("#test").data("a"));//返回wwww,   
          23.            //是不是很驚呀，我沒有保存在它身上啊，怎么也有值，很明顯是它是查這個div節點上有沒有，  
          24.            //肯定是有值了，因為上面給循環保存在div這Dom結點上了。  
          25.          alert($("#test")===$("div"));//false證明兩新建的對象不是同一個。  
          26.   
          27.          alert($("div").data("a"));//返回wwww,  
          28.          //這里也是一樣因為是div節點上都保存了"a"="wwww"這樣一個鍵值對了。  
          29.          });  
          30.        });  
          31.     </script>  
           現在對data([key],[value])與jQuery.data(element,[key],[value])都有了解了吧，如果還是半懂，再回頭多看一遍，耐心地理解一下。其實表面上很不一樣。但本質上還是有聯系的，現在明白原理后就可以請放心地使用了。jQuery.data(element,[key],[value])只把數據綁定到參數element節點上。data([key],[value])
              如$("div").data("a","aaaa")它是把數據綁定每一個匹配div節點的元素上。
              附加說明下，文中所分析用到的是jquery-1.7.2.js的源代碼。下載地址：http://www.software8.co/software/wlbc/3730.html
          
		
          
			posted on 2013-04-06 17:57 你爸是李剛 閱讀(903) 評論(1)  編輯  收藏  
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				# re: jQuery對象數據緩存Cache原理及jQuery.data詳解
					
						2014-02-28 10:08
					
				gary#zheng
			
          
			
          
				var e=$("div");//定義了兩jquery對象  
               var w=$("div");//e是不等于w的。  
            
               //首先使用data([key],[value])用法。  
                $(e).data("a","aaaa");//分別在e和w上保存Key一樣的數據，  
                $(w).data("a","wwww");// 看它是否會覆蓋前面的，雖然是保存在不同對象上
          你確定$('div')這是定義一個jquery對象而不是從html中獲取包裝一個jquery對象
          $('<div/>')和$('div')有什么區別  回復  更多評論
				  
			
          
		

          




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
			
          
				
					
          
	
          
		
          <2013年4月>
          
	
          日一二三四五六
          31123456
          78910111213
          14151617181920
          21222324252627
          2829301234
          567891011
          

          

					

          導航
          

					

          統計
          
	
					
					

          常用鏈接
          


          留言簿
          


		
          隨筆檔案
          
		
				
			
	
		
          文章檔案
          
		
				
			
	
		
          技術網站
          
		
				
			
	
		
          行業網站
          
		
				
			
	



          搜索
          



          最新評論
	
          



          閱讀排行榜
          



          評論排行榜
          


				
			
          			
			

	

          
  
          
    站長網
    氟塑料離心泵
    注塑機
    液晶廣告機
  
          

          
    







          
        
	




主站蜘蛛池模板：
清新县|
临洮县|
勐海县|
万全县|
邵阳市|
奈曼旗|
娄底市|
锡林郭勒盟|
乐平市|
平塘县|
师宗县|
中宁县|
临潭县|
隆德县|
甘孜|
达孜县|
康定县|
高要市|
都昌县|
讷河市|
五家渠市|
达孜县|
济阳县|
汽车|
湛江市|
庄河市|
乳源|
永顺县|
兰坪|
睢宁县|
惠来县|
报价|
明光市|
独山县|
房产|
扎鲁特旗|
涪陵区|
大化|
韩城市|
安塞县|
洛南县|