Rumah  >  Artikel  >  hujung hadapan web  >  Analisis kaedah addClass() kod sumber jQuery interpretation_jquery

Analisis kaedah addClass() kod sumber jQuery interpretation_jquery

WBOY
WBOYasal
2016-05-16 16:13:281452semak imbas

Artikel ini menganalisis kaedah addClass() tafsiran kod sumber jQuery dengan lebih terperinci. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Melanjutkan fungsi addClass ke objek prototaip jQuery, jQuery.fn ialah jQuery.prototype

Salin kod Kod adalah seperti berikut:
jQuery.fn.extend({
/*
Ia boleh dilihat bahawa ini adalah kaedah pemalam dengan fungsi bernama addClass.
*/
AddClass: function( value ) {
         kelas var, elem, cur, clazz, j, finalValue,
             i = 0,
/*
Ini mewakili objek jQuery yang dipilih oleh pemilih untuk ditambahkan sebagai kelas, dan len ialah panjang tatasusunan objek jQuery.
*/
            len = ini.panjang,
//Apabila satu operan bukan nilai Boolean, operasi && tidak semestinya mengembalikan nilai Boolean Pada masa ini, ia mengikut peraturan berikut:
//1. Jika operan pertama bukan jenis Boolean, kembalikan operan kedua;
//2. Jika operan kedua bukan jenis Boolean, objek akan dikembalikan hanya jika hasil penilaian operan pertama adalah benar; //3. Jika kedua-dua operan bukan jenis Boolean, kembalikan operan kedua; //4. Jika salah satu operan adalah nol, kembalikan
//5. Jika salah satu operan ialah NaN, kembalikan NaN;
//6. Jika salah satu operan tidak ditentukan, kembalikan tidak ditentukan.
//Kes 1: Jika nilai adalah null, yang mematuhi peraturan 4, kembalikan null, iaitu, nilai proceed adalah null; //Kes 2: Jika nilai tidak ditentukan, yang mematuhi peraturan 6, tidak ditentukan dikembalikan, iaitu, nilai proses tidak ditentukan; //Kes 3: Jika nilai ialah NaN, yang mematuhi peraturan 5, kembalikan NaN, iaitu, nilai meneruskan ialah NaN; //Kes 4: Jika nilai ialah jenis angka, kembalikan palsu;
//Kes 5: Jika nilai ialah jenis Boolean, kembalikan false;
//Kes 7: Jika nilai ialah Array, Objek, Jenis fungsi, ia mematuhi peraturan 2, tetapi jenis nilai === 'rentetan' adalah palsu, jadi objek dikembalikan dan palsu dikembalikan.
//Kes 8: Jika nilai ialah jenis rentetan dan memenuhi peraturan 2, kembalikan nilai.
//Oleh itu, ayat ini hanya boleh menentukan sama ada nilai adalah jenis rentetan dan mengembalikan nilai rentetan untuk meneruskan. Mana-mana jenis lain akhirnya mengembalikan palsu, atau merupakan jenis yang boleh ditukar secara tersirat kepada palsu.
              teruskan = jenis nilai === "rentetan" && nilai;
//Oleh kerana perkara di atas hanya boleh menentukan sama ada ia adalah jenis rentetan, ayat berikut adalah untuk menentukan sama ada nilai itu adalah jenis Fungsi. Fungsi global isFunction of jQuery digunakan untuk menilai, iaitu $.isFunction().
            jika ( jQuery.isFunction( nilai ) ) {
//Jika nilai ialah jenis Fungsi, pergi ke sini.
//Kembalikan objek jQuery untuk panggilan berantai.
//Ini di sini ialah objek jQuery yang dipilih oleh pemilih anda.
               kembalikan ini.setiap(fungsi( j ) {
//Mulakan lelaran. Ini di sini bukan objek jQuery, tetapi objek DOM lelaran semasa, jadi ia dibalut dengan jQuery(ini) dan menjadi objek jQuery, supaya anda boleh menggunakan kaedah jQuery. j mewakili indeks setiap lintasan. Lulus fungsi nilai yang mengembalikan nilai untuk menetapkan nama kelas. Fungsi nilai memanggil DOM semasa sebagai objek pelaksanaannya setiap kali, dan lulus dalam nilai indeks DOM semasa dan nama kelas Nilai yang dikembalikan oleh fungsi nilai dipanggil semula oleh jQuery(this).addClass (nilai pulangan). () kaedah dipanggil semula. Jika rentetan dikembalikan, satu lagi jika cawangan dilaksanakan. Jika fungsi yang dikembalikan masih merupakan fungsi, teruskan memanggil fungsi yang dikembalikan.
jQuery( this ).addClass( value.call( this, j, this.className ) );
            });
}
//Proses yang diperoleh sebelum ini ialah rentetan Di sini kita tentukan sama ada rentetan kosong tidak ditukar kepada benar. Rentetan kosong secara tersirat ditukar kepada palsu, jadi blok pernyataan if tidak lagi akan dilaksanakan Program ini akan melompat ke pulangan terakhir ini, dan objek jQuery akan dikembalikan dan pelaksanaan akan selesai.
           jika ( teruskan ) {
// teruskan rentetan bukan kosong dan mula melaksanakan blok pernyataan if. Andaikan nilai ialah "tunjukkan bd1".
//rnotwhite ialah ungkapan biasa (/S /g), yang bermaksud memadankan aksara bukan ruang putih secara global satu kali atau lebih.
//(value || "") mengembalikan "show bd1", yang sangat mudah.
//"tunjukkan bd1".match((/S /g)) ||. [] mengembalikan ["show", "bd1"].
kelas = ( nilai || "" ).match( rnotwhite ) || //Sekarang kelas ialah ['show', 'bd1'] tatasusunan di mana anda ingin menambah nama kelas.
//Mula melintasi bawah dan tambah kelas untuk setiap objek DOM.
                untuk ( ; i < len; i ) {
//ini ialah objek jQuery, elem ialah objek DOM semasa.
                 elem = ini[i];
/*
Operator === mempunyai keutamaan yang lebih tinggi daripada operator && Ia mula-mula menentukan sama ada jenis nod DOM ialah nod elemen.
rclass ialah ungkapan biasa/[trnf]/g;
Operator ternary dalam kurungan menunjukkan sama ada nod DOM semasa sudah mempunyai kelas Jika ya, aksara tab, aksara suapan baris, aksara pulangan pengangkutan, dsb. yang mungkin wujud dalam kelas akan digantikan dengan rentetan dengan ruang " ". , dan tambah ruang sebelum dan selepas kelas semasa; jika nod DOM semasa tidak mempunyai kelas, rentetan dengan ruang " " juga diberikan. Akhirnya ia menjadi
cur = elem.nodeType === 1 && "show bd1", ini sangat biasa, ya, ia dinilai mengikut 6 peraturan pertama.
Andaikan bahawa jenis nod elem ialah 1, kemudian cur = benar && " ", dan akhirnya cur = "tunjukkan bd1".
Jika jenis nod elem bukan 1, maka cur = false && " ", dan akhirnya cur = false.
*/
Cur = elem.nodeType === 1 && ( elem.className ?
                     ( " " elem.className " " ).ganti( rclass, " " ):" ");
//Now cur = "show bd1", masukkan blok pernyataan if untuk pelaksanaan.
Jika ( cur ) {
                       j = 0;
/*
kelas ialah ["show bd1"]
Gelung untuk menyemak sama ada kelas yang akan ditambah sudah wujud dalam kelas yang elemen DOM semasa sudah ada.
Jika tidak, tambah kelas ini.
*/
Manakala ((Clazz = Kelas [J]) {
Jika ( cur.indexOf( " " clazz " " ) < 0 ) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                      cur = clazz " ";
                                                                                                                                                                           }
/*
Akhir sekali, gunakan $.trim() untuk mengalih keluar aksara ruang di kedua-dua hujung kelas "show bd1".
Semak sama ada kelas elemen DOM semasa adalah sama dengan kelas yang disambung. Elakkan pertindihan yang tidak perlu bagi pemaparan kelas yang sama.
*/
                           finalValue = jQuery.trim( cur );
Jika ( elem.className !== finalValue ) {
                                                                                                                                                                                                                                                                                                                        kepada                  }
                }
            }
}
//Kembalikan objek jQuery ini untuk panggilan berantai masa hadapan.

kembalikan ini; }

});

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn