Gunakan baris gilir untuk mensimulasikan algoritma animasi jquery example_jquery

Contoh dalam artikel ini menerangkan algoritma animasi menggunakan baris gilir untuk mensimulasikan jquery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Aaron baru-baru ini jatuh cinta dengan penyelidikan algoritma, yang mungkin memerlukan banyak sel otak. Saya suka mengambil sel-sel yang sudah siap untuk menjimatkan sedikit usaha. Saya menjumpai sekeping kod sumber yang ditulisnya dan ia agak menyeronokkan untuk menjalankannya, jadi saya menggunakannya untuk menganalisisnya, pertama untuk menyerap nutrien di dalam, dan kedua untuk mendalami kemahiran saya dalam pembelajaran kod sumber. Dikatakan bahawa kod sumber ini benar-benar rahsia untuk meningkatkan kekuatan dalaman js Jika anda tidak percaya, datang dan rasainya dengan saya.

Salin kod Kod adalah seperti berikut:

//Laksanakan fungsi dengan segera, tiada apa-apa untuk dikatakan. Tonton demo di bawah
/**
(fungsi($){
// $ di sini akan disediakan oleh nilai pulangan fungsi pelaksanaan segera yang berikut
})(fungsi(){
//Hasil menjalankan fungsi ini ialah $
Kembalikan aQuery
}())

*/
(fungsi($) {
​ tingkap.$ = $;
})(fungsi() {

//Digunakan untuk memadankan rentetan ID
//(?: Menunjukkan tiada pengumpulan di sini), rujuk kandungan biasa
//Tetapi secara peribadi saya fikir adalah lebih baik untuk menukar * kepada tanda, kerana mesti ada sekurang-kurangnya satu aksara selepas #
var rquickExpr = /^(?:#([w-]*))$/;
//Pada pandangan pertama, dia adalah pesakit jquery yang teruk
Fungsi aQuery(pemilih) {
           kembalikan aQuery.fn.init(pemilih);
baharu }

/**
* Animasi
* @return {[type]} [penerangan]
'*/
animasi var = function() {

var self = {};
        var Queue = []; //Animation Queue
        var firing = palsu //Kunci animasi
        var first = true; //Dicetuskan melalui antara muka tambah

var getStyle = function(obj, attr) {
                  kembalikan obj.currentStyle ? }
//Ini semua adalah kesan animasi khusus, tiada apa yang sukar difahami
        var makeAnim = fungsi(elemen, pilihan, fungsi) {
            lebar var = pilihan.lebar
Setelah dilaksanakan ke '' '' '                              //css3
                         //setTimeout
                element.style.webkitTransitionDuration = '2000ms';
                 element.style.webkitTransform = 'translate3d(' width 'px,0,0)';

//Animasi pemantauan selesai

               element.addEventListener('webkitTransitionEnd', function() {

                  func()
            });
}

var _fire = function() {
//Animasi yang ditambahkan sedang dicetuskan
                 jika (!menembak) {
            var onceRun = Queue.shift();
                      jika (sekaliLari) {
//Elakkan pencetus berulang
                    tembakan = benar;
                             //seterusnya
                     sekaliJalankan(fungsi() {
api = palsu;
//Kesan panggilan bersiri dihasilkan dengan sangat bijak di sini
                        _fire();
                     });
                    } lain {
                    tembakan = benar;
                }
            }
}

kembalikan diri = {
​​​​​​ //Tambah baris gilir
               tambah: fungsi(elemen, pilihan) {
//Berikut ialah kunci kepada keseluruhan algoritma
//Setara dengan menambah fungsi pada tatasusunan
//[function(func){},...]
                      // Itulah kaedah onceRun dalam _fire, func telah dihantar pada masa itu.
                         // Aaron suka menggunakan teknik ini dalam pengaturcaraannya, seperti pra-penyusunan dan sebagainya.
Queue.push(function(func) {
                        makeAnim(elemen, pilihan, fungsi);
                });

//Jika terdapat baris gilir, cetuskan animasi dengan segera
Jika (pertama && Baris gilir.panjang) {
//Suis ini memainkan peranan yang sangat baik dalam mengawal baris gilir elemen yang ditambahkan kemudian
                        1 = palsu;
//Ini bersamaan dengan menjalankan _fire();
secara langsung // Aaron suka pasang A, sengaja tambah self.fire, mungkin dia rabun jauh
                         self.fire();
                }
            },
//Pencetus
Api: function() {
                   _fire();
            }
}
}();

aQuery.fn = aQuery.prototype = {
         jalankan: fungsi(pilihan) {
animation.add(elemen.ini, pilihan);
              kembalikan ini;
}
}

var init = aQuery.fn.init = fungsi(pemilih) {
        var match = rquickExpr.exec(selector);
         elemen var = document.getElementById(padanan[1])
This.element = elemen;
         kembalikan ini;
}
//Saya hampir memandang rendah baris kod ini
//Saya belajar cara menggunakan jquery dengan baik
//Bukankah lebih baik untuk terus aQuery.fn.init = aQuery.fn?
//Satu lagi pembolehubah init hanyalah untuk mengurangkan pertanyaan, idea pengoptimuman ada di mana-mana.
init.prototype = aQuery.fn;
Kembalikan aQuery;
}());

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

//Panggil
oDiv.onclick = function() {

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

Lampirkan html dan anda boleh melaraskannya sendiri. Ingat untuk menggunakan chrome untuk menyemak imbas.

Salin kod Kod adalah seperti berikut:

Klik

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.