JavaScript代码复用：避免重复编写问答网页逻辑

本文旨在解决在开发问答网页时，因主题增多而导致代码重复的问题。通过使用三元运算符，将原本针对不同主题（如生物、化学、物理）的相似代码逻辑进行整合，从而实现代码的复用，减少冗余，提高开发效率，并使代码更易于维护和扩展。

代码复用的重要性

在软件开发中，代码复用是一项至关重要的实践。它不仅可以减少开发时间，还能提高代码质量，降低维护成本。当面临相似但略有不同的任务时，避免简单地复制粘贴代码，而是应该寻找通用的解决方案，将重复的代码抽象成可复用的模块或函数。

问题分析

在提供的代码中，可以观察到，对于不同的主题（Biology, Chemistry, Physics），其处理逻辑基本相同：

1. 根据用户选择的主题，确定使用哪个问题数组（biologyQ, chemistryQ, physicsQ）。
2. 根据用户选择的课程，筛选出对应的问题。
3. 将筛选后的问题数组进行随机排序。
4. 将排序后的问题显示在页面上。
5. 根据用户选择的数量，显示相应数量的问题。

唯一的区别在于，不同的主题对应不同的数组和课程选择器。因此，可以将这些差异抽象出来，使用更通用的方式来处理。

解决方案：使用三元运算符简化代码

三元运算符是一种简洁的条件判断方式，可以根据条件选择不同的值。我们可以利用三元运算符，将不同主题对应的数组和课程选择器进行动态选择。

以下是修改后的 JavaScript 代码：

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

        var topic = $('#myTopic').val();
        var array = (topic == 'Biology' ? biologyQ : (topic == 'Chemistry' ? chemistryQ : physicsQ));
        var lessonSelector = (topic == 'Biology' ? $('#myBiology') : (topic == 'Chemistry' ? $('#myChemistry') : $('#myPhysics')));
        const lessonSelected = lessonSelector.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 topic = $('#myTopic').val();：获取用户选择的主题。
• var array = (topic == 'Biology' ? biologyQ : (topic == 'Chemistry' ? chemistryQ : physicsQ));：根据用户选择的主题，动态选择对应的问题数组。如果主题是 'Biology'，则使用 biologyQ，否则如果主题是 'Chemistry'，则使用 chemistryQ，否则使用 physicsQ。
• var lessonSelector = (topic == 'Biology' ? $('#myBiology') : (topic == 'Chemistry' ? $('#myChemistry') : $('#myPhysics')));：根据用户选择的主题，动态选择对应的课程选择器。
• const lessonSelected = lessonSelector.val();: 获取用户选择的课程。

通过使用三元运算符，将原本需要重复编写的条件判断逻辑简化为一行代码，大大减少了代码量，提高了代码的可读性和可维护性。

进一步优化

除了使用三元运算符外，还可以考虑以下优化方案：

• 将问题数据存储为统一格式： 可以将 biologyQ, chemistryQ, physicsQ 等数组合并为一个数组，并添加一个 topic 字段来区分不同的主题。这样可以进一步简化代码，并方便后续扩展。
• 使用函数封装通用逻辑： 可以将筛选、排序和显示问题的逻辑封装成独立的函数，并在不同的主题中使用这些函数。
• 使用模板引擎： 如果需要更灵活地控制问题的显示方式，可以考虑使用模板引擎，例如 Handlebars 或 Mustache。

注意事项

• 在使用三元运算符时，要注意代码的可读性。如果条件过于复杂，可以考虑使用 if...else 语句来提高代码的可读性。
• 在进行代码复用时，要确保复用的代码适用于不同的场景。如果不同的场景有较大的差异，可能需要对复用的代码进行修改或扩展.
• 确保用户选择的主题和课程是有效的，可以添加错误处理机制，避免出现异常情况。

总结

通过使用三元运算符，我们可以有效地减少代码重复，提高开发效率，并使代码更易于维护和扩展。在实际开发中，应该积极寻找代码复用的机会，并选择合适的工具和技术来实现代码复用。最终目标是编写出高质量、可维护的代码。

以上是JavaScript代码复用：避免重复编写问答网页逻辑的详细内容。更多信息请关注PHP中文网其他相关文章！