jquery의 $.extend 및 $.fn.extend 작용 및 차이

jQuery는 다음과 같은 두 가지 방법으로 플러그인을 개발합니다.
jQuery.fn.extend();
jQuery.extend();
자바스크립트는 명확한 클래스 개념이 없지만 클래스로 이해하면 더욱 편리하다.
jQuery는 아주 잘 봉인된 클래스입니다. 예를 들어 문장 $("#btn1") 을 사용하면 jQuery 클래스의 실례를 만들 수 있습니다.
jQuery.extend(object);jQuery 클래스에 클래스를 추가하는 방법은 정적 방법을 추가하는 것으로 이해할 수 있습니다.예:jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); //  2 jQuery.max(4,5); //  5 ObjectjQuery.ttend(target,object1,[objectN])는 한 개 이상의 다른 대상으로 한 대상을 확장하여 확장된 대상var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options);의 결과를 되돌려줍니다. settings == { validate: true, limit: 5, name: "bar" } 
jQuery.fn.extend(object); 그래, jQuery.prototype 확장은 jQuery 클래스에 '구성원 함수' 를 추가하는 것입니다.jQuery 클래스의 실례는 이 '구성원 함수' 를 사용할 수 있습니다.
예를 들어 우리는 플러그인을 개발하여 특수한 편집 상자를 만들어야 한다. 이 플러그인이 눌렸을 때, 현재 편집 상자의 내용을 알 수 있다.다음을 수행할 수 있습니다.
$.fn.extend({                alertWhileClick:function() {                        $(this).click(function(){                                    alert($(this).val());                        });                  }        });        $("#input1").alertWhileClick();//페이지의 경우:
$("# input1") 은 jQuery 실례입니다. 구성원 방법인alertWhileClick을 호출하면 확장이 이루어집니다. 클릭할 때마다 현재 편집된 내용을 먼저 팝업합니다.
 
 
JQuery의 extend 확장 방법: Jquery의 확장 방법 extend는 우리가 플러그인을 쓰는 과정에서 자주 사용하는 방법입니다. 이 방법은 원형을 다시 불러오는 방법이 있습니다. 여기서 함께 알아보겠습니다.1. Jquery의 확장 방법의 원형은 다음과 같다.
extend(dest,src1,src2,src3...);
그것의 의미는 src1, src2, src3...dest에 합병되면 반환값은 합병된 dest로 이 방법이 합병된 후에 dest의 구조를 수정한 것을 알 수 있다.Dest 구조를 수정하지 않고 결합 결과를 얻으려면 다음과 같이 하십시오.
var newSrc=$.extend({},src1,src2,src3...)//즉 "{}"을dest 매개 변수로 사용합니다.
이렇게 하면 src1, src2, src3을...병합을 진행한 다음 병합 결과를 newSrc에 되돌려줍니다.예를 들면 다음과 같습니다.
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
 
그럼 합병된 결과.
result={name:"Jerry",age:21,sex:"Boy"}
즉 뒤의 매개 변수가 앞의 매개 변수와 같은 이름이 존재하면 뒤의 매개 변수는 앞의 매개 변수 값을 덮어쓴다.
2. dest 파라미터를 생략하는 상기 extend 방법의 원형에 있는 dest 파라미터는 생략할 수 있습니다. 생략하면 이 방법은 src 파라미터가 하나만 있을 수 있고 이 src를 extend 방법을 호출하는 대상에 통합시킬 수 있습니다. 예를 들어 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의 실례 대상에 통합하는 것입니다.
다음은 일반적인 확장 인스턴스 몇 가지를 예로 들겠습니다.
$.extend({net:{}});
 
이것은 jquery 전역 대상에서 넷 이름 공간을 확장하는 것입니다.
$.extend($.net,{ hello:function(){alert('hello');} })
이것은 Hello 방법을 이전에 확장된 Jquery의 net 이름 공간으로 확장하는 것입니다.
셋째, Jquery의 extend 메서드에는 프로파일을 다시 로드하는 방법도 있습니다.
extend(boolean,dest,src1,src2,src3...)
첫 번째 파라미터boolean은 깊이 복사를 하는지 여부를 대표하고 나머지 파라미터는 앞에서 소개한 것과 일치한다. 심층 복사가 무엇인지 우리는 하나의 예를 본다.
var result=$.extend( true, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );
우리는 src1에 끼워 넣은 하위 대상location: {city: "Boston"}, src2에도 끼워 넣은 하위 대상location: {state: "MA"}, 첫 번째 깊이 복사 파라미터가true인 것을 알 수 있다. 그러면 합병된 결과는 다음과 같다.
result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
 
즉, 이것은 src의 끼워 넣은 하위 대상도 합병할 것이다. 첫 번째 파라미터인boolean이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"}}
 
이상은 $입니다.extend () 는 프로젝트에서 자주 사용하는 세부 사항입니다.