前端逻辑代码
四：总结
一：背景介绍
项目开发过程中，前端出现以下几类问题：
代码结构混乱
代码逻辑不清晰
页面细节问题
二：问题分析
2.1 代码结构混乱问题
2.1.1 Template部分
本例用的vue进行的前端代码部分编写，主要分为 Template、script、css三个部分。这里仅展示Template部分代码，无需关注功能，只在宏观上观察格式即可。
<template> <top/> <div style="position: absolute;top: 10px"> <ChangeClass ref="changeClass"/> </div> <div> <div class="select_box"> <span class="listType">活动列表: </span> <el-select v-model="selectOption" filterable placeholder="请选择将要跳转的活动" @change="beforPitchOn()"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item"> </el-option> </el-select> <!-- <el-button type="primary" plain style=" margin-left: 10px;" @click="toPersonal">切换为个性化学习</el-button> --> </div> </div> <br> <div class="fldiv100" id="pushActive"> <div style="float: left" v-show="preparedActivitiesBtnIsShow"> <el-popover placement="bottom" trigger="hover" width="auto" v-show="preparedActivitiesBtnIsShow"> <div v-show="popoverIsShow"> <div v-if="preparedActivitiesIsShow">点击章节名称即可变成待执行的活动</div> <div v-if="preparedActivitiesIsShow" style="overflow-y: auto;max-height: 270px"> <div v-for="item in preparedActivities" :key="item.chapter_id"> <el-button type="text" @click="updateNextActive(item)" >{{item.chapter_title}}</el-button> </div> </div> <div v-if="!preparedActivitiesIsShow"> {{preparedActivitiesTitle}} </div> </div> <div v-show="!popoverIsShow">请在倒数10秒前使用此功能</div> <template #reference> <el-button type="text" v-show="preparedActivitiesBtnIsShow">待执行活动颗粒</el-button> </template> </el-popover> </div> <div class="previous_activity"> <el-icon size="23px" color="#409EFF"> <CircleCheck /> </el-icon> <el-popover placement="top-start" trigger="hover" width="auto"> <div v-if="completedActiveIsShow">已经结束的三个章节如下：</div> <div v-if="completedActiveIsShow"> <div v-for="item in completedActive" :key="item.chapter_id" > <el-button type="text" size="small" @click="HoverClick(item.chapter_id)" > {{item.chapter_title}} </el-button> </div> <!-- <button size="small" style="margin-left:70%" @click="moreCompletedActive" v-show="completed_btn">更多</button> --> </div> <div v-if="!completedActiveIsShow"> 没有进行过的课程呢~ </div> <template #reference> <span @click="previousActivity" title="点击进行此活动">{{ this.previous_activity }}</span> </template> </el-popover> </div> <div class="remain_time" title="当前活动剩余时间"> <van-count-down ref="countDown" @finish="timeFinish" :time="time" format="mm:ss" timeData="TimeData" @change="change" /> </div> <div class="doing"> <!-- 课间休息时间 --> <el-button type="primary" round v-show="break_btn" class="break_time" style="vertical-align: 65%" > <!-- <span>课间休息时间</span> --> <br/> <van-count-down ref="break" @finish="breakFinish" :time="break_time" format="mm:ss" timeData="BreakTimeData" @change="breakchange" /> <span>分钟后继续开始</span> </el-button> <el-icon size="48px" color="#409EFF" v-if="show_pause" style="vertical-align: -15%" @click="pause"> <!-- 设置课间休息时长 --> <el-popover placement="top-start" trigger="hover" @hide="clearReadsValue" > <template #reference> <VideoPlay /> </template> <span v-if="!dialogStatus"> <label>请选择课程暂停时长</label> <el-radio-group v-model="reads"> <el-radio :label="300000" @change="setTimeData">5分钟</el-radio> <el-radio :label="600000" @change="setTimeData">10分钟</el-radio> <el-radio :label="1" @click="CustomTime"> 自定义 </el-radio> <!-- <input type="text" size="2" v-model="readsValue" maxlength="2" /> 分钟 --> <el-input-number v-model="readsValue" :min="1" size="small" controls-position="right" @change="handleChange" />分钟 </el-radio-group> <!-- <el-radio-group v-model="readsValue"> <el-radio :label="readsValue"> 自定义 <input type="text" size="2" v-model="readsValue" maxlength="2" @change="CustomTime" /> 分钟 </el-radio> </el-radio-group> --> </span> <label v-if="dialogStatus">请选择课程暂停时长</label> </el-popover> </el-icon> <el-icon size="48px" color="#409EFF" v-if="show_play" style="vertical-align: -15%" @click="play"> <VideoPause /> </el-icon> <!-- 正在进行章节鼠标悬浮后的“开始活动”“结束活动”按钮 --> <el-popover placement="top-end" trigger="hover"> <el-button type="text" style="font-weight: bold;font-size: 18px" @click="synncCourseStatus" >结束课程</el-button> <template #reference> <span title="当前正在进行的活动" >{{ this.activity_display }}</span> </template> </el-popover> <div> <el-tooltip content="学情展示页按钮" raw-content > <el-icon :size="30"> <Histogram :color="studyInfoColor" @click="studyInfo" /> </el-icon> </el-tooltip> </div> </div> <div class="config"> <!-- <el-button type="primary" color="red" round>配置定时推送活动</el-button> --> </div> <div class="next_activity"> <img alt :src="imgWait" style="width: 25px; height: 25px" /> <el-popover placement="bottom" trigger="hover" width="auto"> <div v-if="nextActiveIsShow">即将进行的三个章节：</div> <div v-if="nextActiveIsShow"> <div v-for="item in nextActive" :key="item.chapter_id" > <el-button type="text" size="small" @click="HoverClick(item.chapter_id)" > {{item.chapter_title}} </el-button> </div> <!-- <button size="small" style="margin-left:70%" @click="moreNextActive" v-show="next_btn">更多</button> --> </div> <div v-if="!nextActiveIsShow"> 课程已经结束了~ </div> <template #reference> <span @click="nextActivity" title="点击进行此活动">{{ this.next_activity }}</span> </template> </el-popover> </div> </div> <br> <br> <br> <div v-show="studyInfoIsShow" class="frdiv"> <studyInfo ref="studyInfo"></studyInfo> </div> <!-- <WebSocket ref="webref"></WebSocket> --> </template>
这部分代码为我们推课功能的前端代码，词典吗使用的vue进行的编写，分析此部分代码，主要存在以下三个问题。
1.样式混乱：在模板中，有一些元素使用了内联样式，这种做法通常不推荐，因为它会导致样式与结构混合在一起，使代码难以维护和理解。推荐将样式定义在CSS文件中，然后通过类名应用到相应的元素上。
2.重复的条件判断：在多个地方都有类似的条件判断，如v-if和v-show。这可能会导致代码冗余和逻辑重复。建议将这些条件提取到计算属性或方法中，以减少重复的代码。
3.模板结构问题：代码中存在一些不合理的模板结构，如多余的<div>、<br>标签和嵌套结构，这可能导致页面布局混乱和冗余的代码。
2.2 逻辑边界不清晰，封装意识缺乏问题
这里使用的时候，用了三个v-if，使用的却是同一个变量。虽然说这样写在功能上没有问题，但是却无法体现，这几个部分的相关性，实现功能固然重要，但是代码的可读性也必须考虑。
2.3 展示效果上的细微问题
前面添加的一个推课状态的小标识，没有对齐。其可能造成以下问题：
界面不美观：图标未对齐会破坏页面的整体美观度。用户通常会对页面的外观有一定的期望，不对齐的图标可能会给用户留下不专业或不精细的印象，降低用户对产品的信任和满意度。
用户体验下降：未对齐的图标可能会给用户造成困惑或误导，导致用户操作时出现问题。例如，如果一个按钮的图标偏离了预期的位置，用户可能会错过点击该按钮的机会，从而无法执行预期的操作。这可能会降低用户的效率和便利性，并且可能导致用户对产品的使用体验不满意。
可用性问题：图标未对齐可能会对页面的可用性产生影响。例如，如果某个图标与相关的文本或其他元素不对齐，用户可能无法正确理解图标的含义或作用。这可能会导致用户的误解或困惑，从而降低用户对页面功能的理解和使用。
跨浏览器兼容性问题：某些浏览器可能在处理图标对齐时存在微小的差异。这意味着在不同浏览器或不同设备上，图标的对齐可能会有所不同。这可能会导致在某些情况下图标未对齐的问题更加突出，进一步影响用户体验和界面的一致性。
因此，为了确保良好的用户体验和页面质量，对齐图标是很重要的。开发人员应该在前端开发过程中注意细节，使用合适的布局和样式技术，确保图标和其他元素的对齐，以提供一致、美观且易于使用的界面。
三：解决过程
3.1 问题一 代码结构混乱问题解决
按照功能模块分类
添加对应注释
代码对齐
3.2 问题二 逻辑边界不清晰
使用v-if和v-else进行逻辑判断，将上面的两个逻辑判断合并
<div v-if="nextActiveIsShow"> 即将进行的三个章节 <div v-for ="item in nextActive" :key="item.chapter_id"> <el-button type="text" size ="small" @click="HoverClick(item.chapter_id)"> {{item.chapter_title}} </el-button> </div> <div> <div v-else> 课程已经结束了~ </div>
不使用多个if造成代码难读的问题。
3.3 问题三 展示效果上的细微问题
本例中将标签对齐就可以解决美观的问题
height: 1.5em; vertical-align: -0.3em;
但是通用的解决办法有：
1.使用统一的样式库：确保在整个应用程序中使用统一的样式库，例如CSS框架或组件库。这将有助于保持一致的布局和对齐规则，减少差异性。
2.使用网格系统：使用网格系统可以帮助实现页面元素的对齐。将页面划分为网格，并将元素对齐到网格线上，以确保一致的对齐效果。
3.使用合适的布局技术：使用合适的布局技术（如Flexbox或Grid）可以更精确地控制元素的位置和对齐方式。这些技术提供了灵活的布局选项，可确保元素在各种屏幕大小和设备上都能正确对齐。
4.注意像素级别的细节：在编写CSS样式时，要注意像素级别的细节。使用准确的尺寸和位置数值，避免使用近似值或四舍五入的结果，以确保元素的对齐准确无误。
5.跨浏览器测试：进行跨浏览器测试，确保页面在不同浏览器和设备上都能正确对齐。不同浏览器可能对样式和布局的解释存在微小差异，因此测试是确保一致对齐的重要步骤。
6.使用调试工具：使用浏览器的开发者工具或调试工具来检查元素的对齐情况。可以查看元素的盒模型、边距、填充等属性，以及应用的样式规则，从而找到导致对齐问题的原因，并进行相应的调整。
四：总结
我们的博客总结了一个前端逻辑代码的问题，并提出了解决方案。主要问题包括代码结构混乱、代码逻辑不清晰和页面细节问题。为了解决这些问题，进行了以下工作：
对代码结构进行了整理和分类，添加了相应的注释，并进行了代码对齐，以提高代码的可读性。
对逻辑边界不清晰的部分进行了重构，使用了更清晰的条件判断方式，减少了重复的代码。
修复了展示效果上的细微问题，通过对标签进行对齐，提升了页面的美观度。
通过以上的改进措施，可以使代码更加清晰、易读和美观，提高开发效率和代码质量。
