How does the XX implementation of jquery work? --3.data and cache mechanism

Past Period Review:

How does the XX implementation of jquery work? --1. Framework

How does the XX implementation of jquery work? --2.show and chained calls

--------------------------

SOURCE Link: enclosing instance code

jquery has been used for a long time, but there are some API implementations that don't make sense. So take time to see the jquery source code, and now the learning process found some of the eggs introduced to everyone (⊙0⊙).

The following will be introduced using simplified code, focusing on the implementation of jquery ~>_<~

Compared to the first (no correlation with the second article), the code is updated: 27~71

1(function(window, undefined) {2 3     functionJQuery (SEL) {4         return NewjQuery.prototype.init (SEL);5     }6     7Jquery.prototype = {8 Constructor:jquery,9Init:function(SEL) {Ten             if(typeofsel = = = ' String '){ One                 varthat = This; A                 varNodeList =Document.queryselectorall (SEL); -Array.prototype.forEach.call (NodeList,function(Val, i) { -That[i] =Val; the                 }) -                  This. selector =sel; -                  This. length =nodelist.length; -             } +         } -     } +      AJQuery.prototype.init.prototype =Jquery.prototype; at      -window.$ =JQuery; -      -      -     functionData () { -          This. UID = 1; in         //it turned out to be a tamper-proof object (Simplified) -          This. cache = {}; to          This. expando = ' jQuery ' +math.random (); +     } -      theData.prototype = { *         //gets the UID value of the Elem $Keyfunction(elem) {Panax Notoginseng              -             varUID = elem[ This. expando]; the             if(!uid) { +                 //assigning a uid to a elem AUID = This. uid++; theelem[ This. expando] =uid; +             } -              $             if(! This. Cache[uid]) { $                  This. cache[uid] = {}; -             } -              the             returnuid; -         },WuyiSetfunction(Elem, name, Val) { the             varCache = This. cache[ This. Key (Elem)]; -Cache[name] =Val; Wu         }, -Getfunction(Elem, name) { About             varCache = This. cache[ This. Key (Elem)]; $             returnCache[name]; -         } -     } -      A     varData_user =NewData (); +      theJQuery.prototype.data =function(Name, Val) { -         if(val) { $Array.prototype.forEach.call ( This,function(elem) { the Data_user.set (Elem, Name, Val); the             }) the             return  This; the         } -         Else returnData_user.get ( This[0], name); in     } the      the      About}) (window);

--------------------------

The role of the cache in jquery : Assigning a storage space to the DOM. In short, just to save data (⊙0⊙), such as:

1.data API 2. Event queue

Here's a combination of pictures and code to show how the cache and Dom are connected.

As you can see in the diagram, there is a key-value pair of {JQueryXXX:cache.uid} under Elem. Through Elem[data.expando] can get to this elem under Data of Cache.uid. With the Cache.uid, we can fetch the data from Elem in Data.cache.

A bit around, we use pseudo-code to tidy up:

var uid = Elem[data.expando]; var data = Data.cache[uid];

The last data obtained is the elem saved in Data.cache ╰ (￣▽￣) ╮

--------------------------

Well, with the above ideas, we are now using the JS code implementation.

First introduced Data.prototype under the three methods, with these three methods, the subsequent operation will be very simple ╰ (￣▽￣) ╮

Data.prototype.key(Gets the UID of the Elem):

1. Obtain the UID "38 line" in the Elem in Data.cache;

2. Create a new space "39~47 line" for the new Elem in Data.cache and return the UID;

 $Keyfunction(elem) {Panax Notoginseng              -     varUID = elem[ This. expando]; the     if(!uid) { +         //assigning a uid to a elem AUID = This. uid++; theelem[ This. expando] =uid; +     } -      $     if(! This. Cache[uid]) { $          This. cache[uid] = {}; -     } -      the     returnuid; -}

Data.prototype.set(save data):

Wuyi function (Elem, name, Val) {     var this. cache[.key (Elem)];  -     Cache[name] = val;  Si}

Data.prototype.get(read data):

 - function (Elem, name) {     var this. cache[.key (Elem)];  $     return Cache[name];  + +}

After three functions have been implemented, the operation for the cache is very simple. Save the data call set, read the data and call get.

--------------------------

Next, use the cache mechanism to implement the data API.

// Save Data $ (' #div '). (' Key1 ', 123); // Read $ (' #div ') data (' Key1 ').

Implementation is also very simple, so directly on the code, you sir yourself to ponder the ~>_<~+

The 66th line of code is to save the data, and the 70th line is to read the data.

 A varData_user =NewData (); +      theJQuery.prototype.data =function(Name, Val) { -     if(val) { $Array.prototype.forEach.call ( This,function(elem) { the Data_user.set (Elem, Name, Val); the         }) the         return  This; the     } -     Else returnData_user.get ( This[0], name); in}

Finally, run as code:

$ (' #div '). Data ("num", 123), $ (' #div '). Data ("Objval", {val:123}), Console.log ($ (' #div '). Data ("num ")); Console.log ($ (' #div '). Data (" Objval "));

Get results:

--------------------------

Finally, a few words: the implementation of the data API here is very primitive ~>_<~+. In practice:

1.jQuery will format the name of the data (for example, data-*);

2. Can also identify data on the DOM (e.g. <div data-haha= "123" ></div>);

When the 3.elem is removed, the data on the corresponding cache will be deleted;

How does the XX implementation of jquery work? --3.data and cache mechanism