Penjelasan terperinci tentang kaedah extend() dan fn.extend() dalam jQuery_jquery

Kedua-dua kaedah ini menggunakan kod yang sama Satu digunakan untuk menggabungkan sifat dan kaedah untuk objek jQuery atau objek biasa. Berikut adalah beberapa contoh penggunaan asas

Kod html adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

Tulis penggunaan dalam js di bawah:

Gabungkan dua objek biasa

Salin kod Kod adalah seperti berikut:

//Menggabungkan atribut untuk dua objek biasa

var obj1={name:'Tom',umur:22};
var obj2={nama:'Jack',tinggi:180};
console.log($.extend(obj1,obj2)); //Objek {nama: "Jack", umur: 22, tinggi: 180}

Tambah sifat atau kaedah pada objek jQuery

Salin kod Kod adalah seperti berikut:

$.extend({hehe:function(){alert('hehe');}});

$.hehe(); //alert('hehe')

Penggunaan ini adalah kaedah pelaksanaan untuk menambah sifat dan kaedah prototaip serta kaedah dalam jQuery kaedah dalam jQuery 1.7.1 untuk melanjutkan kaedah dan sifatnya sendiri

Salin kod Kod adalah seperti berikut:

jQuery.extend({

tiadaConflict: function( deep ) {
            if ( window.$ === jQuery ) {
               tetingkap.$ = _$;
}
Jika ( deep && window.jQuery === jQuery ) {
               window.jQuery = _jQuery;
}
         kembalikan jQuery;
},
// Adakah DOM sedia untuk digunakan? isReady: palsu,
// Kaunter untuk menjejaki berapa banyak item yang perlu menunggu sebelum
// acara sedia menyala. Lihat #6781
sediaTunggu: 1,
.....



Dalam contoh ini, hanya satu parameter objek diluluskan, jadi secara lalai, ini dianggap sebagai objek yang akan digabungkan dan diubah suai

Tambah sifat atau kaedah pada contoh objek jQuery

Salin kod Kod adalah seperti berikut: //Penggabungan lanjutan untuk contoh jQuery

console.log($('img').extend({'title':'img'}));//[img, img#img.img, prevObject: jQuery.fn.jQuery.init[1], context : dokumen, pemilih: "img", tajuk: "img", pembina: fungsi…]

Cantum sahaja dan jangan ubah suai objek yang hendak digabungkan

Salin kod Kod adalah seperti berikut: var obj1={name:'Tom',umur:22};

var obj2={nama:'Jack',tinggi:180};

console.log($.extend(obj1,obj2)); //Objek {nama: "Jack", umur: 22, tinggi: 180}
console.log(obj1); //Objek {nama: "Jack", umur: 22, tinggi: 180}

Secara lalai, objek yang hendak digabungkan diubah suai seperti hasil yang dikembalikan Jika anda hanya mahu mendapatkan objek yang digabungkan tetapi tidak mahu memusnahkan mana-mana objek asal, anda boleh menggunakan kaedah ini

Salin kod Kod adalah seperti berikut:

var obj1={name:'Tom',umur:22};
var obj2={nama:'Jack',tinggi:180};
var kosong={};
console.log($.extend(kosong,obj1,obj2)); //Objek {nama: "Jack", umur: 22, tinggi: 180}
console.log(obj1); //Objek {nama: "Tom", umur: 22}

Jika digunakan, cantuman rekursif atau salinan dalam

Salin kod Kod adalah seperti berikut:

var obj1={nama:'Tom',cinta:{minum:'susu',makan:'roti'}};
var obj2={nama:'Jack',cinta:{minuman:'air',sukan:'bola sepak'}};
console.log(($.extend(false,obj1,obj2)).love); //Objek {minuman: "air", sukan: "bola sepak"}
console.log(($.extend(true,obj1,obj2)).love); //Objek {minum: "air", makan: "roti", sukan: "bola sepak"}

Untuk penggunaan terperinci, sila lihat manual rujukan http://www.w3cschool.cc/manual/jquery/

Mari kita analisa cara ia dilaksanakan dalam kod sumber 1.7.1:

Salin kod Kod adalah seperti berikut:

jQuery.extend = jQuery.fn.extend = function() {
pilihan var, nama, src, salinan, copyIsArray, klon,
sasaran = argumen[0] || {},
i = 1,
panjang = arguments.length,
dalam = palsu;
...
}

Pertama, satu set pembolehubah ditakrifkan Memandangkan bilangan parameter tidak pasti, objek argumen dipanggil terus untuk mengakses parameter yang diluluskan

.

Pilihan boleh ubah: menunjuk ke objek sumber.
Nama pembolehubah: mewakili nama atribut objek sumber.
Pembolehubah src: Mewakili nilai asal atribut objek sasaran.
Salinan pembolehubah: mewakili nilai atribut objek sumber.
Variable copyIsArray: Menunjukkan sama ada salinan pembolehubah ialah tatasusunan.
Klon pembolehubah: ​​mewakili nilai pembetulan nilai asal semasa penyalinan dalam.
Sasaran berubah: menunjuk ke objek sasaran.
Pembolehubah i: mewakili indeks permulaan objek sumber.
Panjang pembolehubah: menunjukkan bilangan parameter dan digunakan untuk mengubah suai sasaran pembolehubah.
Pembolehubah dalam: menunjukkan sama ada untuk melakukan salinan dalam, lalai adalah palsu.

Untuk lebih memahami pelaksanaan kod, berikut adalah contoh yang diberikan di atas sebagai demonstrasi untuk memerhatikan pelaksanaan kod sumber

Salin kod Kod adalah seperti berikut:

var obj1={nama:'Tom',cinta:{minum:'susu',makan:'roti'}};
var obj2={nama:'Jack',cinta:{minuman:'air',sukan:'bola sepak'}};
$.extend(true,obj1,obj2)

Analisis kod sumber

Salin kod Kod adalah seperti berikut:

// Kendalikan situasi salinan yang mendalam
Jika ( jenis sasaran === "boolean") {
dalam = sasaran;
sasaran = argumen[1] || {};
// langkau boolean dan sasaran
i = 2;
}

Tentukan sama ada ia adalah salinan dalam Jika parameter pertama ialah nilai Boolean, kemudian berikan nilai parameter pertama kepada dalam, dan kemudian gunakan parameter kedua sebagai objek sasaran. tetapkan kepada satu. Objek kosong, tukar subskrip objek sumber kepada 2. Dalam contoh ini, ia dilakukan di sini kerana parameter pertama adalah benar dan kemudian dalam ditukar kepada benar, yang ialah obj1. Subskrip permulaan objek sumber ialah 2, yang bermaksud bermula dari yang ketiga sebagai objek sumber, iaitu obj2

dalam contoh ini.

Salin kod Kod adalah seperti berikut:

// Kendalikan kes apabila sasaran ialah rentetan atau sesuatu (mungkin dalam salinan dalam)
Jika ( jenis sasaran !== "objek" && !jQuery.isFunction(sasaran) ) {
Sasaran = {};
}

Sasaran diproses selanjutnya di sini Penambahan atribut tersuai adalah tidak sah untuk jenis data bukan objek dan fungsi Contohnya, rentetan boleh memanggil kaedah dan atributnya sendiri

Salin kod Kod adalah seperti berikut:

// melanjutkan jQuery sendiri jika hanya satu hujah diluluskan
Jika ( panjang === i ) {
sasaran = ini;
—i;
}

Jika atribut panjang adalah sama dengan nilai i, ini bermakna tiada objek sasaran Dalam keadaan biasa, panjang harus lebih besar daripada nilai i Kemudian gunakan ini sebagai objek sasaran pada masa ini nilai i dengan satu untuk mencapai nilai panjang lebih besar daripada nilai i (1 lebih besar daripada i)

Ini adalah prinsip pelaksanaan kaedah jQuery untuk memanjangkan atribut kepada dirinya sendiri, selagi objek sasaran tidak diluluskan dalam

Dua kemungkinan situasi: $.extend(obj) atau $.extend(false/true,obj);

Salin kod Kod adalah seperti berikut:

    untuk ( ; i < panjang; i ) {
        // Hanya berurusan dengan nilai bukan nol/tidak ditentukan
        jika ( (pilihan = hujah[ i ]) != null ) {
            // Panjangkan objek asas
            untuk ( nama dalam pilihan ) {
                src = sasaran[ nama ];
                copy = pilihan[ nama ];
                // Cegah gelung tidak berkesudahan
                jika ( sasaran === salin ) {
                    teruskan;
                }
                // Ulang jika kita menggabungkan objek atau tatasusunan biasa
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    jika ( copyIsArray ) {
                        copyIsArray = palsu;
                        klon = src && jQuery.isArray(src) ? src : [];
                    } lain {
                        klon = src && jQuery.isPlainObject(src) ? src : {};
                    }
                    // Jangan sekali-kali mengalihkan objek asal, klonkannya
                    target[ name ] = jQuery.extend( deep, clone, copy );
                // Jangan bawa masuk nilai yang tidak ditentukan
                } else if ( copy !== undefined ) {
                    sasaran[ nama ] = salinan;
                }
            }
        }
    }

这个部分就是此方法的核心了，从arguements对象的第i个下标值开始循环操作首港操作首湴行或者是undefined的情况可以看到其实

源对象不一定真的就是对像，也可以是其他类型的值比如字符串比如这：

复制代码 代码如下:

console.log($.extend({'nama':'tom'},'aa'));   //Objek {0: "a", 1: "a", nama: "tom"}

是不是感觉很奇怪啊？究竟是怎么实现的呢？下面接着看

过滤完之后开始进行for循环 src保存的是目标对象的某个键的值，copy属性保存他的是他两个键都是一样的

复制代码 代码如下:

// Cegah gelung tidak berkesudahan
Jika ( sasaran === salin ) {
                         teruskan;
                }

Jika nilai atribut tertentu bagi objek sumber ialah objek sasaran, ia boleh menyebabkan gelung tak terhingga dan menyebabkan program ranap, jadi sekatan dibuat di sini untuk membolehkannya melangkau gelung ini Sebagai contoh:

Salin kod Kod adalah seperti berikut:

var o = {};
o.n1 = o;
$.extend( true, o, { n2: o } );
// pengecualian lontaran:
// Uncaught RangeError: Saiz tindanan panggilan maksimum melebihi

Tetapi berbuat demikian juga akan menjejaskan beberapa situasi biasa secara tidak adil seperti:

Salin kod Kod adalah seperti berikut:

var obj1={a:'a'}
var obj2={a:obj1};
console.log($.extend(obj1,obj2)); //Objek {a: "a"}

Situasi ini juga memenuhi bahawa nilai objek sumber adalah sama dengan objek sasaran, tetapi ternyata nilai atribut a bagi obj1 belum diubah suai, kerana continue dilaksanakan di bawah, ulas perenggan ini dalam sumber kod sebelum melaksanakan

Salin kod Kod adalah seperti berikut:

Objek {a: Objek}

Pada masa ini, ia telah diubah suai secara normal Saya secara peribadi merasakan bahawa kawasan ini memerlukan penambahbaikan

Kemudian ada penghakiman if, iaitu untuk membezakan sama ada ia adalah salinan yang mendalam Pertama, jangan lihat salinan yang mendalam dan mula-mula lihat yang umum

Salin kod Kod adalah seperti berikut:

sasaran[ nama ] = salinan;

Ia adalah sangat mudah selagi salinan mempunyai nilai, ia disalin terus ke objek sasaran Jika objek sasaran mempunyai beberapa pengubahsuaian, ia akan ditambah.

Selepas gelung for, objek sasaran baharu dikembalikan, jadi objek sasaran akhirnya diubah suai, dan hasilnya adalah sama dengan hasil yang dikembalikan.

Salin kod Kod adalah seperti berikut:

// Kembalikan objek yang diubah suai
Sasaran balik;
};

