本文旨在解决在开发问答网页时，因主题增多而导致代码重复的问题。通过使用三元运算符，将原本针对不同主题（如生物、化学、物理）的相似代码逻辑进行整合，从而实现代码的复用，减少冗余，提高开发效率，并使代码更易于维护和扩展。
代码复用的重要性
在软件开发中，代码复用是一项至关重要的实践。它不仅可以减少开发时间，还能提高代码质量，降低维护成本。当面临相似但略有不同的任务时，避免简单地复制粘贴代码，而是应该寻找通用的解决方案，将重复的代码抽象成可复用的模块或函数。
问题分析
在提供的代码中，可以观察到，对于不同的主题（Biology, Chemistry, Physics），其处理逻辑基本相同：
- 根据用户选择的主题，确定使用哪个问题数组（biologyQ, chemistryQ, physicsQ）。
- 根据用户选择的课程，筛选出对应的问题。
- 将筛选后的问题数组进行随机排序。
- 将排序后的问题显示在页面上。
- 根据用户选择的数量，显示相应数量的问题。
唯一的区别在于，不同的主题对应不同的数组和课程选择器。因此，可以将这些差异抽象出来，使用更通用的方式来处理。
立即学习“Java免费学习笔记（深入）”；
解决方案：使用三元运算符简化代码
三元运算符是一种简洁的条件判断方式，可以根据条件选择不同的值。我们可以利用三元运算符，将不同主题对应的数组和课程选择器进行动态选择。
以下是修改后的 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 语句来提高代码的可读性。
- 在进行代码复用时，要确保复用的代码适用于不同的场景。如果不同的场景有较大的差异，可能需要对复用的代码进行修改或扩展.
- 确保用户选择的主题和课程是有效的，可以添加错误处理机制，避免出现异常情况。
总结
通过使用三元运算符，我们可以有效地减少代码重复，提高开发效率，并使代码更易于维护和扩展。在实际开发中，应该积极寻找代码复用的机会，并选择合适的工具和技术来实现代码复用。最终目标是编写出高质量、可维护的代码。
