Use queue to simulate jquery animation algorithm example_jquery

The example in this article describes the animation algorithm of using queue to simulate jquery. Share it with everyone for your reference. The specific analysis is as follows:

Aaron has recently fallen madly in love with algorithm research, which is probably going to cost a lot of brain cells. I like to pick up ready-made ones to save some effort. I found a piece of source code he wrote and it was quite fun to run it, so I used it to analyze it, firstly to absorb the nutrients inside, and secondly to deepen my skills in source code learning. It is said that this source code is really a secret to improving the internal strength of js. If you don’t believe it, come and taste it with me.

Copy code The code is as follows:

//Execute the function immediately, there is nothing to say. Watch the demo below
/**
(function($){
//The $ here will be provided by the return value of the immediate execution function that follows
})(function(){
//The result of running this function is $
Return aQuery
}())

*/
(function($) {
​ window.$ = $;
})(function() {

//Used to match ID string
//(?: Indicates no grouping here), refer to the regular content
//But I personally think it would be better to change * to a sign, because there must be at least one character after #
var rquickExpr = /^(?:#([w-]*))$/;
//At first glance, he is a severe patient of jquery
Function aQuery(selector) {
           return new aQuery.fn.init(selector);
}

/**
* Animation
* @return {[type]} [description]
​​*/
var animation = function() {

var self = {};
        var Queue = []; //Animation Queue
        var firing = false //Animation lock
        var first = true; //Triggered through add interface

var getStyle = function(obj, attr) {
                  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//These are all specific animation effects, there is nothing difficult to understand
        var makeAnim = function(element, options, func) {
            var width = options.width
// Packaged a specific execution algorithm
                            //css3
                          //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

//Monitoring animation completed
               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
}

var _fire = function() {
//The added animation is being triggered
                if (!fireing) {
            var onceRun = Queue.shift();
                     if (onceRun) {
//Prevent repeated triggering
                    firing = true;
                            //next
                     onceRun(function() {
fire = false;
//The effect of serial calls is very cleverly produced here
                        _fire();
                     });
                     } else {
                    firing = true;
                }
            }
}

return self = {
//Add queue
               add: function(element, options) {
//Here is the key to the entire algorithm
//Equivalent to adding a function to the array
//[function(func){},...]
                              // That is the onceRun method in _fire, and func was passed in at that time.
                               // Aaron likes to use this technique in his programming, such as pre-compilation and so on.
Queue.push(function(func) {
                         makeAnim(element, options, func);
                });

//If there is a queue, trigger the animation immediately
If (first && Queue.length) {
//This switch plays a very good role in controlling the queuing of elements added later
                      1st = false;
//This is equivalent to running _fire();
directly // Aaron likes to install A, deliberately add a self.fire, maybe he is far -sighted
                        self.fire();
                }
            },
//Trigger
Fire: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         run: function(options) {
animation.add(this.element, options);
              return this;
}
}

var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
         var element = document.getElementById(match[1])
This.element = element;
         return this;
}
//I almost underestimated this line of code
//I learned how to use jquery well
//Isn’t it better to directly aQuery.fn.init = aQuery.fn?
//One more init variable is just to reduce queries, the idea of ​​optimization is everywhere.
init.prototype = aQuery.fn;
Return aQuery;
}());

//dom
var oDiv = document.getElementById('div1');

//Call
oDiv.onclick = function() {

$('#div1').run({
         'width': '500'
}).run({
        'width': '300'
}).run({
        'width': '1000'
});
};

Attach the html and you can adjust it yourself. Remember to use chrome to browse.

Copy code The code is as follows:

Click

I hope this article will be helpful to everyone’s jQuery programming.