Analisis contoh penggunaan extend dalam JQuery_jquery

Contoh dalam artikel ini menerangkan penggunaan extend dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Fungsi extend() ialah salah satu fungsi asas jQuery, dan fungsinya adalah untuk memanjangkan objek sedia ada. Extend ialah kaedah yang biasa digunakan apabila kami menulis pemalam Kaedah ini mempunyai beberapa prototaip yang terlebih muatan. $.extend(prop) digunakan untuk memanjangkan objek jQuery dan boleh digunakan untuk menambah fungsi pada ruang nama jQuery.

1. Kod sumber fungsi jQuery.extend

jQuery.extend = jQuery.fn.extend = function() {
  var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},//参数目标对象
    i = 1,
    length = arguments.length,//参数长度
    deep = false;//是否为深度复制

  // Handle a deep copy situation
  //如果为深度复制,则目标对象和原对象游标值i，以及深度值都进行更新
  if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
  }

  // Handle case when target is a string or something (possible in deep copy)
  //当目标对象的值类型错误，则重置为{}
  if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
  }

  // extend jQuery itself if only one argument is passed
  //当参数值长度为1的情况下，目标对象就为jQuery自身
  if ( length === i ) {
    target = this;
    --i;
  }

  for ( ; i < length; i++ ) {
    // Only deal with non-null/undefined values
    if ( (options = arguments[ i ]) != null ) {//忽略空对象
      // Extend the base object
      for ( name in options ) {
        src = target[ name ];
        copy = options[ name ];//存储对象的值

        // Prevent never-ending loop
        if ( target === copy ) {
          continue;
        }

        // Recurse if we're merging plain objects or arrays
         //深度复制只有属性深度多于俩层的对象关系的结构的，如{a:{s:21,age:11}}或{a:['s'=>21,'age'=>11]}
        if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
          if ( copyIsArray ) {//如果是数组对象
            copyIsArray = false;
            clone = src && jQuery.isArray(src) &#63; src : [];

          } else {//普通对象
            clone = src && jQuery.isPlainObject(src) &#63; src : {};
          }

          // Never move original objects, clone them
          // 调用自身进行递归复制
          target[ name ] = jQuery.extend( deep, clone, copy );

        // Don't bring in undefined values
        } else if ( copy !== undefined ) {//非深度CP直接覆盖目标属性
          target[ name ] = copy;
        }
      }
    }
  }

  // Return the modified object
  return target;
};

2. Prototaip kaedah sambungan Jquery ialah:

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

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:

2. var newSrc=$.extend({},src1,src2,src3...)//Iaitu, gunakan "{}" sebagai parameter dest.

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

Contoh di bawah:

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

Kemudian hasil gabungan

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

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

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

Boolean parameter pertama mewakili sama ada untuk melaksanakan salinan dalam, dan parameter lain adalah sama seperti yang diperkenalkan sebelum ini
Contohnya:

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

Kita dapat melihat bahawa lokasi sub-objek: {city: "Boston"} bersarang dalam src1, dan lokasi sub-objek: {state: "MA"} juga bersarang dalam src2 Parameter salinan dalam yang pertama adalah benar, maka Hasilnya selepas penggabungan ialah:

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

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

Kemudian hasil gabungan ialah:

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

2. Apabila kaedah lanjutan dalam Jquery menghilangkan parameter dest

Parameter dest dalam prototaip kaedah lanjutan di atas boleh diabaikan Jika diabaikan, 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');}
});

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

adalah untuk menggabungkan kaedah hello ke dalam objek contoh jquery.

3. Berikut ialah beberapa contoh sambungan yang biasa digunakan:

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

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

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

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

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.