28个案例问题分析---014课程推送页面逻辑整理--vue

╰半橙微兮° 2023-10-09 15:48 68阅读 0赞

#### 前端逻辑代码 ####

*  一：背景介绍
 *  二：问题分析
 *   *  2.1 代码结构混乱问题
     *   *  2.1.1 Template部分
     *  2.2 逻辑边界不清晰，封装意识缺乏问题
     *  2.3 展示效果上的细微问题
 *  三：解决过程
 *   *  3.1 问题一 代码结构混乱问题解决
     *  3.2 问题二 逻辑边界不清晰
     *  3.3 问题三 展示效果上的细微问题
 *  四：总结

## 一：背景介绍 ##

项目开发过程中，前端出现以下几类问题：

*  代码结构混乱
 *  代码逻辑不清晰
 *  页面细节问题

## 二：问题分析 ##

### 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>
                
            </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>
                  
              </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%"
       >
            
            <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>
                      
                      <el-input-number
                        v-model="readsValue"
                        :min="1"
                        size="small"
                        controls-position="right"
                        @change="handleChange"
                      />分钟
                    </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">
        
      </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>
                  
              </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>
      
    </template>

这部分代码为我们推课功能的前端代码，词典吗使用的vue进行的编写，分析此部分代码，主要存在以下三个问题。

1.  样式混乱：在模板中，有一些元素使用了内联样式，这种做法通常不推荐，因为它会导致样式与结构混合在一起，使代码难以维护和理解。推荐将样式定义在CSS文件中，然后通过类名应用到相应的元素上。
2.  重复的条件判断：在多个地方都有类似的条件判断，如v-if和v-show。这可能会导致代码冗余和逻辑重复。建议将这些条件提取到计算属性或方法中，以减少重复的代码。
3.  模板结构问题：代码中存在一些不合理的模板结构，如多余的`<div>、<br>`标签和嵌套结构，这可能导致页面布局混乱和冗余的代码。

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

![在这里插入图片描述][a542e18112cc4b94bfd2f97d7c82b54b.png]  
这里使用的时候，用了三个v-if，使用的却是同一个变量。虽然说这样写在功能上没有问题，但是却无法体现，这几个部分的相关性，实现功能固然重要，但是代码的可读性也必须考虑。

### 2.3 展示效果上的细微问题 ###

![在这里插入图片描述][145f4ce3be1840ebab4bdbaeec1b59c3.png]

前面添加的一个推课状态的小标识，没有对齐。其可能造成以下问题：

1.  界面不美观：图标未对齐会破坏页面的整体美观度。用户通常会对页面的外观有一定的期望，不对齐的图标可能会给用户留下不专业或不精细的印象，降低用户对产品的信任和满意度。
2.  用户体验下降：未对齐的图标可能会给用户造成困惑或误导，导致用户操作时出现问题。例如，如果一个按钮的图标偏离了预期的位置，用户可能会错过点击该按钮的机会，从而无法执行预期的操作。这可能会降低用户的效率和便利性，并且可能导致用户对产品的使用体验不满意。
3.  可用性问题：图标未对齐可能会对页面的可用性产生影响。例如，如果某个图标与相关的文本或其他元素不对齐，用户可能无法正确理解图标的含义或作用。这可能会导致用户的误解或困惑，从而降低用户对页面功能的理解和使用。
4.  跨浏览器兼容性问题：某些浏览器可能在处理图标对齐时存在微小的差异。这意味着在不同浏览器或不同设备上，图标的对齐可能会有所不同。这可能会导致在某些情况下图标未对齐的问题更加突出，进一步影响用户体验和界面的一致性。

因此，为了确保良好的用户体验和页面质量，对齐图标是很重要的。开发人员应该在前端开发过程中注意细节，使用合适的布局和样式技术，确保图标和其他元素的对齐，以提供一致、美观且易于使用的界面。

## 三：解决过程 ##

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

1.  按照功能模块分类
2.  添加对应注释
3.  代码对齐  
    ![在这里插入图片描述][05fe6b3740e0458eb9e1eb165cfdff29.png]

### 3.2 问题二 逻辑边界不清晰 ###

1.  使用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;

但是通用的解决办法有：

*  使用统一的样式库：确保在整个应用程序中使用统一的样式库，例如CSS框架或组件库。这将有助于保持一致的布局和对齐规则，减少差异性。
 *  使用网格系统：使用网格系统可以帮助实现页面元素的对齐。将页面划分为网格，并将元素对齐到网格线上，以确保一致的对齐效果。
 *  使用合适的布局技术：使用合适的布局技术（如Flexbox或Grid）可以更精确地控制元素的位置和对齐方式。这些技术提供了灵活的布局选项，可确保元素在各种屏幕大小和设备上都能正确对齐。
 *  注意像素级别的细节：在编写CSS样式时，要注意像素级别的细节。使用准确的尺寸和位置数值，避免使用近似值或四舍五入的结果，以确保元素的对齐准确无误。
 *  跨浏览器测试：进行跨浏览器测试，确保页面在不同浏览器和设备上都能正确对齐。不同浏览器可能对样式和布局的解释存在微小差异，因此测试是确保一致对齐的重要步骤。
 *  使用调试工具：使用浏览器的开发者工具或调试工具来检查元素的对齐情况。可以查看元素的盒模型、边距、填充等属性，以及应用的样式规则，从而找到导致对齐问题的原因，并进行相应的调整。

## 四：总结 ##

我们的博客总结了一个前端逻辑代码的问题，并提出了解决方案。主要问题包括代码结构混乱、代码逻辑不清晰和页面细节问题。为了解决这些问题，进行了以下工作：

1.  对代码结构进行了整理和分类，添加了相应的注释，并进行了代码对齐，以提高代码的可读性。
2.  对逻辑边界不清晰的部分进行了重构，使用了更清晰的条件判断方式，减少了重复的代码。
3.  修复了展示效果上的细微问题，通过对标签进行对齐，提升了页面的美观度。

通过以上的改进措施，可以使代码更加清晰、易读和美观，提高开发效率和代码质量。

[a542e18112cc4b94bfd2f97d7c82b54b.png]: https://img-blog.csdnimg.cn/a542e18112cc4b94bfd2f97d7c82b54b.png
[145f4ce3be1840ebab4bdbaeec1b59c3.png]: https://img-blog.csdnimg.cn/145f4ce3be1840ebab4bdbaeec1b59c3.png
[05fe6b3740e0458eb9e1eb165cfdff29.png]: https://img-blog.csdnimg.cn/05fe6b3740e0458eb9e1eb165cfdff29.png