我確實知道如何檢查屬性是否存在（hasOwnProperty、、、in等!== undefined）。
但我不知道如何避免在此屬性不存在時對其執行操作。
是否有解決方案可以避免if（property && action在我的情況下）每次驗證？
類似的問題：Javascript - 檢查物件是否具有屬性時如何避免多個 if 條件檢查？在我的情況下并不真正相關
const myFunction1 = myFunction2 = () => {};
const generateElement = (p) => {
let div = document.createElement(p.tag);
p.classes && (div.className = p.classes);
p.style && (div.style.cssText = p.style);
p.content && (div.innerHTML = p.content);
p.appendIn && p.appendIn.appendChild(div);
p.attribs && Object.entries(p.attribs).forEach((y) => {
div.setAttribute(y[0], y[1]);
});
p.events && Object.entries(p.events).forEach((y) => {
div.addEventListener(y[0], y[1], false);
});
return div
}
var newElem = generateElement({
tag: 'div',
classes: 'mydiv',
id: 'id42',
content: 'Hello world!',
style: 'background:#ccc',
attribs: {
'tabindex': 0,
'title': 'Title #1'
},
events: {
'click': myFunction1,
'mouseout': myFunction2
},
appendIn: document.body
});uj5u.com熱心網友回復：
您可能會考慮使用類似于使用Object.entries的Object.keys并創建一個addProp函式來使用switch處理每種屬性和值，這樣您就只處理p物件中存在的屬性并且可以忽略也有未知的屬性，例如
const generateElement = (p) => {
if (!p.tag) return;
let node = document.createElement(p.tag);
if (!node) return;
let props = Object.keys(p);
props.forEach(prop => addProp(node, prop, p[prop]));
}
function addProp(el, prop, value) {
switch (prop) {
case 'appendIn':
value.appendChild(el);
break;
case 'attribs':
Object.entries(value).forEach(([p, v]) => el.setAttribute(p, v));
break;
case 'classes':
el.className = value;
break;
case 'content':
el.innerHTML = value;
break;
case 'events':
Object.entries(value).forEach(([p, v]) => el.addEventListener(p, v, false));
break;
case 'id' :
el.id = value;
break;
case 'style':
el.style.cssText = value;
break;
case 'tag' : // Already done
break;
default :
console.log(`Unexpected property: ${prop}`);
}
return el;
}
var newElem = generateElement({
tag: 'div',
classes: 'mydiv',
id: 'id42',
content: 'Hello world!',
style: 'background:#ccc;color:red',
attribs: {
'tabindex': 0,
'title': 'Title #1'
},
events: {
'click': () => console.log('click'),
'mouseout': () => console.log('mouseout')
},
appendIn: document.body,
foo: 'bar'
});您可以使用forEach或for..of對Object.entries做類似的事情：
let node = document.createElement(p.tag);
for (let [prop, value] of Object.entries(p)) {
addProp(node, prop, value);
}
任何。
uj5u.com熱心網友回復：
如果您有正確的 JS 版本，您可以設定默認值并使用空合并運算子https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
//Empty strings as default will keep the functionality the same
div.className = p.classes ?? '';
//use empty objects where needed
Object.entries(p.events ?? {}).forEach(...)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/411927.html
標籤：