나는 이것을 플러그인에서 보았다.
var options = $.extend(defaults, options);
어떻게 작동합니까?
무엇을 extend()
합니까?
나는 이것을 플러그인에서 보았다.
var options = $.extend(defaults, options);
어떻게 작동합니까?
무엇을 extend()
합니까?
답변:
문서는 extend가 어떻게 작동하는지 설명하는 데 정확하지 않으므로 약간의 테스트를 실행했습니다.
var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));
(이 console.log
함수는 Firebug에서 작동하도록 설계되었습니다. 원하는 경우 alert () 또는 다른 출력 함수로 대체하십시오).
결과는 다음과 같습니다.
A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true
이것에 의해 우리는 jQuery.extend ()를 볼 수 있습니다 :
이것은 완전한 옵션 세트를 얻기 위해 사용자 및 기본 옵션 오브젝트를 함께 결합하는 데 유용합니다.
function foo(userOptions) {
var defaultOptions = {
foo: 2,
bar: 2
};
var someOtherDefaultOptions = {
baz: 3
};
var allOptions = jQuery.extend(
defaultOptions,
someOtherDefaultOptions,
userOptions
);
doSomething(allOptions);
}
foo({foo:1, baz:1});
"null"은 덮어 쓰기에 유효한 값이지만 "undefined"는 그렇지 않습니다. 이것을 사용할 수 있습니다.
var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);
결과 :
A: Foo=null Bar=a
에 객체 하나만 전달하면 jQuery.extend()
jQuery는 jQuery
객체 자체 가 "첫 번째"매개 변수 (예 : 수정할 매개 변수)이고 객체가 "두 번째"(즉 : 첫 번째 매개 변수에 추가 할 매개 변수)라고 가정합니다 . . 그래서:
console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );
결과 :
Before: undefined
After: 1
{zed: 'dark'}
아니라 2
당신이 설정 한 객체 r.baz.zed = 'light'
라면,의 값은 무엇 b.baz.zed
입니까? 즉, 속성이 참조로 복사 또는 병합됩니까?
jQuery 문서에서
두 개 이상의 개체의 내용을 첫 번째 개체로 병합합니다.
플러그인 컨텍스트에서 : 사용자가 함수에 대한 선택적 매개 변수를 설정하지 않으면 대신 기본값이 사용됩니다.
extend ()는 jQuery에서 어떻게 작동합니까? [해결됨]
jQuery에는 딥 카피와 라이트 카피가 있습니다. 첫 번째 부울이 결정합니다. 딥은 true이고 라이트는 false입니다.
예를 들면 :
jQuery.extend (false, { 'a': { 'a1': 1}}, { 'a': { 'a2': 2}})
결과는 다음과 같습니다. { 'a': { 'a2': 2}} 이것은 단순 복사이므로 레벨 1을 비교합니다.
jQuery.extend (true, { 'a': { 'a1': 1}}, { 'a': { 'a2': 2}})
결과는 다음과 같습니다. { 'a': { 'a1': 1, 'a2': 2}} 이것은 여러 수준의 객체를 포함하는 전체 복사입니다 (배열 수준과 동일).
a, b, c가있는 jQuery.extend (a, b, c)는 객체 또는 배열입니다. 흐름 오버 라이트는 b-> a, c-> a (b 오버 라이트 a, c 오버라이드 a ...)가됩니다.이 함수는 a를 반환하고 값도 변경합니다.
고급 예 :
jQuery.extend ({ 'number_param': 1})
하나의 매개 변수 만 전달하는 경우. jQuery는 자체적으로 확장됩니다. console.log (jQuery [ 'number_param'])는 1을 출력합니다.
jQuery.extend (1, { 'number_param': '2'}); 이 예제는 jQuery 자체를 추가하지 않습니다. 첫 번째 매개 변수는 부울이어야합니다. 이 경우 { 'number_param': '2'}를 반환하고 jQuery는 업데이트되지 않습니다.
jQuery.extend (a, b, c, d, e, f); 주문 병합은입니다. b-> a, c-> a, d-> a, e-> a, f-> a (b 재정의 a, c 재정의 a ...). 그리고 결과 반환은 a.
a = { 'p': 1}. jQuery.extend (a, { 'p': 2}, { 'p': 3}, { 'p': 4}, { 'p': 5})는 a를 반환하고 a = { 'p': 6}. 이 함수에 전달되는 매개 변수 수는 무제한입니다.
목적은 기존 개체를 확장하는 것입니다. 예를 들어 템플릿 객체가 있고 더 많은 속성을 추가하거나 기존 속성을 재정 의하여이를 확장하려는 경우 jquery extend가 유용 할 수 있습니다.
var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"
};
이제 확장하려면
$.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'});
출력을 제공하고 carObjectTemplate을 확장하고
{"color":"red"} property and overriding "model" property from "city" to "amaze"
첫 번째 부울 매개 변수 true / false는 딥 또는 얕은 사본이 필요한지를 나타내는 것입니다.