Mari bincang tentang cara mengendalikan salinan dalam

Mula-mula pastikan yang dalam adalah benar, salin mempunyai nilai dan merupakan objek atau tatasusunan (jika ia bukan objek atau tatasusunan, penyalinan dalam adalah di luar persoalan) dan kemudian ia diproses oleh tatasusunan dan objek pada tatasusunan dahulu:

Salin kod Kod adalah seperti berikut:

jika ( copyIsArray ) {
          copyIsArray = palsu;
​ ​ klon = src && jQuery.isArray(src) src : [];

} lain {
​​​​klon = src && jQuery.isPlainObject(src) src: {};
}

Jika nilai copyIsArray tatasusunan adalah benar, kemudian masuk ke dalam dan tukar nilai kepada palsu Untuk atribut objek sumber gelung semasa, objek sasaran mungkin mempunyainya atau tidak, nilaikan sama ada ialah tatasusunan. Jika ya, ia adalah tatasusunan asal Jika tatasusunan tidak berubah, biarkan ia menjadi tatasusunan, kerana kerana atribut semasa objek sumber ialah tatasusunan, elemen sasaran terakhir juga mestilah tatasusunan. Sama ada tatasusunan atau objek Tukar sifat semasa objek sasaran kepada objek.

Salin kod Kod adalah seperti berikut:

