<script>
function createElement(item) {
if (item.type === 'ball') {
const div = document.createElement('div');
div.className = 'item ball';
div.textContent = 'ball';
return div;
} else if (item.type === 'square') {
const div = document.createElement('div');
div.className = 'item square';
div.textContent = 'square';
return div;
} else if (item.type === 'triangle') {
const div = document.createElement('div');
div.className = 'item triangle';
div.textContent = 'triangle';
return div;
} else if (item.type === 'rectangle') {
const div = document.createElement('div');
div.className = 'item rectangle';
div.textContent = 'rectangle';
return div;
} else {
throw new Error('Invalid type');
}
};
let obj = {
'type': 'ball'
};
createElement(obj);
console.log('createElement(obj);', createElement(obj));
</script>简化思路：
1.提取出公共代码，
const div = document.createElement('div');
div.className = 'item';
return div;
2.添加类名为传入对象的type值，div的内容为传入对象的type值。
3.判断异常情况代码提前，当 throw 语句被执行时，它会立即抛出一个异常，并停止当前函数的执行。因此，如果执行了 throw new Error('Invalid type');，该语句后面的代码将不会执行。
<script>
function createElement(item) {
const validTypes = ['ball', 'square', 'triangle', 'rectangle'];
if (!validTypes.includes(item.type)) {
throw new Error('Invalid type');
}
const div = document.createElement('div');
div.className = 'item';
div.classList.add(item.type);
div.textContent = item.type;
return div;
};
let obj = {
'type': 'ball'
};
createElement(obj);
console.log('createElement(obj);', createElement(obj));
</script>优化思路：用map结构优化if-else判断
1.写映射关系表，如果传入的数据不在map映射表中，抛出异常
2.添加类名，把map[item.type].className进行字符串的拼接
3.内容使用map映射表中对应的map[item.type].textContent
4.添加点击事件
5.将创建的 <div> 元素添加到<body> 元素中，设置样式，这样 <div> 元素就会在页面上显示出来了。
<script>
const map = {
ball: {
className: 'c-b',
textContent: '小球',
click() {
console.log('this is a ball');
}
},
square: {
className: 'c-s',
textContent: '正方形',
click() {
console.log('this is a square');
}
},
triangle: {
className: 'c-t',
textContent: '三角形',
click() {
console.log('this is a triangle');
}
},
rectangle: {
className: 'c-r',
textContent: '矩形',
click() {
console.log('this is a rectangle');
}
}
};
function createElement(item) {
if (!map[item.type]) {
throw new Error('Invalid type');
}
const div = document.createElement('div');
div.className = `item ${map[item.type].className}`;
div.textContent = map[item.type].textContent;
div.onclick = map[item.type].click;
return div;
};
let obj = {
'type': 'ball'
};
createElement(obj);
document.body.appendChild(createElement(obj));
console.log('createElement(obj);', createElement(obj));
</script>
