1.使用computed计算属性（性能优化，代码维护，更好的响应，模板更清晰）
调整前：
computedField {
let trendValue = 'cpu'
if (this.analyzeInsTypeValue && this.analyzeInsTypeValue.length > 0) {
trendValue = this.trendValue.join(',')
}
return trendValue
}
调增后：
computed: {
computedField: () => {
let trendValue = 'cpu'
if (this.analyzeInsTypeValue && this.analyzeInsTypeValue.length > 0) {
trendValue = this.trendValue.join(',')
}
return trendValue
}
},
调整前：
<div v-if="this.isLocal && this.cloudType !== 'TCE' && this.cloudType !== 'TSF' && this.cloudType !== 'TDSQL' && this.cloudType !== 'Apsara' && this.cloudType !== 'QingCloudPrivate'">...</div>
调整后
<div v-if="computedIslocal">...</div>
...
computed: {
computedIslocal() {
return this.isLocal && this.cloudType !== 'TCE' && this.cloudType !== 'TSF' && this.cloudType !== 'TDSQL' && this.cloudType !== 'Apsara' && this.cloudType !== 'QingCloudPrivate'
}
},
2.单行属性超过三个用换行
调整前：
<bk-select v-model="accountForm.region_list"
multiple
@change="changeRegion">
<bk-option v-for="item in regionList"
:key="item.id"
:name="item.name"
:id="item.id">
</bk-option>
</bk-select>
调整后：
<bk-select
v-model="accountForm.region_list"
multiple
@change="changeRegion">
<bk-option
v-for="item in regionList"
:key="item.id"
:name="item.name"
:id="item.id">
</bk-option>
</bk-select>
3.删除无用代码(如开发过程中产生的，但最后提交的时候没用到的)
调整前：
checkedChange(value) {
this.trendValue = value
this.getAlarmData()
}
调整后：
...
调整前
const _this = this
调整后
...
4.不对input做修改，为以后埋雷
调整前：
input{
appearance: none:
-webkit-appearance: none;
outline: none;
width: 18px;
height: 18px;
text-align: center
line-height: 18px;
border: 1px solid gray;
input:after{
content: 2714';
color: transparent:
}
input:after{
content: '\2714';
color: transparent;
}
input :checked::after{
color: gray
}
调整后：(最后也没用到)
...
5.抽出行内样式，尽量少用行内
调整前:
<div v-if="isCapacityShow" class="capacity">
<bk-form :label-width="130" :model="vmForm" style="margin-top:12px;" size="medium">
<div style="display: flex;flex-wrap: wrap;width: 100%;">
<div style="width:70%">
<div styLe="margin-Left: 134px;">使用量</div>
<div class="flex-aligin-center">
<bk-form-item label="CPU:">
<-input>
mForm.cpu_used_enabled" />
<bk-input style="height: 28px;width: 80px;" v-model="mForm.cpu_used" :disabled="vmForm
</bk-form-item>
<div style="width: 100px;display: flex;margin-left: 5px;padding-bottom: 2px">
<input v-model="vmForm.cpu_used_enabled" type="checkbox" style="zoom:180%:" @click="vmF
<div>自动获取</div>
</div>
</div>
</div>
<div style="width:30%">
<div>总量</div>
k-input>
<div class="flex-aligin-center" style="margin-left:-1px">
<bk-input style="height: 28px;width: 160px;" v-model="vmForm.cpu_total" :disabled="vmForm.c
</div>
</div>
<div style="width:70%">
<div class="flex-aligin-center">
<bk-form-item label="内存:">
<bk-input style="height: 28px;width: 80px;" v-odel="vmForm.memory_used"
sabled="vmForm.memory_used_enabled"></bk-input>
</bk-form-item>
<div style="width: 100px;display: flex;margin-left: 5px;padding-bottom: 2px">
<input v-model="vmForm.memory_used_enabled" type="checkbox" style="zoom:180%;"
ick="vmForm.memory_used_enabled = !vmForm.memory_used_enabled" />
<div>自动获取</div>
调整后：
<bk-form :label-width="130" :model="vmForm" style="margin-top:12px;" size="medium">
<div class="select-open">
<div class="left">
<div class="title">使用量</div>
<div class="flex-aligin-center content">
<bk-form-item label="CPU:">
<bk-input
class="input-width"
v-model="vmForm.cpu_used"
:disabled="vmForm.cpu_used_enabled">
</bk-input>
</bk-form-item>
<div class="input-item">
<input
v-model="vmForm.cpu_used_enabled"
type="checkbox"
style="zoom:180%;"
@click="vmForm.cpu_used_enabled = !vmForm.cpu_used_enabled" />
<div>自动获取</div>
</div>
</div>
</div>
<div class="right">
<div>总量</div>
<div class="flex-aligin-center">
<bk-input style="width: 160px;" v-model="vmForm.cpu_total" :disabled="vmForm.cpu_total_enabled"></bk-input>
</div>
</div>
<div class="left">
<div class="content">
<bk-form-item label="内存:">
<bk-input class="input-width" v-model="vmForm.memory_used" :disabled="vmForm.memory_used_enabled"></bk-input>
</bk-form-item>
<div class="input-item">
<input v-model="vmForm.memory_used_enabled" type="checkbox" style="zoom:180%;" @click="vmForm.memory_used_enabled = !vmForm.memory_used_enabled" />
<div>自动获取</div>
</div>
</div>
</div>
<div class="right">
<div class="content">
<bk-input class="input-width" v-model="vmForm.memory_total" :disabled="vmForm.memory_total_enabled"></bk-input>
<div class="input-item">
<input v-model="vmForm.memory_total_enabled" type="checkbox" style="zoom:180%;" @click="vmForm.memory_total_enabled = !vmForm.memory_total_enabled" />
<div>自动获取</div>
</div>
</div>
</div>
<div class="left">
<div class="content">
<bk-form-item label="存储:">
<bk-input class="input-width" v-model="vmForm.disk_used" :disabled="vmForm.disk_used_enabled"></bk-input>
</bk-form-item>
<div class="input-item">
<input v-model="vmForm.disk_used_enabled" type="checkbox" style="zoom:180%;" @click="vmForm.disk_used_enabled = !vmForm.disk_used_enabled" />
<div>自动获取</div>
</div>
</div>
</div>
<div class="right">
<div class="content">
<bk-input class="input-width" v-model="vmForm.disk_total" :disabled="vmForm.disk_total_enabled"></bk-input>
<div class="input-item">
<input v-model="vmForm.disk_total_enabled" type="checkbox" style="zoom:180%;" @click="vmForm.disk_total_enabled = !vmForm.disk_total_enabled" />
<div>自动获取</div>
</div>
</div>
</div>
</div>
</bk-form>
...
.capacity{
.select-open{
display: flex;
flex-wrap: wrap;
width: 100%;
.left{
width: 70%;
}
.right{
width: 30%;
}
.title{
margin-left: 134px;
}
.content{
margin-bottom: 10px;
display: flex;
align-items: center;
.input-width{
width: 80px;
}
.input-item{
display: flex;
width: 100px;
margin-left: 5px;
}
}
}
}
这里可优化的点
抽离出组件
用@checkbox-change="vmForm.cpu_used_enabled = $event" 取代点击事件
调整前：
<input v-model="vmForm.memory_used_enabled" type="checkbox" style="zoom:180%;" @click="vmForm.memory_used_enabled = !vmForm.memory_used_enabled" />
调整后：
<input type="checkbox" v-model="vmForm.memory_used_enabled">
6.input高度统一不要改
修改前：
<bk-input style="height: 28px">
修改后：
<bk-input>
7.多次引用来源，采用解构赋值，让代码清晰，简介
调整前：
params = {
account_id: this.accountId,
config_name: this.vmForm.config_name,
host: this.vmForm.host,
account: this.vmForm.account,
password: this.vmForm.password,
project_id: this.vmForm.project_id,
endpoint: this.vmForm.endpoint,
version: this.vmForm.version,
bk_cloud_id: this.vmForm.bk_cloud_id,
cloud_type: this.cloudType,
region: this.vmForm.region_list,
bk_cloud_list: this.vmForm.bk_cloud_list,
pool_id: this.vmForm.pool_id,
machine_room: this.vmForm.machine_room,
cpu_used: this.vmForm.cpu_used,
cpu_total: this.vmForm.cpu_total,
memory_used: this.vmForm.memory_used,
memory_total: this.vmForm.memory_total,
disk_used: this.vmForm.disk_used,
disk_total: this.vmForm.disk_total,
cpu_used_enabled: this.vmForm.cpu_used_enabled,
cpu_total_enabled: this.vmForm.cpu_total_enabled,
memory_used_enabled: this.vmForm.memory_used_enabled,
memory_total_enabled: this.vmForm.memory_total_enabled,
disk_used_enabled: this.vmForm.disk_used_enabled,
disk_total_enabled: this.vmForm.disk_total_enabled
}
调整后：
const {
account,
password,
config_name: configName,
region_list: regionList,
bk_cloud_list: bkCloudList,
endpoint: host = '',
project_id: projectId,
machine_room: machineRoom,
cpu_used: cpuUsed,
cpu_total: cpuTotal,
memory_used: memoryUsed,
memory_total: memoryTotal,
disk_used: diskUsed,
disk_total: diskTotal,
cpu_used_enabled: cpuUsedEnabled,
cpu_total_enabled: cpuTotalEnabled,
memory_used_enabled: memoryUsedEnabled,
memory_total_enabled: memoryTotalEnabled,
disk_used_enabled: diskUsedEnabled,
disk_total_enabled: diskTotalEnabled
} = this.accountForm
const regions = regionList.length > 0 ? regionList : regionList.split(',')
params = {
account,
password,
config_name: configName,
region_list: regions,
bk_cloud_list: bkCloudList,
host,
project_id: projectId,
machine_room: machineRoom,
cpu_used: cpuUsed,
cpu_total: cpuTotal,
memory_used: memoryUsed,
memory_total: memoryTotal,
disk_used: diskUsed,
disk_total: diskTotal,
cpu_used_enabled: cpuUsedEnabled,
cpu_total_enabled: cpuTotalEnabled,
memory_used_enabled: memoryUsedEnabled,
memory_total_enabled: memoryTotalEnabled,
disk_used_enabled: diskUsedEnabled,
disk_total_enabled: diskTotalEnabled
}
ps eslint 规范（做个参考，不同的team，eslint规则不一样）
html规范
属性结尾行内不留空
事件结尾行内留空
行外统一不留空
换行一个tab 四个空格
行内属性与属性与事件之间一个空格
...
js规则
小驼峰命名变量
名词加动词命名事件
if的小括号前后一个空格
方法小括号后一个空格
else和花括号不换行
对象最后一个属性不留逗号
换行不超过两个
不能出现无意义的代码，备注
...
css规则
对齐css
多次使用抽出样式在父类
