If you are constantly being teased by the boss during a project, can you write gracefully? Don’t panic. I hope this article will help you
Abstract our code with the same business logic, but not too much
Using ES6 class inherit abstract common class, code can be reused later, no side effects, logic is single
1 Extract composite high reuse components and modules like our common paging loading file upload and some libraries like elementUI ANTD secondary encapsulation, as well as some common class abstract integration
Just to give you an example, instead of pasting code, if we were to do a background management system,
So we’re going to have lists and details, and we’re going to have lists and details, and we’re going to have a lot of similar methods and processing logic, and then we can define two common classes one could be commonList, one could be commonDetail, We abstracted some common methods for paging search resets and integrated them with each module to support method rewriting, which greatly improved the reusability of our code. When facing the list, we often use antD and Elememtui components to build the page. At this time, we can double encapsulate our table and make our columns and rows configurable
<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 select box –>
<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> <! — Operation button –>
<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>
I’ll write a special article on this later and you’ll find that you’re getting faster and faster by using configuration to improve your code
Encapsulate common method classes
Faced with some common method logic we need to reduce a similar code to duplicate multiple times, for example, there is a business like this,
I’m going to validate null or ‘ ‘and an empty array for the data returned by the detail, so we need to render the page with a bunch of if judgments, so we can abstract the method out
/** Details data and different keys */
IsArrayLength <T, K extends Keyof T>(obj: T, key: K
{if (obj && Object. The prototype. HasOwnProperty. Call (obj, key)) / / did determine the type
Const data = obj[key] // reference
if (Array.isArray(data))
{return data.length > 0} // Check whether the array is greater than 0
else { return !! Obj [key]}} // null undefined string and number do not include objects
return false }
So we can call this method uniformly
When we learn to split common components and methods
So some of the elegant writing we have to learn slowly
Learn to use es6 defaults
Write the es6 default so that we get fewer errors
const demo=({a=1,b=0})=>{}
search(param) {return this.post( { action: ‘list’ }, param ).then((response = { total: 0, datas: [] }) => { return response; }); }
Learn how to use map filter find some every and so on. Here is an example of find. I will introduce it later in a detailed article
const b = a.find(item => item > 15); // Return the first value that matches the condition
Learn to use sets and maps
We’re going to use sets to deal with array de-duplication and map to deal with complex logic
Const a = new Set([1,2,3,4,4,]);
const b = […a]
A.a dd (5) / / added
A. d. elele (4) / / delete
The console. The log (b) / / [1, 2, 3, 4]
If it’s a map we can handle the fact that our two arrays match each other
A = [‘ xiaoming ‘, ‘lihua’, ‘lili’] b = [‘ 1.75 ‘, ‘1.80’, 1.60 ‘ ‘]
If we want to use a name to find the corresponding height, we have to find the corresponding position in, and then extract the corresponding height from B, the longer the Array, the longer the time, so we can use map to solve this problem
Var m = new Map ([[‘ xiaoming ‘, ‘1.75’], [‘ lihua ‘, ‘1.80’], [‘ lili ‘, ‘1.60’]]).
M.g et (‘ xiaoming ‘) / / added
Margaret spellings et (‘ xiaocan ‘, ‘1.97’); / / set
M. elete (‘ xiaocan ‘) / / delete
Note that a key can only correspond to one value. If you add a value to a key multiple times, the later value will flush the previous value
Reduce the if the else switch case judgment learn how to use | |! And ternary expressions and business enumerations
1 const a= b || {}
You might write it in code
if(b){a = b}
else{
a= {}
} Then you can write it like this
2 a= !! a ! a
If you find undefind “null 0” in your code, we can use it all! A or!!!!! a
This kind of treatment
3 array.isArray Checks whether it is an array
4. Trinary expressions replace if judgments
this.items.groupId.value = groupValue ? groupValue.value : ”;
5 Use enumerated types instead of if else
This.mapcount = {request: queryUnDealCount(), update: searchRecount(), to be audited :queryCountUnApproval()};
Call the
This. mapCount[‘ apply ‘
Use asynchronous promsie async and 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; })); }
I’m going to share a lot of helpful tips on how to deal with it and I hope you can comment and pay attention to it
Welcome to exchange qq group 112496338
