Example _ jquery

This article describes how to use a queue to simulate jquery's animation algorithm. The example analyzes the principles and implementation skills of using a queue to simulate jquery's animation algorithm, which has some reference value, for more information about how to simulate jquery using queues, see the following example. 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.

The Code is as follows:

// Execute the function immediately. There is nothing to say. 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 ('p1 ');

// Call
ODiv. onclick = function (){

$ ('# P1'). run ({
'Width': '123'
}). Run ({
'Width': '123'
}). Run ({
'Width': '123'
});
};

Attach html and you can adjust it yourself. Remember to use chrome for browsing.

The Code is as follows:

Click

I hope this article will help you with jQuery programming.