jQuery의 확장 메서드에 해당하는 JavaScript
배경
저는 다음과 같은 기능을 가지고 있습니다.config반론으로서 이의를 제기합니다.그 기능 안에서, 나는 또한.default물건.이러한 각 개체에는 함수 내의 나머지 코드에 대한 설정으로 기본적으로 작동하는 속성이 포함되어 있습니다.내에서 모든 설정을 지정하지 않도록 하려면config객체, 나는 jQuery의extend새 개체를 채우는 방법,settings의 기본값으로default대상이 지정되지 않은 경우config객체:
var config = {key1: value1};
var default = {key1: default1, key2: default2, key 3: default 3};
var settings = $.extend(default, config);
//resulting properties of settings:
settings = {key1: value1, key2: default2, key 3: default 3};
문제
이 기능은 잘 작동하지만 jQuery 없이도 이 기능을 복제하고 싶습니다.플레인 올의 자바스크립트로 이것을 할 수 있는 동등하게 우아한(또는 가까운) 수단이 있습니까?
편집: 중복되지 않는 정당성
이 질문은 "두 JavaScript 개체의 속성을 동적으로 병합하는 방법" 질문과 중복되지 않습니다.이 질문은 두 개의 개별 개체에서 모든 키와 값을 포함하는 개체를 만드는 것에 불과하지만, 두 개체 모두 일부 키를 공유하지 않는 경우 이를 수행하는 방법과 중복 키가 있는 경우 결과 개체에 대해 어떤 개체가 우선 순위(기본값)를 갖게 되는지에 대해 설명하고자 합니다.그리고 더욱 구체적으로, 저는 이것을 달성하기 위한 jQuery의 방법을 사용하고 jQuery 없이 할 수 있는 다른 방법을 찾고 싶었습니다.두 질문에 대한 많은 대답이 겹치지만, 그렇다고 해서 질문 자체가 동일하다는 것을 의미하는 것은 아닙니다.
코드에서 결과를 얻으려면 다음을 수행합니다.
function extend(a, b){
for(var key in b)
if(b.hasOwnProperty(key))
a[key] = b[key];
return a;
}
여기서 확장을 사용한 방법은 기본 개체를 수정합니다.원하지 않으면 다음을 사용합니다.
$.extend({}, default, config)
jQuery의 기능을 모방한 보다 강력한 솔루션은 다음과 같습니다.
function extend(){
for(var i=1; i<arguments.length; i++)
for(var key in arguments[i])
if(arguments[i].hasOwnProperty(key))
arguments[0][key] = arguments[i][key];
return arguments[0];
}
ECMA 2018 스프레드 연산자를 객체 리터럴에서 사용할 수 있습니다.
var config = {key1: value1};
var default = {key1: default1, key2: default2, key 3: default 3};
var settings = {...default, ...config}
//resulting properties of settings:
settings = {key1: value1, key2: default2, key 3: default 3};
Object.assign을 사용할 수 있습니다.
var defaults = {key1: "default1", key2: "default2", key3: "defaults3"};
var config = {key1: "value1"};
var settings = Object.assign({}, defaults, config); // values in config override values in defaults
console.log(settings); // Object {key1: "value1", key2: "default2", key3: "defaults3"}
열거 가능한 모든 자체 속성 값을 하나 이상의 원본 개체에서 대상 개체로 복사하고 대상 개체를 반환합니다.
Object.assign(target, ...sources)
IE(Edge 포함)를 제외한 모든 데스크톱 브라우저에서 작동합니다.모바일 지원을 완화했습니다.
여기에서 직접 확인하십시오. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
딥 카피 정보
그러나 Object.assign에는 jQuery의 확장 메서드에 있는 deep 옵션이 없습니다.
참고: 일반적으로 유사한 효과를 위해 JSON을 사용할 수 있습니다.
var config = {key1: "value1"};
var defaults = {key1: "default1", key2: "default2", keyDeep: {
kd1: "default3",
kd2: "default4"
}};
var settings = JSON.parse(JSON.stringify(Object.assign({}, defaults, config)));
console.log(settings.keyDeep); // Object {kd1: "default3", kd2: "default4"}
이것은 제가 jQuery 의존성을 제거하기 위해 노력하는 동안 고안한 딥 카피에 대한 저의 약간 다른 접근 방식입니다.대부분 소형으로 설계되어 있어 기대하는 모든 기능을 갖추고 있지 않을 수 있습니다.ES5와 완전히 호환되어야 합니다(Object.key 사용으로 인해 IE9부터 시작).
function extend(obj1, obj2) {
var keys = Object.keys(obj2);
for (var i = 0; i < keys.length; i += 1) {
var val = obj2[keys[i]];
obj1[keys[i]] = ['string', 'number', 'array', 'boolean'].indexOf(typeof val) === -1 ? extend(obj1[keys[i]] || {}, val) : val;
}
return obj1;
}
다섯 번째 줄이 정확히 무엇을 하는지 궁금할 수도 있습니다...if obj2.key는 객체 리터럴(즉, 일반적인 유형이 아닌 경우)이며 이에 대해 재귀적으로 extend를 호출합니다.해당 이름을 가진 속성이 obj1에 아직 없으면 먼저 빈 개체로 초기화합니다.그렇지 않으면 단순히 obj1을 설정합니다.obj2 키입니다.열쇠.
다음은 일반적인 사례가 여기에서 작동함을 증명해야 하는 mymocha/chai 테스트는 다음과 같습니다.
it('should extend a given flat object with another flat object', () => {
const obj1 = {
prop1: 'val1',
prop2: 42,
prop3: true,
prop4: 20.16,
};
const obj2 = {
prop4: 77.123,
propNew1: 'newVal1',
propNew2: 71,
};
assert.deepEqual(utils.extend(obj1, obj2), {
prop1: 'val1',
prop2: 42,
prop3: true,
prop4: 77.123,
propNew1: 'newVal1',
propNew2: 71,
});
});
it('should deep-extend a given flat object with a nested object', () => {
const obj1 = {
prop1: 'val1',
prop2: 'val2',
};
const obj2 = {
propNew1: 'newVal1',
propNew2: {
propNewDeep1: 'newDeepVal1',
propNewDeep2: 42,
propNewDeep3: true,
propNewDeep4: 20.16,
},
};
assert.deepEqual(utils.extend(obj1, obj2), {
prop1: 'val1',
prop2: 'val2',
propNew1: 'newVal1',
propNew2: {
propNewDeep1: 'newDeepVal1',
propNewDeep2: 42,
propNewDeep3: true,
propNewDeep4: 20.16,
},
});
});
it('should deep-extend a given nested object with another nested object and deep-overwrite members', () => {
const obj1 = {
prop1: 'val1',
prop2: {
propDeep1: 'deepVal1',
propDeep2: 42,
propDeep3: true,
propDeep4: {
propDeeper1: 'deeperVal1',
propDeeper2: 777,
propDeeper3: 'I will survive',
},
},
prop3: 'lone survivor',
};
const obj2 = {
prop1: 'newVal1',
prop2: {
propDeep1: 'newDeepVal1',
propDeep2: 84,
propDeep3: false,
propDeep4: {
propDeeper1: 'newDeeperVal1',
propDeeper2: 888,
},
},
};
assert.deepEqual(utils.extend(obj1, obj2), {
prop1: 'newVal1',
prop2: {
propDeep1: 'newDeepVal1',
propDeep2: 84,
propDeep3: false,
propDeep4: {
propDeeper1: 'newDeeperVal1',
propDeeper2: 888,
propDeeper3: 'I will survive',
},
},
prop3: 'lone survivor',
});
});
저는 이 구현에 대한 피드백이나 의견에 대해 기쁘게 생각합니다.잘 부탁드립니다!
당신은 다을사음용개속루수있프습다니할성을 사용하여 할 수 .for진술.
var settings = extend(default, config);
function extend(a, b){
var c = {};
for(var p in a)
c[p] = (b[p] == null) ? a[p] : b[p];
return c;
}
각인에 대해 내 제네릭을 사용하고 첫 번째 개체를 망치지 않는 코드를 선호합니다.
function forEachIn(obj, fn) {
var index = 0;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
fn(obj[key], key, index++);
}
}
}
function extend() {
var result = {};
for (var i = 0; i < arguments.length; i++) {
forEachIn(arguments[i],
function(obj, key) {
result[key] = obj;
});
}
return result;
}
첫 번째 개체에 항목을 병합하려면 다음 작업을 수행합니다.
obj1 = extend(obj1, obj2);
순수한 자바스크립트로 개발할 때 많은 도움이 됩니다.
function extends(defaults, selfConfig){
selfConfig = JSON.parse(JSON.stringify(defaults));
for (var item in config) {
if (config.hasOwnProperty(item)) {
selfConfig[item] = config[item];
}
}
return selfConfig;
}
Ivan Kuckir의 접근 방식은 새로운 물체 프로토타입을 만들기 위해 적용될 수도 있습니다.
Object.prototype.extend = function(b){
for(var key in b)
if(b.hasOwnProperty(key))
this[key] = b[key];
return this;
}
var settings = default.extend(config);
언급URL : https://stackoverflow.com/questions/11197247/javascript-equivalent-of-jquerys-extend-method
'sourcecode' 카테고리의 다른 글
| Jersey: 요소가 1개인 Json 배열이 개체로 직렬화됩니다. (0) | 2023.09.01 |
|---|---|
| Powershell 이미지를 https://www.artstation.com/ 에 업로드합니다. (0) | 2023.09.01 |
| Powershell 오류 "'Get-SPWeb'이라는 용어가 cmdlet, 함수의 이름으로 인식되지 않습니다.." (0) | 2023.08.27 |
| 표 행에 여백을 추가하는 방법 (0) | 2023.08.27 |
| Uncaught TypeError: 정의되지 않은 속성 'msie'를 읽을 수 없습니다. (0) | 2023.08.27 |