// Jangan sekali-kali mengalihkan objek asal, klonkannya
Sasaran [ nama ] = jQuery.extend( dalam, klon, salin );

Kemudian gabungkan secara rekursif nilai atribut semasa objek sumber (iaitu tatasusunan atau objek) dan atribut semasa objek sasaran yang diubah suai dan tetapkan tatasusunan atau objek baharu yang dikembalikan kepada objek sasaran, akhirnya mencapai penyalinan dalam.

Tetapi terdapat fenomena yang agak pelik di sini, seperti ini:

Salin kod Kod adalah seperti berikut:

console.log($.extend({a:1},'aa')); //Objek {0: "a", 1: "a", a: 1}

Objek sumber asal tidak semestinya objek e, dan rentetan boleh dipisahkan dan digabungkan dengan objek sasaran Ternyata gelung for...in beroperasi pada rentetan

Salin kod Kod adalah seperti berikut:

var str='aa';
for(nama var dalam str){
console.log(nama);
console.log(str[nama])
}

Ini juga mungkin, ia akan membelah rentetan dan membacanya mengikut subskrip berangka, tetapi dalam kod sumber

Salin kod Kod adalah seperti berikut:

if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) )

terhad kepada tatasusunan dan objek, jadi adakah ia tidak akan memberi kesan semasa penyalinan dalam?

Selepas ujian saya, penyalinan dalam juga mungkin, kerana nilai yang disalin dalam kod sumber bertukar menjadi fungsi tanpa nama

makluman(jQuery.isPlainObject(copy)); //true

Mengenai mengapa ia adalah fungsi, saya belum mengetahuinya lagi dan akan membiarkannya diselesaikan kemudian!