优化代码分支

最新推荐文章于 2024-07-25 14:02:05 发布

想退休的搬砖人

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量252

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/2301_79568779/article/details/137160578

版权

本文介绍了如何通过JavaScript的createElement方法动态创建

元素，利用对象类型映射和优化if-else结构，实现根据不同类型添加类名、内容和点击事件。最终，通过将元素添加到body中，实现在页面上显示不同形状的元素。

摘要由CSDN通过智能技术生成

<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>

想退休的搬砖人

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
优化代码分支

3.内容使用map映射表中对应的map[item.type].textContent。2.添加类名，把map[item.type].className进行字符串的拼接。语句被执行时，它会立即抛出一个异常，并停止当前函数的执行。2.添加类名为传入对象的type值，div的内容为传入对象的type值。1.写映射关系表，如果传入的数据不在map映射表中，抛出异常。优化思路：用map结构优化if-else判断。3.判断异常情况代码提前，当。，该语句后面的代码将不会执行。元素中，设置样式，这样。1.提取出公共代码，
复制链接

扫一扫