Record of code non-standard problems often occurred in development
- Record of code non-standard problems often occurred in development
Please ensure that your code is concise, clean, readable and maintainable
😢 It is bad
😆 well
1. Formwork
1.1. Use V-for with v-if
😢
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
😆
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
Avoid using v-for with v-if, which will lead to the readability problem of the code. Reference official Style guide
1.2. Avoid writing inline styles unless dynamic binding is required
😢
<el-col
:span="defaultSpace?0.5:0"
class="d-felx"
style="display:flex;height:100vh;justify-content: flex-end;align-items: center;"
></el-col>
😆
<template>
<el-col
:span="defaultSpace?0.5:0"
class="d-felx col-defaultspace"
></el-col>
</template>
<style>
.col-defaultspace {
display:flex;
height:100vh;
justify-content: flex-end;
align-items: center;
}
</style>
A large number of inline styles will make it difficult to maintain later. If it is not necessary, inline styles in the template are prohibited
1.3. Remove useless code after code copy
😢
<!-- demo-form-inline Not used -->
<template>
<el-form
:inline="true"
:model="formData.searchForm"
class="demo-form-inline"
></el-form>
</template>
😆
<!-- Remove unused code -->
<template>
<el-form
:inline="true"
:model="formData.searchForm"
></el-form>
</template>
There may be more and more useless codes after multiple copies of the code. The useless codes should be removed as soon as possible to reduce the maintenance cost
1.4. Disable complex expressions in templates
😢
<template>
<el-button
type="success"
size="mini"
@click="formData.editForm.parentId=0;formData.editForm.cnName='';openTableDialog('add')"
>newly added</el-button>
</template>
😆
<template>
<el-button
type="success"
size="mini"
@click="handleClick"
>newly added</el-button>
</template>
<script>
export defaults {
methods: {
handleClick() {
this.formData.editForm.parentId=0;
this.formData.editForm.cnName='';
this.openTableDialog('add');
}
}
}
</script>
Complex Javascript expressions should be avoided in the template and should be replaced by filters, calculation properties, methods, etc.
2. Script
2.1. Using async/await combination to improve code readability
😢
<script>
export default {
methods: {
getList: async function () {
let { page, size } = this;
getSpaceList(this.formData.searchForm.keywords, page, size).then(res => {
const { content, totalElements, num, size } = res;
this.baseTableData = content;
this.total = totalElements;
});
},
}
}
</script>
😆
<script>
export default {
methods: {
async getList() {
let { page, size } = this;
const res = await getSpaceList(this.formData.searchForm.keywords, page, size);
const { content, totalElements, num, size } = res;
this.baseTableData = content;
this.total = totalElements;
},
}
}
</script>
Using async/await combination to organize the code in the form of synchronization can improve the readability of the code and avoid callback regions or long then().then();
2.2. Interface status should judge success rather than failure
😢
getUserDefault: async function () {
getUserDefault().then(res => {
if (res.errcode === 500) {
return;
}
this.defaultSpace = res.cnName;
});
}
😆
async getUserDefault() {
const res = await getUserDefault();
if (res.errcode === 0) {
this.defaultSpace = res.cnName;
}
}
The error status of the interface may be more than 500. Generally, the success status should be judged
2.3. Disable continuous await if there is no dependency
😢😢
selectClick: async function (type, spaceId) {
this.spaceId = spaceId;
switch (type) {
case 'user':
await this.getRoleList(spaceId);
await this.getUserBySpace(spaceId);
await this.getNoUserBySpace(spaceId);
break;
case 'role':
break;
case 'resource':
break;
};
await this.openTableDialog(type);
},
😆
async selectClick(type, spaceId) {
this.spaceId = spaceId;
switch (type) {
case 'user':
await Promise.all([
this.getRoleList(spaceId);
this.getUserBySpace(spaceId);
this.getNoUserBySpace(spaceId);
]);
break;
default:
break;
};
await this.openTableDialog(type);
},
The await expression will execute the following code after resolve. If multiple await expressions have no dependency, the browser will execute the next function after an interface returns successfully. Instead of using the browser's concurrent requests to speed up the page response, it can be changed to Promise.all() Make use of the concurrent request feature of the browser to initiate multiple requests at the same time, and execute the following operations after each request is completed
3. Style
3.1. SCSS files required for direct import
😢
<style lang="scss"> // index. Many other files are referenced again in SCSS @import "@/style/index.scss"; </style>
😆
@import "@/style/var.scss";
Because the HMR plug-in of webpack is compiled and hot replaced by components, the introduction of as few style files as possible in the components can reduce the time of recompilation after modifying the components.
3.2. Component style overrides are placed in a unified file
😢
// assist.scss
// Override table style
.el-table {
margin-top: 10px;
font-size: 14px;
color: #555770;
border: 1px solid #f3f3f3;
border-radius: 8px;
}
😆
// ui-fixed.scss
// Override table style
.el-table {
margin-top: 10px;
font-size: 14px;
color: #555770;
border: 1px solid #f3f3f3;
border-radius: 8px;
}
Use the files in the project correctly, assist SCSS uses to define auxiliary style class, UI fixed SCSS uses an overlay theme to customize styles that cannot be covered. The custom theme should be used first
3.3. The naming of auxiliary style classes should consider generality
😢
// Font color
.col-f {
color: #FFFFFF
}
.col-28 {
color: #1C1C28
}
😆
@import "@/style/var.scss";
// Font color
.text-white {
color: $--color-white;
}
.text-primary {
color: $--color-text-primary;
}
If it is not a very common auxiliary class, do not use the specific attribute value as the class name, which will lead to the mismatch between the attribute change and the style class name. It should be named according to the usage scenario. The definition of auxiliary class name can be referred to bootstrap Refer to BEM specification for component style class names.
4. Others
4.1. Disable mask code format verification
😢😢
<script> /* eslint-disable */ </script>
eslint verification can reduce the cost of teamwork, avoid low-level errors and help you write better code. Be patient. Don't block # the records of code irregularities that often occur in development
- Record of code non-standard problems often occurred in development
Please ensure that your code is concise, clean, readable and maintainable
😢 It is bad
😆 well
1. Formwork
1.1. Use V-for with v-if
😢
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
😆
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
Avoid using v-for with v-if, which will lead to the readability problem of the code. Reference official Style guide
1.2. Avoid writing inline styles unless dynamic binding is required
😢
<el-col
:span="defaultSpace?0.5:0"
class="d-felx"
style="display:flex;height:100vh;justify-content: flex-end;align-items: center;"
></el-col>
😆
<template>
<el-col
:span="defaultSpace?0.5:0"
class="d-felx col-defaultspace"
></el-col>
</template>
<style>
.col-defaultspace {
display:flex;
height:100vh;
justify-content: flex-end;
align-items: center;
}
</style>
A large number of inline styles will make it difficult to maintain later. If it is not necessary, inline styles in the template are prohibited
1.3. Remove useless code after code copy
😢
<!-- demo-form-inline Not used -->
<template>
<el-form
:inline="true"
:model="formData.searchForm"
class="demo-form-inline"
></el-form>
</template>
😆
<!-- Remove unused code -->
<template>
<el-form
:inline="true"
:model="formData.searchForm"
></el-form>
</template>
There may be more and more useless codes after multiple copies of the code. The useless codes should be removed as soon as possible to reduce the maintenance cost
1.4. Disable complex expressions in templates
😢
<template>
<el-button
type="success"
size="mini"
@click="formData.editForm.parentId=0;formData.editForm.cnName='';openTableDialog('add')"
>newly added</el-button>
</template>
😆
<template>
<el-button
type="success"
size="mini"
@click="handleClick"
>newly added</el-button>
</template>
<script>
export defaults {
methods: {
handleClick() {
this.formData.editForm.parentId=0;
this.formData.editForm.cnName='';
this.openTableDialog('add');
}
}
}
</script>
Complex Javascript expressions should be avoided in the template and should be replaced by filters, calculation properties, methods, etc.
2. Script
2.1. Using async/await combination to improve code readability
😢
<script>
export default {
methods: {
getList: async function () {
let { page, size } = this;
getSpaceList(this.formData.searchForm.keywords, page, size).then(res => {
const { content, totalElements, num, size } = res;
this.baseTableData = content;
this.total = totalElements;
});
},
}
}
</script>
😆
<script>
export default {
methods: {
async getList() {
let { page, size } = this;
const res = await getSpaceList(this.formData.searchForm.keywords, page, size);
const { content, totalElements, num, size } = res;
this.baseTableData = content;
this.total = totalElements;
},
}
}
</script>
Using async/await combination to organize the code in the form of synchronization can improve the readability of the code and avoid callback regions or long then().then();
2.2. Interface status should judge success rather than failure
😢
getUserDefault: async function () {
getUserDefault().then(res => {
if (res.errcode === 500) {
return;
}
this.defaultSpace = res.cnName;
});
}
😆
async getUserDefault() {
const res = await getUserDefault();
if (res.errcode === 0) {
this.defaultSpace = res.cnName;
}
}
The error status of the interface may be more than 500. Generally, the success status should be judged
2.3. Disable continuous await if there is no dependency
😢😢
selectClick: async function (type, spaceId) {
this.spaceId = spaceId;
switch (type) {
case 'user':
await this.getRoleList(spaceId);
await this.getUserBySpace(spaceId);
await this.getNoUserBySpace(spaceId);
break;
case 'role':
break;
case 'resource':
break;
};
await this.openTableDialog(type);
},
😆
async selectClick(type, spaceId) {
this.spaceId = spaceId;
switch (type) {
case 'user':
await Promise.all([
this.getRoleList(spaceId);
this.getUserBySpace(spaceId);
this.getNoUserBySpace(spaceId);
]);
break;
default:
break;
};
await this.openTableDialog(type);
},
The await expression will execute the following code after resolve. If multiple await expressions have no dependency, the browser will execute the next function after an interface returns successfully. Instead of using the browser's concurrent requests to speed up the page response, it can be changed to Promise.all() Make use of the concurrent request feature of the browser to initiate multiple requests at the same time, and execute the following operations after each request is completed
3. Style
3.1. Direct import of required SCSS files
😢
<style lang="scss"> // index. Many other files are referenced again in SCSS @import "@/style/index.scss"; </style>
😆
@import "@/style/var.scss";
Because the HMR plug-in of webpack is compiled and hot replaced by components, the introduction of as few style files as possible in the components can reduce the time of recompilation after modifying the components.
3.2. Component style overrides are placed in a unified file
😢
// assist.scss
// Override table style
.el-table {
margin-top: 10px;
font-size: 14px;
color: #555770;
border: 1px solid #f3f3f3;
border-radius: 8px;
}
😆
// ui-fixed.scss
// Override table style
.el-table {
margin-top: 10px;
font-size: 14px;
color: #555770;
border: 1px solid #f3f3f3;
border-radius: 8px;
}
Use the files in the project correctly, assist SCSS uses to define auxiliary style class, UI fixed SCSS uses an overlay theme to customize styles that cannot be covered. Priority should be given to theme customization
3.3. The naming of auxiliary style classes should consider generality
😢
// Font color
.col-f {
color: #FFFFFF
}
.col-28 {
color: #1C1C28
}
😆
@import "@/style/var.scss";
// Font color
.text-white {
color: $--color-white;
}
.text-primary {
color: $--color-text-primary;
}
If it is not a very common auxiliary class, do not use the specific attribute value as the class name, which will lead to the mismatch between the attribute change and the style class name. It should be named according to the usage scenario. The definition of auxiliary class name can be referred to bootstrap Refer to BEM specification for component style class names.