JQuery_jquery의 확장 사용 사례 분석

이 문서의 예에서는 JQuery의 확장 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

extend() 함수는 jQuery의 기본 기능 중 하나로, 기존 객체를 확장하는 기능을 합니다. Extend는 플러그인을 작성할 때 일반적으로 사용되는 방법입니다. 이 방법에는 일부 오버로드된 프로토타입이 있습니다. $.extend(prop)는 jQuery 객체를 확장하는 데 사용되며 jQuery 네임스페이스에 함수를 추가하는 데 사용할 수 있습니다.

1. 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. Jquery의 확장 메서드 프로토타입은 다음과 같습니다.
​
1. 확장(dest,src1,src2,src3...);

src1, src2, src3...을 dest로 병합한다는 의미이며, 반환값은 병합된 dest입니다. 이 메서드는 병합 후 dest의 구조를 수정한다고 볼 수 있습니다. 병합된 결과를 얻고 싶지만 dest의 구조를 수정하고 싶지 않은 경우 다음과 같이 사용할 수 있습니다.

2. var newSrc=$.extend({},src1,src2,src3...)//즉, "{}"를 대상 매개변수로 사용합니다.

이런 방법으로 src1, src2, src3...을 병합할 수 있으며 병합된 결과는 newSrc에 반환됩니다.

아래 예:

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

그러면 병합된 결과

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

즉, 이후 매개변수의 이름이 이전 매개변수와 동일한 경우 이후 매개변수가 이전 매개변수 값을 덮어씁니다.

3. 확장(부울,대상,src1,src2,src3...)

첫 번째 매개변수 boolean은 deep copy 수행 여부를 나타내며, 나머지 매개변수는 앞서 소개한 매개변수와 일치합니다
예:

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

하위 개체 위치: {city: "Boston"}이 src1에 중첩되어 있고 하위 개체 위치: {state: "MA"}도 src2에 중첩되어 있음을 알 수 있습니다. 가 true이면 병합 후 결과는 다음과 같습니다.

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

즉, src에 중첩된 하위 개체도 병합하고, 첫 번째 매개변수 부울 값이 false인 경우 다음과 같이 병합 결과가 무엇인지 살펴보겠습니다.

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

병합된 결과는 다음과 같습니다.

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

2. Jquery의 확장 메소드에서 dest 매개변수가 생략된 경우

위의 확장 메소드 프로토타입에서 dest 매개변수는 생략될 수 있습니다. 생략되면 메소드는 하나의 src 매개변수만 가질 수 있으며 src는 다음과 같이 확장 메소드를 호출하는 객체에 병합됩니다.

1.$.extend(src)

이 방법은 src를 다음과 같이 jquery의 전역 객체로 병합하는 것입니다.

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

은 hello 메소드를 jquery의 전역 객체에 병합하는 것입니다.

2. $.fn.extend(src)

이 메소드는 src를 다음과 같은 jquery 인스턴스 객체로 병합합니다.

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

은 hello 메소드를 jquery 인스턴스 객체에 병합하는 것입니다.

3. 다음은 일반적으로 사용되는 몇 가지 확장 예제입니다.

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

jquery 전역 개체에서 net 네임스페이스를 확장하는 것입니다.

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

이는 hello 메소드를 이전에 확장된 Jquery net 네임스페이스로 확장하는 것입니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.