如何避免代码重复：JavaScript 问答网页优化实战

本文旨在解决在JavaScript问答网页开发中，因主题选择导致的代码重复问题。通过采用三元运算符和函数封装，我们将展示如何精简代码，提高可维护性，并为后续扩展提供更灵活的架构。核心在于动态确定数据源和选择项，从而避免为每个主题编写相似的代码块。

代码重复的危害与解决思路

在开发问答网页时，针对不同的主题（如生物、化学、物理）重复编写几乎相同的代码是常见的问题。 这种做法不仅增加了代码量，降低了可读性，而且在后期维护和扩展时容易出错。当需要添加新的主题或修改现有逻辑时，必须修改多处代码，增加了维护成本和风险。

解决这个问题的核心在于抽象出重复的逻辑，并使其能够根据不同的主题动态地调整行为。常用的方法包括：

• 使用三元运算符： 根据主题动态选择数据源（例如，问题数组）和选择的课程。
• 函数封装： 将重复的代码块封装成函数，通过传递参数来实现不同的行为。
• 数据驱动： 将主题、课程和问题数据存储在统一的数据结构中，通过配置来驱动页面的行为。

优化后的代码实现

以下代码展示了如何使用三元运算符来简化主题选择逻辑，从而减少代码重复。

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

$(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));
const lessonSelected = ($('#myTopic').val() == 'Biology' ? $('#myBiology').val() : ($('#myTopic').val() == 'Chemistry' ? $('#myChemistry').val() : $('#myPhysics').val()));

这里使用三元运算符根据用户选择的主题动态地选择对应的数据源 (biologyQ, chemistryQ, physicsQ) 和课程选择器 (#myBiology, #myChemistry, #myPhysics)。 这样，原本需要为每个主题编写的 if...else if...else 结构被简化为一行代码，大大提高了代码的可读性和可维护性。

进一步优化：函数封装

虽然使用三元运算符可以简化代码，但如果逻辑更加复杂，或者需要在多个地方重复使用相同的逻辑，那么将代码封装成函数会更加有效。

例如，可以将根据主题获取问题数组和课程选择器的逻辑封装成一个函数：

function getTopicData(topic) {
  switch (topic) {
    case 'Biology':
      return { array: biologyQ, lessonSelector: '#myBiology' };
    case 'Chemistry':
      return { array: chemistryQ, lessonSelector: '#myChemistry' };
    case 'Physics':
      return { array: physicsQ, lessonSelector: '#myPhysics' };
    default:
      return { array: [], lessonSelector: '' };
  }
}

然后，在事件处理函数中使用这个函数：

$(document).ready(function(){
    $('.go-btn').on('click',function() {
        const topic = $('#myTopic').val();
        const topicData = getTopicData(topic);
        var array = topicData.array;
        const lessonSelected = $(topicData.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[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();
        }
    });
});

总结与注意事项

通过使用三元运算符和函数封装，我们可以有效地减少 JavaScript 问答网页开发中的代码重复，提高代码的可读性和可维护性。

注意事项：

• 在选择使用三元运算符还是函数封装时，需要根据实际情况进行权衡。 如果逻辑比较简单，可以使用三元运算符； 如果逻辑比较复杂，或者需要在多个地方重复使用，那么应该使用函数封装。
• 在设计数据结构时，应该尽量保持统一，方便后续的扩展和维护。
• 在编写代码时，应该注意代码的可读性，添加适当的注释，方便其他人理解和维护代码。

通过遵循这些原则，我们可以编写出高质量、易于维护的 JavaScript 代码，从而提高开发效率，降低维护成本。

以上就是如何避免代码重复：JavaScript 问答网页优化实战的详细内容，更多请关注php中文网其它相关文章！