如何避免在JavaScript中重复编写相似代码：以问答网页为例

本文旨在解决在JavaScript开发中重复编写相似代码的问题，以一个问答网页为例，展示如何通过使用三元运算符和函数来避免代码冗余，提高代码的可维护性和可读性。我们将重点讲解如何简化条件判断语句，以及如何将重复的代码块封装成可重用的函数，从而减少代码量，提升开发效率。

减少重复代码的策略

在开发过程中，我们经常会遇到需要根据不同的条件执行相似操作的情况。如果直接复制粘贴代码，会导致代码冗余，难以维护。以下是一些减少重复代码的常用策略：

1. 使用三元运算符简化条件判断： 当条件判断的结果只有两种情况时，可以使用三元运算符 condition ? expr1 : expr2 来替代 if...else 语句，使代码更简洁。

2. 封装可重用函数： 将重复的代码块封装成函数，可以在不同的地方调用，避免重复编写相同的代码。

   立即学习“Java免费学习笔记（深入）”；

示例：优化问答网页代码

在提供的问答网页代码中，$('.go-btn').on('click', function() { ... }); 部分存在大量重复的代码，主要体现在以下几个方面：

• 根据选择的主题 (Biology, Chemistry, Physics) 选择不同的问题数组 (biologyQ, chemistryQ, physicsQ)。
• 根据选择的主题，获取对应的课程 (#myBiology, #myChemistry, #myPhysics)。
• 对筛选后的问题数组进行洗牌 (shuffle)。
• 将洗牌后的问题显示在对应的 div 元素中 (#q1, #q2, #q3)。
• 根据选择的问题数量显示对应的 div 元素。

以下代码展示了如何使用三元运算符来简化主题和课程的选择：

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

38

查看详情

$(document).ready(function(){
    $('.go-btn').on('click',function() {

        var array = ($('#myTopic').val() == 'Biology' ? biologyQ : ($('#myTopic').val() == 'Chemistry' ? chemistryQ : physicsQ));
        const lessonSelected = ($('#myTopic').val() == 'Biology' ? $('#myBiology').val() : ($('#myTopic').val() == 'Chemistry' ? $('#myChemistry').val() : $('#myPhysics').val()));
        var lessonResult = $.grep(array, function(e){ return e.lesson == lessonSelected; });

        {
            const array = lessonResult;

            function shuffle(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    let j = Math.floor(Math.random() * (i + 1));
                    let temp = array[i];
                    array[i] = array[j];
                    array[j] = temp;
                }
                return array;
            };

            const result = shuffle(array);
            $('#q1').html(result[0].question);
            $('#q2').html(result[1].question);
            $('#q3').html(result[2].question);

            var currentVal = $('#myNumber').val();
            $('.selected').hide().slice(0, currentVal).show();
        }
    });
});

代码解释:

• var array = ($('#myTopic').val() == 'Biology' ? biologyQ : ($('#myTopic').val() == 'Chemistry' ? chemistryQ : physicsQ));：这行代码使用三元运算符根据选择的主题来选择对应的问题数组。如果选择的是 Biology，则 array 等于 biologyQ；如果选择的是 Chemistry，则 array 等于 chemistryQ；否则 array 等于 physicsQ。
• const lessonSelected = ($('#myTopic').val() == 'Biology' ? $('#myBiology').val() : ($('#myTopic').val() == 'Chemistry' ? $('#myChemistry').val() : $('#myPhysics').val()));：这行代码使用三元运算符根据选择的主题来获取对应的课程。

进一步优化：封装函数

虽然使用三元运算符可以简化代码，但仍然存在一些重复的代码块，例如洗牌和显示问题。可以将这些代码块封装成函数，进一步减少重复。

封装 shuffle 函数：

原代码中已经包含了一个 shuffle 函数，用于对数组进行洗牌。这个函数可以被直接使用，无需修改。

注意事项：

• 确保函数的功能单一，只负责完成特定的任务。
• 为函数添加适当的注释，说明其功能和参数。

总结

通过使用三元运算符和函数，可以有效地减少 JavaScript 代码中的重复，提高代码的可维护性和可读性。在实际开发中，应根据具体情况选择合适的策略，避免过度优化，保持代码的简洁和易懂。

以上就是如何避免在JavaScript中重复编写相似代码：以问答网页为例的详细内容，更多请关注php中文网其它相关文章！