如果在项目中 你总是被老大吐槽你能不能写的优雅一点，别慌 ，看下我这篇文章，希望对你有所帮助
对我们相同业务逻辑的代码进行 抽象 但不要过度抽象
善用 es6 的类继承 抽象公用类，代码后期可复用，无副作用，逻辑单一
1 抽离复合高复用的组件和模块 像我们常见的 分页 loading 文件上传和一些库 像 elementui antd的二次封装 ，以及一些公共类的抽象集成
在这里给大家举个 例子 ， 就不粘贴代码了，如果我们去做一个后台管理系统，
那么我们就会遇到列表和详情，那么这个时候我们经常会 一个列表写一遍，一个详情在写一遍，里面有很多相似的方法和处理逻辑，这个时候我们就可以定义两个公用的类 一个可以是commonList，一个是commonDetail， 我们把分页 搜索 重置 一些公用的方法抽象出来，再由每个模块去集成 ，支持方法重写，这样会大大提高我们的代码的复用性。面对列表的时候我们经常会用antd 和elememtui的组件进行构建页面，这个时候可以把我们的table进行二次封装，把我们的列和行做成可配置的
<template> <div class="table-page">
<el-table :data="datas" v-loading="ctrlConfig.loading"
:stripe="ctrlConfig.stripe"
:span-method="ctrlConfig.spanMethod" :border="ctrlConfig.border"
@sort-change="handleSortChange" @selection-change="handleSelectionChange" @row-click="rowClick"
:show-overflow-tooltip="true" >
<template slot="empty">
{{ $t('tablePage.emptyData') }}</template>
<!-- select选择框 -->
<el-table-column v-if="ctrlConfig.isHasSelection" type="selection" align="center"></el-table-column> <!--序号 自定义列序号--> <el-table-column v-if="ctrlConfig.isHasNumber" type="index" width="80" align="center" :label="$t('MemberUpdatePoint.table.serialNumber')" >
<template slot-scope="scope"> <span>{{ page.index * page.size + scope.$index + 1 }}</span> </template>
</el-table-column> <!-- //自定义表格 --> <template v-for="(column, i) in ctrlColumns"> <el-table-column :sortable="column.sortable" :key="i" :width="column.width" :prop="column.key" :label="$t(column.i18nKey)" :align="column.align" >
<template slot-scope="scope"> <slot v-if="column.isNeedPresentSlot" :name="column.key" :row="scope.row"></slot> <span v-else>{{ scope.row[column.key] }}</span> </template> </el-table-column> </template> <!-- 操作按钮 -->
<el-table-column column-key="operation" v-if="ctrlButtonEvent.events.length" :width="ctrlButtonEvent.width" :align="ctrlButtonEvent.align" :label="$t(ctrlButtonEvent.i18nKey)" class-name="small-padding fixed-width" > <template slot-scope="scope"> <div v-for="(event, index) in ctrlButtonEvent.events" :class="event.classname || 'btn-area-submit-small'" :key="index" :type="event.type" :icon="event.icon" @click.stop="handleButton(event.name, scope.row, index)" :size="event.size" > {{ $t(event.i18nKey) }} </div> </template>
</el-table-column> </el-table>
<el-pagination v-show="total && ctrlConfig.isShowPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" :layout="ctrlConfig.pageLayout" :page-sizes="ctrlConfig.pageSizes" :prev-text="$t(ctrlConfig.preI18nKey)" :next-text="$t(ctrlConfig.nextI18nKey)" :current-page="page.index + 1" :page-size="page.size" :total="total" ></el-pagination>
</div></template>
回头我写一个专门的文章去介绍这一块 用配置的方式去完善你的代码 你会发现你的开发速度越来越快了
2 封装公用的方法类
面对一些公用的处理方法逻辑 我们要减少一种类似的代码去复写多遍，比如有这样一个业务，
我要对详情返回的数据进行null 或者 ‘’ 和 空数组进行验证，那我们要求 只能数据返回的时候的才可以把内容展示出来，那么我们是不是要写一堆的if 判断来渲染页面，这时候我们就可以把方法抽象出来了
/**详情数据及不同的key */
isArrayLength<T, K extends keyof T>(obj: T, key: K) //定义 方法类型
{ if (obj && Object.prototype.hasOwnProperty.call(obj, key)) // 判断有没有这个类型
{ const data = obj[key] //引用
if (Array.isArray(data))
{ return data.length > 0 } //如果是数组 判断数组是否大于0
else { return !!obj[key] } } // 这里是 null undefined string 和number 不包括 对象
return false }
这样我们就可以统一的调用这个方法了
3 当我们学会拆分 公用组件和方法了
那么一些 优雅的写法 我们也用慢慢学会
学会使用es6默认值
写函数es6 默认值 这样我们会减少很多报错
const demo=({a=1,b=0})=>{}
search(param) {return this.post( { action: 'list' }, param ).then((response = { total: 0, datas: [] }) => { return response; }); }
学会使用 map filter find some every 等处理处理方法 这里写一个 find 的例子 回头有详细文章我去介绍
const b = a.find(item => item > 15); // 返回第一个 为符合条件的值
学会使用 set 和 map
我们经常会用set 处理 一些数组去重 的问题 用 map 处理一些复杂的逻辑代码
const a = new Set([1,2,3,4,4,]);
const b = [...a]
a.add(5) //添加
a.delele(4) //删除
console.log (b) // [1,2,3,4]
如果是map 我们可以可以 处理一下 我们两个数组 相互匹配的情况
a=['xiaoming', 'lihua', 'lili'] b=['1.75', '1.80', '1.60']
如果我们相用一个名字查找相对应的身高 就先要在中找到对应的位置，再从b取出对应的身高，Array越长，耗时越长 那么我们可以用map 解决这个问题
var m = new Map([['xiaoming', '1.75’], ['lihua', '1.80'], ['lili', '1.60']]);
m.get('xiaoming') //添加
m.set('xiaocan', '1.97'); //设置
m.delete('xiaocan') // 删除
注意 由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲
减少 if else switch case 的判断 学会使用 || ！ 和 三目表达式 以及 业务枚举
1 const a= b || {}
你可能在代码里 写出来
if(b){a = b}
else{
a= {}
} 那么你就可以这么写了
2 a= !!a !a
如果你在代码里经常会遇到 undefind '' null 0 这种情况 我们既可以统一用!a 或者!!a
这样处理
3 array.isArray 判断是否是个数组
4 三目表达式 代替 if判断
this.items.groupId.value = groupValue ? groupValue.value : '';
5 使用枚举类型代替 if else
this.mapCount = { 申请: queryUnDealCount(), 刷新: searchRecount(), 待审核:queryCountUnApproval() };
调用 一下
this.mapCount[‘申请’] 不用再做判断了
善用异步 promsie async 和 await
if (this.item.value && this.item.value.length > 0) { this.item.value = await Promise.all(this.item.value.map(async(ele) => { ele.modelOptions = await this.Correlation({ sype: 1, Id: ele.sId }, 1); return ele; })); }
回头会分享很多有用的小技巧处理 希望大家可以提出意见并关注
欢迎交流
网友评论