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

Das Beispiel in diesem Artikel beschreibt den Animationsalgorithmus zur Verwendung einer Warteschlange zur Simulation von JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Aaron hat sich in letzter Zeit wahnsinnig in die Algorithmenforschung verliebt, was wahrscheinlich eine Menge Gehirnzellen kosten wird. Ich nehme gerne fertige, um etwas Mühe zu sparen. Ich habe einen Quellcode gefunden, den er geschrieben hat, und es hat ziemlich viel Spaß gemacht, ihn auszuführen. Deshalb habe ich ihn zur Analyse verwendet, erstens, um die darin enthaltenen Nährstoffe aufzunehmen, und zweitens, um meine Fähigkeiten im Erlernen des Quellcodes zu vertiefen. Es wird gesagt, dass dieser Quellcode wirklich ein Geheimnis zur Verbesserung der internen Stärke von js ist. Wenn Sie es nicht glauben, kommen Sie und probieren Sie es mit mir.

Code kopieren Der Code lautet wie folgt:

//Führen Sie die Funktion sofort aus, es gibt nichts zu sagen. Sehen Sie sich die Demo unten an
/**
(Funktion($){
//Das $ hier wird durch den Rückgabewert der folgenden Funktion zur sofortigen Ausführung bereitgestellt
})(function(){
//Das Ergebnis der Ausführung dieser Funktion ist $
Geben Sie eine Abfrage zurück
}())

*/
(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)';

//Überwachungsanimation abgeschlossen

               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'
});
};

Hängen Sie den HTML-Code an und Sie können ihn selbst anpassen. Denken Sie daran, Chrome zum Durchsuchen zu verwenden.

Code kopieren Der Code lautet wie folgt:

Click

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.