辉玲建设集团有限公司网站,常熟建设局网站,东昌府网站制作,学做烘焙的网站一#xff1a;背景介绍
项目开发过程中#xff0c;前端出现以下几类问题#xff1a;
代码结构混乱代码逻辑不清晰页面细节问题
二#xff1a;问题分析
代码结构混乱问题
templatetop/div styleposition: absolute;top: 10pxC…一背景介绍
项目开发过程中前端出现以下几类问题
代码结构混乱代码逻辑不清晰页面细节问题
二问题分析
代码结构混乱问题
templatetop/div styleposition: absolute;top: 10pxChangeClass refchangeClass//divdivdiv classselect_boxspan classlistType活动列表:nbsp;nbsp;nbsp;/spanel-select v-modelselectOption filterable placeholder请选择将要跳转的活动 changebeforPitchOn()el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem/el-option/el-select!-- el-button typeprimary plain style margin-left: 10px; clicktoPersonal切换为个性化学习/el-button --/div/divbrdiv classfldiv100 idpushActivediv stylefloat: left v-showpreparedActivitiesBtnIsShowel-popover placementbottom triggerhover widthauto v-showpreparedActivitiesBtnIsShowdiv v-showpopoverIsShowdiv v-ifpreparedActivitiesIsShow点击章节名称即可变成待执行的活动/divdiv v-ifpreparedActivitiesIsShow styleoverflow-y: auto;max-height: 270pxdiv v-foritem in preparedActivities :keyitem.chapter_idel-button typetext clickupdateNextActive(item) {{item.chapter_title}}/el-button/div/divdiv v-if!preparedActivitiesIsShow{{preparedActivitiesTitle}}/div/divdiv v-show!popoverIsShow请在倒数10秒前使用此功能/divtemplate #referenceel-button typetext v-showpreparedActivitiesBtnIsShow待执行活动颗粒/el-button/template/el-popover/divdiv classprevious_activityel-icon size23px color#409EFFCircleCheck //el-iconel-popover placementtop-start triggerhover widthautodiv v-ifcompletedActiveIsShow已经结束的三个章节如下/divdiv v-ifcompletedActiveIsShowdiv v-foritem in completedActive :keyitem.chapter_id el-button typetext sizesmall clickHoverClick(item.chapter_id) {{item.chapter_title}}/el-button/div!-- button sizesmall stylemargin-left:70% clickmoreCompletedActive v-showcompleted_btn更多/button --/divdiv v-if!completedActiveIsShow没有进行过的课程呢~/divtemplate #referencespan clickpreviousActivity title点击进行此活动{{ this.previous_activity }}/span/template/el-popover/divdiv classremain_time title当前活动剩余时间van-count-downrefcountDownfinishtimeFinish:timetimeformatmm:sstimeDataTimeDatachangechange//divdiv classdoing!-- 课间休息时间 --el-buttontypeprimaryroundv-showbreak_btnclassbreak_timestylevertical-align: 65%!-- span课间休息时间/span --br/van-count-downrefbreakfinishbreakFinish:timebreak_timeformatmm:sstimeDataBreakTimeDatachangebreakchange/span分钟后继续开始/span/el-buttonel-icon size48px color#409EFF v-ifshow_pause stylevertical-align: -15% clickpause!-- 设置课间休息时长 --el-popover placementtop-start triggerhover hideclearReadsValue template #referenceVideoPlay //templatespan v-if!dialogStatuslabel请选择课程暂停时长/labelel-radio-group v-modelreadsel-radio :label300000 changesetTimeData5分钟/el-radioel-radio :label600000 changesetTimeData10分钟/el-radioel-radio :label1 clickCustomTime自定义/el-radio!-- input typetext size2 v-modelreadsValue maxlength2 / 分钟 --el-input-numberv-modelreadsValue:min1sizesmallcontrols-positionrightchangehandleChange/分钟/el-radio-group!-- el-radio-group v-modelreadsValueel-radio :labelreadsValue自定义input typetext size2 v-modelreadsValue maxlength2 changeCustomTime / 分钟/el-radio/el-radio-group --/spanlabel v-ifdialogStatus请选择课程暂停时长/label/el-popover/el-iconel-icon size48px color#409EFF v-ifshow_play stylevertical-align: -15% clickplayVideoPause //el-icon!-- 正在进行章节鼠标悬浮后的“开始活动”“结束活动”按钮 --el-popover placementtop-end triggerhoverel-button typetext stylefont-weight: bold;font-size: 18px clicksynncCourseStatus 结束课程/el-buttontemplate #referencespan title当前正在进行的活动 {{ this.activity_display }}/span/template/el-popoverdivel-tooltipcontent学情展示页按钮raw-contentel-icon :size30Histogram :colorstudyInfoColor clickstudyInfo //el-icon/el-tooltip/div/divdiv classconfig!-- el-button typeprimary colorred round配置定时推送活动/el-button --/divdiv classnext_activityimg alt :srcimgWait stylewidth: 25px; height: 25px /el-popover placementbottom triggerhover widthautodiv v-ifnextActiveIsShow即将进行的三个章节/divdiv v-ifnextActiveIsShowdiv v-foritem in nextActive :keyitem.chapter_id el-button typetext sizesmall clickHoverClick(item.chapter_id) {{item.chapter_title}}/el-button/div!-- button sizesmall stylemargin-left:70% clickmoreNextActive v-shownext_btn更多/button --/divdiv v-if!nextActiveIsShow课程已经结束了~/divtemplate #referencespan clicknextActivity title点击进行此活动{{ this.next_activity }}/span/template/el-popover/div/divbrbrbrdiv v-showstudyInfoIsShow classfrdivstudyInfo refstudyInfo/studyInfo/div!-- WebSocket refwebref/WebSocket --
/template
代码逻辑混乱没有封装的意识 使用了很多换行标签做格式
逻辑边界不清晰封装意识缺乏问题 这里使用的时候用了三个v-if使用的却是同一个变量。虽然说这样写在功能上没有问题但是却无法体现这几个部分的相关性实现功能固然重要但是代码的可读性也必须考虑。
展示效果上的细微问题 前面添加的一个推课状态的小标识没有对齐。虽然对功能没有影响但是效果很差很不美观。
三解决过程
问题一 代码结构混乱问题解决
按照功能模块分类添加对应注释代码对齐
问题二 逻辑边界不清晰
使用v-if和v-else进行逻辑判断将上面的两个逻辑判断合并
div v-ifnextActiveIsShow 即将进行的三个章节div v-for item in nextActive :keyitem.chapter_idel-button typetext size small clickHoverClick(item.chapter_id){{item.chapter_title}}/el-button/div
div
div v-else课程已经结束了~
/div不使用多个if造成代码难读的问题。
问题三 展示效果上的细微问题
将标签对齐就可以解决美观的问题
height: 1.5em;
vertical-align: -0.3em;四总结
完成大于完美但是也要追求完美。
