Use a queue to simulate jquery's animation algorithm instance, queue jquery

Use a queue to simulate jquery's animation algorithm instance, queue jquery

This article describes how to use a queue to simulate jquery's animation algorithm. Share it with you for your reference. The specific analysis is as follows:

Aaron recently fell in love with algorithm research. It is estimated that many brain cells will be killed and killed again. I like to pick up the ready-made ones and save some effort. I found a piece of source code he wrote. It was quite interesting to run it. So I analyzed it to absorb the nutrition in it, and to deepen the learning capability of source code. The source code is really a secret to improve the internal strength of js. If you don't believe it, come and have a taste with me.

Copy codeThe Code is as follows: // execute the function immediately. See the following demo
/**
(Function ($ ){
// $ Here is provided by the return values of the immediately executed function followed
}) (Function (){
// The result of running this function is $.
Return aQuery
}())

*/
(Function ($ ){
Window. $ =$;
}) (Function (){

// Used to match the ID string
//(? : Indicates that the group is not used here.) refer to the regular expression content.
// But I personally think it would be better to change * to +, because # requires at least one character.
Var rquickExpr =/^ (? : # ([\ W-] *) $ /;
// Jquery's severe patient
Function aQuery (selector ){
Return new aQuery. fn. init (selector );
}

/**
* Animation
* @ Return {[type]} [description]
*/
Var animation = function (){

Var self = {};
Var Queue = []; // animation Queue
Var fireing = false // animation lock
Var first = true; // triggered through the add Interface

Var getStyle = function (obj, attr ){
Return obj. currentStyle? Obj. currentStyle [attr]: getComputedStyle (obj, false) [attr];
}
// There are specific animation effects, which are not difficult to understand.
Var makeAnim = function (element, options, func ){
Var width = options. width
// Encapsulate the specific execution Algorithm
// Css3
// SetTimeout
Element. style. webkitTransitionDuration = '2000ms ';
Element. style. webkitTransform = 'translate3d ('+ width + 'px, 0, 0 )';

// Listen to the animation
Element. addEventListener ('webkittransitionend', function (){
Func ()
});
}

Var _ fire = function (){
// Adding an animation is being triggered
If (! Fireing ){
Var onceRun = Queue. shift ();
If (onceRun ){
// Prevent repeated triggering
Fireing = true;
// Next
OnceRun (function (){
Fireing = false;
// This cleverly produces the effect of sequential calls.
_ Fire ();
});
} Else {
Fireing = true;
}
}
}

Return self = {
// Add a queue
Add: function (element, options ){
// The Key to the entire Algorithm
// Add a function to the array
// [Function (func) {},...]
// That is, the onceRun method in _ fire. func was passed in at that time.
// You like this technique in Aaron's programming, such as pre-compilation.
Queue. push (function (func ){
MakeAnim (element, options, func );
});

// If a queue triggers an animation immediately
If (first & Queue. length ){
// This switch plays a good role in controlling the elements added after the switch for queuing.
First = false;
// This is equivalent to running _ fire () directly ();
// Aaron prefers to install A and intentionally adds A self. fire. Maybe he is thinking deeply.
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.exe c (selector );
Var element = document. getElementById (match [1])
This. element = element;
Return this;
}
// Almost ignored this line of code
// Jquery looks good
// Isn't the direct aQuery. fn. init = aQuery. fn better?
// One More init variable is nothing more than reducing 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': '123'
}). Run ({
'Width': '123'
}). Run ({
'Width': '123'
});
};

Attach html and you can adjust it yourself. Remember to use chrome for browsing.
Copy codeThe Code is as follows: <div id = "div1" style = "width: 100px; height: 50px; background: red; cursor: pointer; color: # fff; text-align: center; line-height: 50px; "data-mce-style =" width: 100px; height: 50px; background: red; cursor: pointer; color: # fff; text-align: center; line-height: 50px; "> click </div>

I hope this article will help you with jQuery programming.