본문 바로가기
기타/프로그래밍 관련

jquery extend, jquery plugin

by WebHack 2014. 9. 19.

jQuery.extend( target [, object1] [, objectN] )Returns : Object

개요 : 두개 이상의 객체를 합침(Merge)니다.

  • jQuery.extend( target [, object1] [, objectN] )
  • target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
  • object1 합쳐질 때 기준이 될 객체
  • objectN 기준 객체에 합쳐질 추가 객체
  • jQuery.extend( [deep], target, object1 [, objectN] )
  • deep true 라면, 깊은 수준 복사가 됩니다.
  • target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체
  • object1 합쳐질 때 기준이 될 객체
  • objectN 기준 객체에 합쳐질 추가 객체

두개 이상의 객체를 합치기 위해 $.extend() 함수를 사용합니다.

ㅇ 테스트


var object1 = {apple: 0, banana: {weight: 52, price: 100}, cherry: 97};

var object2 = {banana: {price: 200}, durian: 100};

var test1 = $.extend(object1, object2);


var object3 = {apple: 0, banana: {weight: 52, price: 100}, cherry: 97};

var object4 = {banana: {price: 200}, durian: 100};

var test2 = $.extend(true, object3, object4);


var object5 = {apple: 0, banana: {weight: 52, price: 100}, cherry: 97};

var object6 = {banana: {price: 200}, durian: 100};

var test3 = $.extend({}, object5, object6);


console.log(JSON.stringify(object1));

console.log(JSON.stringify(object2));

console.log(JSON.stringify(test1));

console.log(JSON.stringify(object3));

console.log(JSON.stringify(object4));

console.log(JSON.stringify(test2));

console.log(JSON.stringify(object5));

console.log(JSON.stringify(object6));

console.log(JSON.stringify(test3));


Original

{apple: 0, banana: {weight: 52, price: 100}, cherry: 97};

{banana: {price: 200}, durian: 100};


After

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100} VM635:14 

<= 두번째 요소의 값 중에 있는(price) 건 변경되고 없는(durian) 건 추가 되었으나 weight는 삭제됨

{"banana":{"price":200},"durian":100} VM635:15

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100} VM635:16

<= 변환된 object와 동일


{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100} VM635:17

<= 두번째 요소의 값 중에 있는(price) 건 변경되고 없는(durian) 건 추가됨

{"banana":{"price":200},"durian":100} VM635:18

{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100} VM635:19

<= 변환된 object와 동일


{"apple":0,"banana":{"weight":52,"price":100},"cherry":97} VM635:20

<= 동일(변환되지 않음)

{"banana":{"price":200},"durian":100} VM635:21

{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

<= 첫번째 기능과 동일한 결과를 리턴해 줌


그럼으로 2번째꺼가 쓰는게 가장 좋은거 같음

단 기존 데이터도 변경 됨으로 주의 필요(기존 데이터가 변경 안 되게 하려면

3번재꺼 사용이 추천이나 Object In Object가 안 됨으로서 좀 이상 함