jQuery에서 데이터 방법의 실현 원리

선언: jQuery는 전방에서 가장 많이 사용되고 가장 광범위한 JS 라이브러리로서 그 원본 코드는 모든 JSer가 연구해야 한다.일찌감치 보려고 했지만 여러 가지 일에 끌려 왔다. 지난번 한 회사 면접에서 jQuery에서 데이터 방법이 어떻게 이루어졌는지 물었지만 답이 나오지 않아 후회했다.이제 드디어 jQuery의 원본을 보기로 결심했습니다. 데이터 방법부터 시작합니다.본인도 전단 초심자입니다. 만약에 글에서 이해가 부적절하거나 잘못된 점이 있다면 3Q~jQuery 버전은 1.8.2입니다.
 
데이터 () 사용 방법

//     dom       
$("#header").data("aaa", 123); //   header         key "aaa"，value 123

$("#header").data({"name": "xiaoming", "age": 20}); //                         

//        
$("#header").data("aaa"); //    header      key  "aaa"  ，      cache   (          )   ，       html 5    data-*，      cache   

$("#header").data(); //    header         

//        
$("#header").removeData("name"); //    header      key   name    

$("#header").removeData(); //    header         

 
원본 코드에서 데이터 () 방법과 관련된 코드

jQuery.extend({
　   //     ，        dom        
    cache: {},

    //     ，          cleanData       ，    id       
    deletedIds: [],

    //           (1.9/2.0)      
    uuid: 0,

    //   jQuery           ，      jQuery   （             jQuery）     ，  :  jQuery164018232414545491338，  +   +   
    expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

    //               ，       
    noData: {
        "embed": true,
        //    flash     object   
        "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
        "applet": true
    },

    //                
    hasData: function( elem ) {   },

    //      ( pvt   false  ，       cache       id   data    ，pvt   true              cache       id  ，  data     。jQuery        events、handle       _data     pvt     true )
    data: function( elem, name, data, pvt /*         */ ) {   },

    //     
    removeData: function( elem, name, pvt /*         */ ) {   },

    //       ，      
    _data: function( elem, name, data ) {   },

    //      dom           
    acceptData: function( elem ) {    },

    //                jQuery       
    cleanData: function( elems, /* internal */ acceptData ) {    }
});

jQuery.fn.extend({
    //                
    data: function( key, value ) {    },

    //                
    removeData: function( key ) {    }
});

//       html5    data-*   。    cache                      data-*   ，     data-*            cache      。
function dataAttr( elem, key, data ) {    }

//   cache             ，             data   ，        
function isEmptyDataObject( obj ) {    }

 
jQuery.extend 및 jQuery.fn.extend의 차이점은 다음과 같습니다.
jQuery.extend는 jQuery라는 구조 함수에서 확장하는 방법으로 호출할 때 $로 씁니다.xxx 또는 jQuery.xxx
jQuery.fn.extend는 jQuery 원형에서 확장하는 방법입니다. 원형의 방법은 모든 jQuery 대상에 공유되며, 호출할 때 $() 입니다.xxx
 
원소에 연결된 데이터의 저장 형식

$("#header").data("title", "hello world");

//       $.cache    
{
    1: {
        data: {
            title : "hello world"
        }
    }
}
//      header   ，          "jQuery18102873769768048078: 1"    key        jQuery       ，1   header          cache          ，       1，



$("#footer").data("foot", "goodbye");

//       $.cache    
{
    1: {
        data: {
            title : "hello world"
        }
    },
    2: {
        data: {
            foot : "goodbye"
        }
    }
}  
//    footer            "jQuery18102873769768048078: 2"        

 
원소에 연결된 이벤트 처리 프로그램도cache 대상에 저장됩니다

$("#header").click(function(){});

//        ，$.cache      
{
    1: {
        data : {
            title : "hello world"
        },
        events : {
            click : []          // click          
        },
        handle : function(){ }  // function         
    }
    2: {
        data : {
            foot : "goodbye"
        }
    }
}
//     dom            ，   events   handle     ，jQuery            cache              

 
전역 대상cache를 통해dom 요소에 연결된 데이터를 저장하면dom 대상과 js 대상 간의 상호 인용으로 인한 순환 인용 문제를 피할 수 있습니다.
 
데이터 () 방법 관련 이벤트
데이터 () 방법과 관련된 이벤트는 getData, setData,changeData가 있는데 사용 방법은 코드를 보십시오

$("#header").bind("getData" ,function(){
                console.log("getData");
            })
            .bind("setData" , function(){
                console.log("setData");
            })
            .bind("changeData" , function(){
                console.log("changeData");
            });
$("#header").data("name" , "Austin"); //    "setData" "changeData"
$("#header").data("name");            //  "getData"