jQuery.extend fungsi dan butiran penggunaan

jQuery.extend fungsi dan butiran penggunaan_jquery

WBOY

Lepaskan： 2016-05-16 15:40:30

asal

1321 orang telah melayarinya

Penjelasan terperinci tentang fungsi jquery.extend

Kaedah lanjutan JQuery:

Kaedah lanjutan Jquery ialah kaedah yang biasa digunakan apabila kita menulis pemalam Kaedah ini mempunyai beberapa prototaip yang berlebihan Di sini, mari kita pelajari tentangnya.

1. Prototaip kaedah sambungan Jquery ialah:

extend(dest,src1,src2,src3...);

Salin selepas log masuk

Maksudnya adalah untuk menggabungkan src1, src2, src3... menjadi dest, dan nilai pulangan ialah dest yang digabungkan Dapat dilihat bahawa kaedah ini mengubah struktur dest selepas bergabung. Jika anda ingin mendapatkan hasil gabungan tetapi tidak mahu mengubah suai struktur dest, anda boleh menggunakannya seperti berikut:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数

Salin selepas log masuk

Dengan cara ini, src1, src2, src3... boleh digabungkan, dan kemudian hasil gabungan akan dikembalikan kepada newSrc. Contohnya:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

Salin selepas log masuk

Kemudian hasil gabungan

result={name:"Jerry",age:21,sex:"Boy"}

Salin selepas log masuk

Maksudnya, jika parameter kemudian mempunyai nama yang sama dengan parameter sebelumnya, maka parameter kemudian akan menimpa nilai parameter sebelumnya.

2 Abaikan parameter dest

Parameter dest dalam prototaip kaedah lanjutan yang disebutkan di atas boleh ditinggalkan Jika ia ditinggalkan, kaedah hanya boleh mempunyai satu parameter src dan src digabungkan ke dalam objek yang memanggil kaedah lanjutan, seperti:

1. $.extend(src)

Kaedah ini adalah untuk menggabungkan src ke dalam objek global jquery, seperti:

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

Salin selepas log masuk

adalah untuk menggabungkan kaedah hello ke dalam objek global jquery.

2. $.fn.extend(src)

Kaedah ini menggabungkan src ke dalam objek contoh jquery, seperti:

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

Salin selepas log masuk

adalah untuk menggabungkan kaedah hello ke dalam objek contoh jquery.

Berikut ialah beberapa contoh sambungan yang biasa digunakan:

$.extend({net:{}});

Salin selepas log masuk

Ini adalah untuk memanjangkan ruang nama bersih dalam objek global jquery.

 $.extend($.net,{
  hello:function(){alert('hello');}
 })

Salin selepas log masuk

Ini adalah untuk melanjutkan kaedah hello ke dalam ruang nama bersih Jquery yang telah dilanjutkan sebelum ini.

3. Kaedah lanjutan Jquery juga mempunyai prototaip yang berlebihan:

extend(boolean,dest,src1,src2,src3...)

Salin selepas log masuk

Boolean parameter pertama mewakili sama ada untuk melakukan salinan dalam Parameter lain adalah sama seperti yang diperkenalkan sebelum ini. Mari kita lihat contoh:

var result=$.extend( true, {}, 
  { name: "John", location: {city: "Boston",county:"USA"} }, 
  { last: "Resig", location: {state: "MA",county:"China"} } );

Salin selepas log masuk

Kita dapat melihat bahawa sub-objek lokasi:{city:"Boston"} bersarang dalam src1 dan sub-objek lokasi:{state:"MA"},The parameter salinan dalam pertama adalah benar, maka hasil gabungan ialah:

result={name:"John",last:"Resig",
    location:{city:"Boston",state:"MA",county:"China"}}

Salin selepas log masuk

Maksudnya, ia juga akan menggabungkan sub-objek bersarang dalam src, dan jika boolean parameter pertama adalah palsu, mari lihat hasil penggabungan itu, seperti berikut:

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
          );

Salin selepas log masuk

Kemudian hasil gabungan ialah:

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

Salin selepas log masuk

Di atas adalah beberapa butiran yang $.extend() sering digunakan dalam projek.

Untuk menambah: Kami juga sering menggunakan kaedah extend() untuk menulis pemalam jquery, jadi jenis pemalam jquery adalah seperti berikut:

Jenis pemalam jQuery

1. Kaedah pengekapan objek ini merangkum kaedah objek dan digunakan untuk mengendalikan objek jQuery yang diperoleh melalui pemilih. Jenis pemalam ini boleh mengambil kesempatan daripada kelebihan berkuasa pemilih jQuery Sebilangan besar kaedah jQuery "dimasukkan" ke dalam kernel dalam bentuk ini dalam perpustakaan skrip jQuery, seperti kaedah induk() dan appendTo(. ) kaedah tunggu.

2. Merangkumkan fungsi global boleh menambah fungsi bebas pada ruang nama jQuery. Sebagai contoh, kaedah jQuery.ajax() yang biasa digunakan dan kaedah jQuery.trim() yang mengalih keluar ruang hadapan dan belakang adalah semua pemalam yang dilampirkan pada kernel sebagai fungsi global dalam jQuery.

3. Pemalam Pemilih Walaupun pemilih jQuery sangat berkuasa, dalam beberapa kes, anda masih perlu menggunakan pemalam pemilih untuk mengembangkan beberapa pemilih kegemaran anda.

jQuery.fn.extend() kebanyakannya digunakan untuk melanjutkan yang pertama daripada tiga jenis yang dinyatakan di atas, dan jQuery.extend() digunakan untuk melanjutkan dua pemalam yang terakhir. Kedua-dua kaedah menerima satu parameter, jenis Objek. "Pasangan nama/nilai" objek Objek masing-masing mewakili "nama fungsi atau kaedah/badan fungsi".

Penjelasan terperinci tentang penggunaan fungsi jquery.extend

Saya telah mempelajari jQuery baru-baru ini. Rekod penggunaan fungsi sambungan jQuery.extend.

1. Lanjutkan kaedah statik jQuery.

$.extend({
test:function(){alert('test函数')}
})

Salin selepas log masuk

Penggunaan: $.test()

2. Gabungkan berbilang objek

Ambil jQuery.extend(css1, css2) sebagai contoh Fungsi extend akan menambah atribut yang css2 ada tetapi tidak ada dalam css2 kepada css1 Jika atribut tertentu css2 berkongsi nama yang sama dengan atribut css1 tertentu, atribut css2 akan digunakan untuk menulis ganti atribut dengan nama yang sama. daripada css1. css1 ialah objek penyepaduan akhir. Atau anda juga boleh menggunakan:

3.深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

 // 以前的 .extend()  
  jQuery.extend(  
   { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
  );  
   // 结果:  
   // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  // 新的更深入的 .extend()  
  jQuery.extend( true,  
  { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
 );  
 // 结果  
  // => { name: “John”, last: “Resig”,  
 //   location: { city: “Boston”, state: “MA” } }

Salin selepas log masuk