jQuery_jqueryのextend関数の実装原理を詳しく解説

extend() は、jQuery の重要な関数であり、オブジェクトを拡張するために使用されます。前に述べたように、jQuery の内部でも属性メソッドを拡張するために使用されます。 の記事 noConflict メソッドは extend メソッドを使用して拡張されます。

jQuery の API マニュアルでは、extend は実際には jQuery と jQuery.fn にマウントされた 2 つの異なるメソッドであることがわかりますが、jQuery 内では jQuery.extend() と jQuery.fn.extend() は同じコードを使用して実装されていますが、それらの機能は異なります。 extend の公式 API 説明を見てみましょう:

コードをコピーします コードは次のとおりです:

jQuery.extend(): 2 つ以上のオブジェクトの内容を最初のオブジェクトに結合します (2 つ以上のオブジェクトを最初のオブジェクトに結合します)
jQuery.fn.extend(): オブジェクトのコンテンツを jQuery プロトタイプにマージして、新しい jQuery インスタンス メソッドを提供します (オブジェクトを jQuery のプロトタイプ プロパティにマウントして、新しい jQuery インスタンス メソッドを拡張します)

jQuery には静的メソッドとインスタンス メソッドがあることがわかっています。そのため、jQuery.extend() と jQuery.fn.extend() の最初の違いは、一方は静的メソッドの拡張に使用され、もう一方はインスタンス メソッドの拡張に使用されることです。 。使用方法は次のとおりです。

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都会被选择

プラグインを呼び出すには 2 つの方法があることに注意してください。1 つは $ で直接呼び出す方法、もう 1 つは $() で呼び出す方法です。また、jQuery.extend() は複数のオブジェクトをパラメータとして受け取ります。パラメータが 1 つだけの場合は、オブジェクトのプロパティ メソッドが jQuery にアタッチされます。複数のパラメータが含まれる場合は、後続のオブジェクトのプロパティとメソッドが最初のオブジェクトにアタッチされます。 jQuery 拡張実装ソース コード:

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

これは一見すると理解するのが難しい大量のコードですが、実際、コードのほとんどは、jQuery.extend() に複数のパラメーターがある場合のオブジェクトのマージとディープ コピーの問題を実装するために使用されています。関数を削除し、extend に静的メソッドとインスタンス メソッドを拡張する機能のみを持たせると、コードは次のようになります:

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

extend メソッドについてコメントして説明しましょう:

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

jQuery 拡張機能の原理を理解すれば、将来 jQuery プラグインの作成について心配する必要はなくなると思います。