本文实例讲述了用队列模拟jquery的动画算法。分享给大家供大家参考。具体分析如下：
Aaron最近疯狂的爱上了算法研究，估计又要死伤不少脑细胞了，我喜欢捡现成的，可以省些力气。发现他写的一段源码，运行一下，还蛮好玩的，于是拿来分析一下，一来吸收下里边的营养，二来加深一下源码学习的功力。话说这源码还真是提高js内功的一大秘决，不信，就和我一起来品味一下吧。
*/ (function($) { window.$ = $; })(function() {
//用来匹配ID字符串 //(?:表示这里不分组) ，参考正则的内容 //不过我个人认为把*改成+号会更好，因为#后至少要一个字符吧 var rquickExpr = /^(?:#([\w-]*))$/; //一看便是jquery的重度患者 function aQuery(selector) { return new aQuery.fn.init(selector); }
/** * 动画 * @return {[type]} [description] */ var animation = function() {
var self = {}; var Queue = []; //动画队列 var fireing = false //动画锁 var first = true; //通过add接口触发
var getStyle = function(obj,attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; } //这里边都是具体的动画效果，没有什么难懂的 var makeAnim = function(element,options,func) { var width = options.width //包装了具体的执行算法 //css3 //setTimeout element.style.webkitTransitionDuration = '2000ms'; element.style.webkitTransform = 'translate3d(' + width + 'px,0)';
//监听动画完结 element.addEventListener('webkitTransitionEnd',function() { func() }); }
var _fire = function() { //加入动画正在触发 if (!fireing) { var onceRun = Queue.shift(); if (onceRun) { //防止重复触发 fireing = true; //next onceRun(function() { fireing = false; //这里很巧妙的产生了连环调用的效果 _fire(); }); } else { fireing = true; } } }
return self = { //增加队列 add: function(element,options) { //这里是整个算法的关键 //相当于往数组中添加一个函数 //[function(func){},...] //也就是_fire中的onceRun方法，func也就是在那时传进去的。 //在Aaron的编程中很喜欢用这种技巧，比如预编译什么的。 Queue.push(function(func) { makeAnim(element,func); });
//如果有一个队列立刻触发动画 if (first && Queue.length) { //这个开关很好的起到了控制后面添加的元素进行排队的作用 first = false; //这里等价于直接运行_fire(); //Aaron喜欢装A，故意添加一个self.fire出来，或许他是深谋远虑 self.fire(); } }, //触发 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; } //差点小看了这一行代码 //jquery的样子学的不错 //直接aQuery.fn.init = aQuery.fn不是更好? //多一个init变量无非是想减少查询罢了，优化的思想无处不在。 init.prototype = aQuery.fn; return aQuery; }());
//dom var oDiv = document.getElementById('div1');
//调用
oDiv.onclick = function() {
$('#div1').run({ 'width': '500' }).run({ 'width': '300' }).run({ 'width': '1000' }); };
附上html就可以自己调式了。要记得用chrome浏览哦。
希望本文所述对大家的jQuery程序设计有所帮助。
原文链接：https://www.f2er.com/jquery/56200.html