Penjelasan terperinci tentang prinsip pelaksanaan fungsi extend dalam jQuery_jquery

extend() ialah fungsi penting dalam jQuery Ia digunakan untuk memanjangkan objek Ia sering digunakan dalam pembangunan pemalam jQuery Ia juga digunakan secara dalaman oleh jQuery untuk melanjutkan kaedah atribut, seperti yang dinyatakan dalam sebelumnya artikel Kaedah noConflict dilanjutkan menggunakan kaedah lanjutan.

Dalam manual API jQuery, kita melihat bahawa extend sebenarnya adalah dua kaedah berbeza yang dipasang pada jQuery dan jQuery.fn, walaupun di dalam jQuery jQuery.extend() dan jQuery.fn.extend() Ia dilaksanakan menggunakan kod yang sama, tetapi fungsi mereka berbeza. Mari kita lihat penjelasan API rasmi extend:

Salin kod Kodnya adalah seperti berikut:

jQuery.extend(): Gabungkan kandungan dua atau lebih objek bersama-sama ke dalam objek pertama (Gabungkan dua atau lebih objek ke dalam yang pertama)
jQuery.fn.extend():Gabungkan kandungan objek pada prototaip jQuery untuk menyediakan kaedah contoh jQuery baharu (Lekapkan objek pada sifat prototaip jQuery untuk melanjutkan kaedah contoh jQuery baharu)

Kami tahu bahawa jQuery mempunyai kaedah statik dan kaedah contoh, jadi perbezaan pertama antara jQuery.extend() dan jQuery.fn.extend() ialah satu digunakan untuk melanjutkan kaedah statik dan satu lagi digunakan untuk melanjutkan kaedah contoh . Penggunaan adalah seperti berikut:

jQuery.extend({
 sayhello:function(){
 console.log("Hello,This is jQuery Library");
 }
})
$.sayhello(); //Hello, This is jQuery Library
jQuery.fn.extend({
 check: function() {
 return this.each(function() {
 this.checked = true;
 });
 },
 uncheck: function() {
 return this.each(function() {
 this.checked = false;
 });
 }
})
$( "input[type='checkbox']" ).check(); //所有的checkbox都会被选择

Perhatikan bahawa terdapat dua cara untuk memanggil pemalam, satu ialah memanggilnya terus dengan $, dan satu lagi memanggilnya dengan $() Selain itu, jQuery.extend() menerima berbilang objek sebagai parameter . Jika terdapat hanya satu parameter, maka ini Kaedah sifat objek dilampirkan pada jQuery Jika ia mengandungi berbilang parameter, sifat dan kaedah objek berikutnya dilampirkan pada objek pertama. jQuery melanjutkan kod sumber pelaksanaan:

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
 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
 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
 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 ) {
  target[ name ] = copy;
 }
 }
 }
 }
 // Return the modified object
 return target;
};

Ia adalah longgokan kod yang besar, yang sukar difahami pada pandangan pertama Malah, kebanyakan kod digunakan untuk melaksanakan masalah penggabungan objek dan penyalinan dalam apabila terdapat berbilang parameter dalam jQuery.extend( Jika ini fungsi dialih keluar, biarkan extend hanya mempunyai fungsi memanjangkan kaedah statik dan contoh, maka kodnya adalah seperti berikut:

jQuery.extend = jQuery.fn.extend = function(obj){
 //obj是传递过来扩展到this上的对象
 var target=this;
 for (var name in obj){
 //name为对象属性
 //copy为属性值
 copy=obj[name];
 //防止循环调用
 if(target === copy) continue;
 //防止附加未定义值
 if(typeof copy === 'undefined') continue;
 //赋值
 target[name]=copy;
 }
 return target;
}

Mari ulas dan terangkan kaedah lanjutan:

jQuery.extend = jQuery.fn.extend = function() {
 // 定义默认参数和变量
 // 对象分为扩展对象和被扩展的对象 
 //options 代表扩展的对象中的方法
 //name 代表扩展对象的方法名
 //i 为扩展对象参数起始值
 //deep 默认为浅复制
 var options, name, src, copy, copyIsArray, clone,
 target = arguments[0] || {},
 i = 1,
 length = arguments.length,
 deep = false;
 //当第一个参数为布尔类型是，次参数定义是否为深拷贝
 //对接下来的参数进行处理
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // 当定义是否深拷贝时，参数往后移动一位
 i = 2;
 }
 // 如果要扩展的不是对象或者函数，则定义要扩展的对象为空
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }
 // 当只含有一个参数时，被扩展的对象是jQuery或jQuery.fn
 if ( length === i ) {
 target = this;
 --i;
 }
 //对从i开始的多个参数进行遍历
 for ( ; i < length; i++ ) {
 // 只处理有定义的值
 if ( (options = arguments[ i ]) != null ) {
 // 展开扩展对象
 for ( name in options ) {
 src = target[ name ];
 copy = options[ name ];
 // 防止循环引用
 if ( target === copy ) {
  continue;
 }
 // 递归处理深拷贝
 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 : {};
  }
  target[ name ] = jQuery.extend( deep, clone, copy );
 // 不处理未定义值
 } else if ( copy !== undefined ) {
  //给target增加属性或方法
  target[ name ] = copy;
 }
 }
 }
 }
 //返回
 return target;
};

Setelah memahami prinsip sambungan jQuery, saya percaya anda tidak perlu risau tentang menulis pemalam jQuery pada masa hadapan.