Verwenden Sie die Warteschlange, um den JQuery-Animationsalgorithmus example_jquery zu simulieren

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

//Wird zum Abgleichen der ID-Zeichenfolge verwendet
//(?: Zeigt hier keine Gruppierung an), beziehen Sie sich auf den regulären Inhalt
//Aber ich persönlich denke, es wäre besser, * in ein Zeichen zu ändern, da nach #
mindestens ein Zeichen stehen muss var rquickExpr = /^(?:#([w-]*))$/;
//Auf den ersten Blick ist er ein schwerer Jquery-Patient
Funktion aQuery(selector) {
           return new aQuery.fn.init(selector);
}

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

var self = {};
        var Queue = []; //Animationswarteschlange
        var Firing = false //Animationssperre
        var first = true; //Ausgelöst durch Schnittstelle hinzufügen

var getStyle = function(obj, attr) {
                  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//Dies sind alles spezifische Animationseffekte, es ist nichts schwer zu verstehen
        var makeAnim = function(element, options, func) {
            var width = options.width
Implementiert zu werden, um '' '' '' '                             //css3
                          //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                  element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

               element.addEventListener('webkitTransitionEnd', function() {
                  func()
            });
}

var _fire = function() {
//Die hinzugefügte Animation wird ausgelöst
                if (!fireing) {
            var OnceRun = Queue.shift();
                     if (onceRun) {
//Wiederholtes Auslösen verhindern
                    Firing = true;
                            //nächster
                     OnceRun(function() {
fire = false;
//Der Effekt von Serienaufrufen wird hier sehr geschickt erzeugt
                        _fire();
                     });
                     } sonst {
                    Firing = true;
                }
            }
}

return self = {
//Warteschlange hinzufügen
               add: function(element, options) {
//Hier ist der Schlüssel zum gesamten Algorithmus
//Entspricht dem Hinzufügen einer Funktion zum Array
//[function(func){},...]
                              // Das ist die OnceRun-Methode in _fire, und zu diesem Zeitpunkt wurde func übergeben.
                               // Aaron verwendet diese Technik gerne in seiner Programmierung, beispielsweise bei der Vorkompilierung usw.
Queue.push(function(func) {
                         makeAnim(element, options, func);
                });

//Wenn es eine Warteschlange gibt, lösen Sie die Animation sofort aus
If (first && Queue.length) {
//Dieser Schalter spielt eine sehr gute Rolle bei der Steuerung der Warteschlange später hinzugefügter Elemente
                      1. = falsch;
//Dies entspricht der direkten Ausführung von _fire();
// Aaron installiert gerne A, fügt bewusst ein self.fire hinzu, vielleicht ist er weitsichtig
                        self.fire();
                }
            },
//Trigger
Feuer: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         run: function(options) {
animation.add(this.element, options);
              gib dies zurück;
}
}

var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
         var element = document.getElementById(match[1])
This.element = element;
         gib dies zurück;
}
//Ich habe diese Codezeile fast unterschätzt
//Ich habe gelernt, wie man JQuery gut nutzt
//Ist es nicht besser, direkt aQuery.fn.init = aQuery.fn?
// Eine weitere Init-Variable dient nur dazu, Abfragen zu reduzieren. Die Idee der Optimierung ist überall.
init.prototype = aQuery.fn;
Geben Sie eine Abfrage zurück;
}());

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

//Anruf
oDiv.onclick = function() {

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