代码健壮性
Posted 单身girl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了代码健壮性相关的知识，希望对你有一定的参考价值。
前言
代码健壮性：
处理异常的代码.首要追求健壮性.
就是程序必须能从异常中自我恢复.由于代码多数时间跑的是"正常"逻辑,少数情况下才不得不处理"异常",所以"异常"处理的代码中,首要任务是健壮,跑不死,而高效性则是次要的.。
温故知新提示：书到用时方恨少，老司机高速你 收藏一份！ 开发前用五到十分钟看一遍会避免很多bug的产生
一、对字段进行处理： 应该先进行判空 如果某个字段为null可能会导致整个页面不显示可以加个默认值如：
代码如下（示例）：
// html中
span.text {{poptitle || ''}}
// js中
const params = {
string: this.str || '',
Number: this.num || null
// 设定默认值最好不要用undefined
}
params.字段 = canshu === 'accessPoint' ? '接入点位' : (canshu === 'alarmCount' ? '报警次数' : (canshu === 'resolveAlarm' ? '解决隐患' : '巡检次数'))
// 打点工具中
vkTrack.trigger('***', {
content_id: vobj.id + '',
content_title: vobj.activityType + '',
message: vobj.tagName || '',
parent_id: parentId,
content: '我'
})
2.因为没有监听到数据改变所以视图没有更新
代码如下（示例）：
// 需要 this.$set(）等方法添加强制刷新页面
template(slot="istime" slot-scope="scope")
el-date-picker(
v-model="scope.time"
type="datetimerange"
@change="changeTime"
:default-time="['00:00:00', '23:59:59']"
value-format="timestamp"
// 将中国标准时间转为时间戳
// 设置时间回显
this.$nextTick(() => {
this.$set(this.$refs.formInfo, 'time', nowTime)
this.$refs.formInfo.time = nowTime
})
3.实现小于12px的字体效果
// 重点在这 transform: scale(0.8) 这个代码片段不需要可以略过
.gift-bg
position: relative
background-color: #fff
box-shadow:0px 1px 11px 0px rgba(133,133,133,0.36)
pointer-events: none
&::after
position: absolute
bottom: 6px
left: 0
width: 57px
font-size: 12px
text-align: center
transform: scale(0.8)
animation: words 0.3s linear 0.5s both
content: '免费领取'
4.动态添加类名
<div v-bind:class="{ active: isActive }"></div>
5. 手写柱状图动画效果
mounted() {
// 先建立一个空数组 让柱状图初始值高度为0 延迟一秒以后将请求回来的数据用.fill(target, start, end) 赋值给list 动态添加高度 并且在状态切换的位置用v-if来判断
let data = new Array(this.reportProp.chartData.value.length)
data.fill(0)
this.list = data
this.$nextTick(() => {
setTimeout(() => {
this.list = this.reportProp.chartData.value
}, 1000)
})
思考： 你一定有更好的方法吧 评论发给我好不好呀
6.安装某个依赖安装不上 升级node版本
7. 垂直水平居中
allCenter()
position absolute
top 50%
left 50%
transform: translateX(-50%)
translateY(-50%)
思考： 开发中常用的方法或者组件可以问问看有没有公用的 没有可以自己建立一个
**8.**当阅读代码的时候发现这样的问题
methods: {
// 各种需要起名的地方也要注意常量用大写 起名有意义
getBusPrizeList () {
server.queryOption().then(res => {
if (res.code === 200 && res.data && res.data.sourceList) {
res.data.sourceList.forEach(item => {
// id 7是什么鬼 我要动它怎么办
if (item.id === 7) {
// 不想别人骂你的话 开发中魔鬼数字一定要增加注释
this.$set(this.$refs.formInfo, 'sourceId', item.name)
this.sourceListId = item.id
}})}})}}
思考：魔鬼数字主要影响了代码可读性，读者看到的数字无法理解其含义，从而难以理解程序的意图。当程序中出现的魔鬼数字过多时，代码的可维护性将会急剧下降，代码变得难以修改，并容易引发错误或线上问题。
9. + 号的使用你还记得吗？
可以将字符串转为数字类型 代码可以略过
html
// 此处用于复现不转化出现的bug
template(slot="signTimes" slot-scope="{ row, $index }")
el-input(v-model="row.signTimes" type="number" min=1 step=1 @blur="signTimeBlur(row, $index)" placeholder="请填写累签次数")
js
signTimeBlur (row, index) {
const days = this.nodeTime > 0 ? this.nodeTime : this.dayTime
if (+row.signTimes > days) {
//+row.signTimes可以将row.signTimes转为数字类型
this.$message.error('累计签到天数不得大于' + days + '天')
row.signTimes = ''
return
} else if (+row.signTimes <= 0) {
this.$message.error('累计签到天数不得小于1')
row.signTimes = ''
}
this.generalRuleList.forEach((item, i) => {
if ((index !== i) && +item.signTimes === +row.signTimes) {
this.$message.error('累签天数不可重复')
row.signTimes = ''
}
})
}
思考：你会的东西很多，但是有想过哪个是最简单易懂并且利于性能优化的吗
10. 来个手写的时间处理函数吧 确定不收藏吗？
const H = 3600000
const M = 60000
export default {
filters: {
// 时间戳转 至 YYYY-MM-DD HH:MM:SS
mixinFilterTimeTag2Format (value) {
if (!value) {
return '-'
}
if (typeof value === 'string') {
value = parseInt(value, 10)
}
if (typeof value === 'number') {
const time = new Date(value)
const format = {
year: time.getFullYear(),
month: time.getMonth() + 1,
date: time.getDate(),
hours: time.getHours(),
minutes: time.getMinutes(),
seconds: time.getSeconds()
}
for (const key in format) {
if (format[key] < 10) format[key] = '0' + format[key]
}
return `${format.year}-${format.month}-${format.date} ${format.hours}:${format.minutes}:${format.seconds}`
} else {
return 'NO TIME'
}
},
// 时间戳 至 YYYY-MM-DD 周X
mixinFilterTimeTag2FormatWithDay (value) {
if (!value) {
return '-'
}
if (typeof value === 'string') {
value = parseInt(value, 10)
}
if (typeof value === 'number') {
const time = new Date(value)
const format = {
year: time.getFullYear(),
month: time.getMonth() + 1,
date: time.getDate()
}
for (const key in format) {
if (format[key] < 10) format[key] = '0' + format[key]
}
const day = ['日', '一', '二', '三', '四', '五', '六'][time.getDay()]
return `${format.year}-${format.month}-${format.date} 周${day}`
} else {
return 'NO TIME'
}
},
// 计算时间：**小时*分钟
mixinTimeHourMinutes (value) {
if (!value) return '-'
const timerh = Math.floor(value / H)
const timerm = Math.ceil((value - H * timerh) / M)
if (timerh > 0 && timerm > 0) return `${timerh}小时${timerm}分钟`
if (timerh > 0 && timerm === 0) return `${timerh}小时`
if (timerh === 0 && timerm > 0) return `${timerm}分钟`
}
}
}
思考：公司应该有js代码库可以问一下 没有正好加一下，持续更新建议收藏
11. 使用filter加上文的时间处理函数完成时间转化与展示
template(slot-scope='scope')
el-form(label-position='left', inline)
el-form-item.div(label='创建人')
span {{ scope.row.createBy }}
el-form-item.div(label='创建时间')
span {{ scope.row.createTime | mixinFilterTimeTag2Format }}
el-table-column(label='活动结束时间', sortable="custom",width='140',prop="end_time")
template(slot-scope='scope')
span {{ scope.row.endTime | mixinFilterTimeTag2Format }}
el-table-column(label='更新时间', sortable="custom",width='100',prop="update_time")
template(slot-scope='scope')
span {{ scope.row.updateTime | mixinFilterTimeTag2Format }}
12. 有没有写过垃圾代码
if (params.cpReferralPrizeList.length === 0) { return this.form.prizeId += ''}
// 可以简化为
if (!params.cpReferralPrizeList.length) {
// 可以用es6语法
return ${this.form.prizeId}}
思考： 学过的es6 你有经常用吗 该回顾了
13. 项目中遇到一些场景，只能输入正整数，而且不能携带小数点，例如年龄，物品数量、ID等。el-input只允许输入正整数的校验
<el-input v-model.number="input" class="input-view" placeholder="请输入内容" oninput="value=value.replace(/[^0-9]/g,'')" />
// v-model.number 自动转为数字类型
// οninput="value=value.replace(/[^0-9]/g,'')" 通过正则表达式，限制只能为正数，切不能带小数点
14.文字和单词要考虑到超出是否隐藏或者换行
15.接口401导致频繁跳登陆页 可能接口未配置网关 也可能账号有问题 并非当前环境对应的账号密码 导致登陆不上去
16..替换链接的时候要注意参数是否有变化 携带参数进入页面是否正常 能不能用到 报不报错
17. p标签下的奇数行与偶数行
- p:nth-child(odd){} //奇数行
- p:nth-child(even){} //偶数行
- :last-child最后一个子元素
- :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
- 强制不换行 ： white-space:nowrap;
- display: inline-flex 父元素大小由子元素撑起来
div span:nth-children(3){}选择第三个span
div span:nth-children(-n-2){}选择前面两个
18.适配问题 考虑到内容撑不开盒子大小的时候加个最小高度不然屏幕留白会很丑
总结
看完了有没有深思和自己的总结？
举个例子==
栗子1:
el-form-item.class_name(label="看下面:", prop="reminderTime" v-if="model.obj.id")
//
在模版上使用model.obj.id
可能取不到报错，导致模板解析失败，比如model.obj === undefiend model.obj.id就会thorw new Error()
栗子2:
params.reminderTime = (params.reminderTime === null || (params.reminderTime[0] === null && params.reminderTime[1] === null)) ? [] : params.reminderTime
// 有可能是undefined么? 其实直接判断真假就好避免报错
//以下是优化后
params.reminderTime = (!params.reminderTime || (!params.reminderTime?.[0] && !params.reminderTime?.[1])) ? [] : params.reminderTime
栗子3: 连续的三目运算操作可能写的时候方便，但是看的时候会不清晰，建议多条件操作的时候使用switch
return serviceType === 1 ? '0元领课' : serviceType === 2 ? '付费售卖' : '拼团'
// 以下是优化后的整体代码可以略过主要实现方式就是使用了switch进行判断
function serviceTypeSwitch (serviceType) {
switch (serviceType) {
case 1:
return '就'
case 2:
return '是'
case 3:
return '我咯'
}
}
export const getTableConfig = [
{
label: '场景',
prop: 'serviceType',
align: 'center',
customRender: (serviceType, value) => {
return serviceTypeSwitch(serviceType)
}
}, {
label: '展示渠道',
prop: 'groupType',
align: 'center',
// 简单的使用三木运算符
customRender: (groupType, value) => {
return groupType === 1 ? 'H5' : '小程序'
}
}
]
**整理不易 希望多多点赞互动或者关注一下，不然用的时候你确定你可以立刻找到吗？ 新人小白可以看看我的另一篇文章～爱你**
以上是关于代码健壮性的主要内容，如果未能解决你的问题，请参考以下文章