JQuery source code analysis series (39): animation queue

The data function only has 300 lines of code in jQuery, which is not a starting point. When you analyze the source code, you will find that jQuery will call the queue as long as there is a place where data needs to be stored without relying on this infrastructure animation, the queue will call the data interface and save the animated data in the queue. So we will review the data cache and copy the code // These may be used throughout the jQuery core codebase // Save the data // The user uses data_user = new Data (); // storage object // Private within jQuery // used to store events, such as data_priv = new Data () for click events (); the data Replication code can be used to store data in jQuery. The corresponding objects are storage objects: data_user acquisition and setting methods: $. data (el, key, value) is used to store events. The animation data storage object is data_pr. Iv. How to get and set: $. _ data (el, key, value) data_user and data_priv are like their names. One is used by users and the other is private by jQuery, they are all Data instance objects. Why do we need to set these two Data interface classes? All jQuery settings maintain a jQuery data object, so they only implement data interfaces, such as: $ ('# aaron '). data ('key', 'value') implements chained. data interface. This is very simple. We can cache simple data to this object in jquery. This method can be used to expand and copy Code directly on the fn interface on the instance $. fn. data = function (k, v) {return this. each (function () {this [key] = v // Save the value of interface data on the dom object }) return this} copy the code. It is very easy to save the data directly on the dom object. Of course, this can be done for the basic type. What about the function object if it is a reference type? Can this be done? $ ('# Aaron '). data ('nodevalue', '000000') $ ('# aaron '). data ('key', function () {// operation}) has the following problem: 1: This will change the DOM attribute value. Of course, whether it will take effect is not mentioned 2: transfer is a reference type. unreliable memory recovery may have exceeded 3: data exposure, which is easy to be directly rewritten. How can we solve these problems? JQuery introduces the concept of a data object, no matter how it is implemented internally. First, the attribute image of the node has a gray custom key and value gray, which means that it cannot be enumerated through, in ES5, Apis directly support code copying. // If not, create oneif (! Unlock) {unlock = Data. uid ++; // Secure it in a non-enumerable, non-writable property try {descriptor [this. expando] = {value: unlock}; Object. defineProperties (owner, descriptor); // Support: Android <4 // Fallback to a less secure definition} catch (e) {descriptor [this. expando] = unlock; jQuery. extend (owner, descriptor);} It is clear to copy the code to see the comment. This attribute is protected and cannot be rewritten. With such a unique bridge sign, we can map an ORM, let the dom and a data cache interface generate a one-to-one relationship the data cache used by the animation queue jQuery in order to realize the chained call of the animation queue, you must first expand a method on the instance or prototype, then, the underlying method can be called internally. Of course, basically all the layers of jQuery are in this structure. In addition to the chain, you can also use the specific instance method and the prototype method in common/static jQuery. extend // instance. extend animation instance method this. queue (optall. queue, doAnimation); call the animation-based extension interface jQuery In the instance method. fn. extend ({queue dequeue delay clearQueue promise copy code queue: function (type, data) {var setter = 2; // modify type. The default value is the fx of jquery animation. If no For "fx", // is your own Custom Animation. Generally, we use "fx" to make it enough. if (typeof type! = "String") {data = type; type = "fx"; setter --;} // only the callback of the animation // div. slideToggle (1000); // div. slideToggle ("fast"); // div. animate ({left: '-= 200'}, 1500); // div. queue ('fx ') if (arguments. length <setter) {return jQuery. queue (this [0], type);} return data = undefined? This: this. each (function () {// call the basic queue // set the animation queue cache // and return the total number of queues var queue = jQuery. queue (this, type, data); // ensure a hooks for this queue jQuery. _ queueHooks (this, type); // directly executes the animation queue // prevents the dequeue operation from being performed when the function is executed, so that two functions are executed simultaneously, the queue is out of control. if (type = "fx" & queue [0]! = "Inprogress") {// If the queue is not locked, dequeue is not executed. remove the first function from the queue and execute it. jQuery. dequeue (this, type) ;}}) ;}, the replication code instance's queue interface only makes two judgments, one is to pass fx, the other is to set the queue, the underlying layer still uses jQuery. analysis of the queue Static Method Processing a set of animations: div. show (1000); div. hide (2000) div. show (3000) 1: an interface with time parameters must execute an animation. The same interface has multiple animation interfaces, this means that the queue is required to manage the execution sequence. 2. The management queue introduces the data cache. The cache requires the carrier node, therefore, the extension interface of the animation is designed to be linearly executed directly with the DOM chain logic. The show execution is complete and then the hide execution is taken out, after the show is taken out, how is the animation call organized? In theory, three animations have three cached data records in the cache. To facilitate viewing, I changed the code and added a variable indicating that Aaron corresponds to the execution div at the time. show (3000), we can view the cached image and find the div at 0. show (1000); replaced by inprogress. You can guess that the first animation is already being executed, so it will be used as a placeholder in the queue to notify the future, I am still executing this animation. The subsequent animation will wait for the inprogress process lock to work like this: if it is a dequeue operation, remove the lock, and execute the functions in the queue, lock the queue. if it is a queue operation, it depends on the lock status. If it is locked, it only performs the queue addition operation. dequeue is no longer called. in fact, both dequeue and queue can execute the first function in the queue. after the queue operation is added, the dequeue method is called to execute the function. when you use dequeue to execute a function, if If you use queue to trigger dequeue, two functions may be executed at the same time. the queue loses more than half of the meaning (the sequence can be ensured, but the two animations will be executed simultaneously ). however, this lock can only ensure that the queue is not accidentally damaged by the queue operation during dequeue. if two dequeue values are used manually at the same time, the animation effect will be damaged. therefore, we need to write fn in the callback function. We will start to execute the animation during the first push, which can improve the speed. queue (1000 ),. queue (2000), queue (3000) if (type = "fx" & queue [0]! = "Inprogress") {// If the queue is not locked, dequeue is not executed. remove the first function from the queue and execute it. jQuery. dequeue (this, type);} after the first animation is executed, a callback notification must be sent to fetch the next execution in the queue and then delete the placeholder, copy the code opt sequentially. complete = function () {if (jQuery. isFunction (opt. old) {opt. old. call (this);} if (opt. queue) {jQuery. dequeue (this, opt. queue) ;}; copy the code so we can see that the execution of the animation is actually dependent on the processing of queue and dequeue, but that a process is controlled at the execution start and end