本文旨在解决在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 代码，从而提高开发效率，降低维护成本。
