JavaScript代码复用：避免重复编写问答网页逻辑-小浪学习网

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

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

代码复用的重要性

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

问题分析

在提供的代码中，可以观察到，对于不同的主题（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。