一级目录

二级目录

三级目录

一、背景介绍

写此篇文章为了通过优化前端代码，解决前端代码结构混乱，逻辑不清晰，页面细节问题来帮助大家写出的代码更规范。
项目开发过程中，前端出现以下几类问题：

1、代码结构混乱
2、代码逻辑不清晰
3、页面细节问题

二、问题分析

源码：

<template><top/><div style="position: absolute;top: 10px"><ChangeClass ref="changeClass"/></div><div><div class="select_box"><span class="listType">活动列表:&nbsp;&nbsp;&nbsp;</span><el-select v-model="selectOption" filterable placeholder="请选择将要跳转的活动"   @change="beforPitchOn()"><el-optionv-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-downref="countDown"@finish="timeFinish":time="time"format="mm:ss"timeData="TimeData"@change="change"/></div><div class="doing"><!-- 课间休息时间 --><el-buttontype="primary"roundv-show="break_btn"class="break_time"style="vertical-align: 65%"><!-- <span>课间休息时间</span> --><br/><van-count-downref="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-numberv-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-tooltipcontent="学情展示页按钮"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>

问题1：逻辑边界不清晰，封装意识缺乏问题

问题2：展示效果上的问题

三、解决过程

问题一 代码结构混乱问题解决

1、按照功能模块分类
2、添加对应注释
3、代码对齐

问题二 代码结构混乱问题解决

使用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>

增加代码的可读性。

问题三 展示效果上的细微问题

height: 1.5em;
vertical-align: -0.3em;

四、总结

写的代码是给人看的，完成很重要，但是我们也在追求完美的道路上。