Detaillierte Erläuterung des Implementierungsprinzips der Erweiterungsfunktion in jQuery_jquery

extend() ist eine wichtige Funktion in jQuery. Sie wird häufig bei der Entwicklung von jQuery-Plugins verwendet. Sie wird auch intern von jQuery verwendet, um Attributmethoden zu erweitern Artikel von Die noConflict-Methode wird mit der Extend-Methode erweitert.

Im API-Handbuch von jQuery sehen wir, dass es sich bei „extend“ tatsächlich um zwei verschiedene Methoden handelt, die auf jQuery und jQuery.fn gemountet sind, obwohl jQuery.extend() und jQuery.fn.extend() in jQuery enthalten sind Sie werden mit demselben Code implementiert, aber ihre Funktionen sind unterschiedlich. Werfen wir einen Blick auf die offizielle API-Erklärung von „extend“:

Kopieren Sie den Code Der Code lautet wie folgt:

jQuery.extend(): Füge den Inhalt von zwei oder mehr Objekten zum ersten Objekt zusammen (Füge zwei oder mehr Objekte zum ersten zusammen)
jQuery.fn.extend():Führen Sie den Inhalt eines Objekts mit dem jQuery-Prototyp zusammen, um neue jQuery-Instanzmethoden bereitzustellen (hängen Sie das Objekt an die Prototypeigenschaft von jQuery an, um eine neue jQuery-Instanzmethode zu erweitern)

Wir wissen, dass jQuery über statische Methoden und Instanzmethoden verfügt. Der erste Unterschied zwischen jQuery.extend() und jQuery.fn.extend() besteht darin, dass eines zum Erweitern statischer Methoden und das andere zum Erweitern von Instanzmethoden verwendet wird . Die Verwendung ist wie folgt:

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

Beachten Sie, dass es zwei Möglichkeiten gibt, das Plug-In aufzurufen: Eine besteht darin, es direkt mit $ aufzurufen, und die andere darin, es mit $() aufzurufen. Darüber hinaus empfängt jQuery.extend() mehrere Objekte als Parameter . Wenn nur ein Parameter vorhanden ist, werden die Eigenschaftsmethoden des Objekts an jQuery angehängt. Wenn es mehrere Parameter enthält, werden die Eigenschaften und Methoden der nachfolgenden Objekte an das erste Objekt angehängt. Quellcode der jQuery-Erweiterungsimplementierung:

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

Es handelt sich um einen großen Codehaufen, der auf den ersten Blick schwer zu verstehen ist. Tatsächlich wird der größte Teil des Codes zum Implementieren von Objektzusammenführungs- und Deep-Copy-Problemen verwendet, wenn in jQuery.extend() mehrere Parameter vorhanden sind Wenn die Funktion entfernt wird und Extend nur die Funktion hat, statische Methoden und Instanzmethoden zu erweitern, lautet der Code wie folgt:

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

Lassen Sie uns die Extend-Methode kommentieren und erklären:

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

Nachdem Sie das Prinzip der jQuery-Erweiterung verstanden haben, werden Sie sich meiner Meinung nach in Zukunft keine Gedanken mehr über das Schreiben von jQuery-Plug-Ins machen müssen.