Code Review

一、风格统一

以下是vuejs 官网给出的 组件/实例的选项的顺序和 元素特性的顺序：

元素特性顺序：

原生属性放前面，指令放后面

- v-for
- v-if
- v-else-if
- v-else
- v-show
- v-pre
- v-once
- id
- ref
- key
- slot
- v-model
- v-on

组件选项顺序：

  - components
  - mixins
  - props/propsData
  - data
  - computed
 - watch
  1.beforeCreate
  2.created
  3.beforeMount
  4.mounted
  5.beforeUpdate
  6.updated
  7.activated
  8.deactivated
  9.beforeDestroy
  10.destroyed
  - methods

method 方法命名命名规范

1、驼峰式命名，统一使用动词或者动词+名词形式
2、请求数据方法，以 data 结尾
3、尽量使用常用单词开头（set、get、go、can、has、is）

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

样式的声明顺序

1、定位
2、盒模型
3、关于文字
4、关于颜色，背景
5、其他，如：cursor:pointer

.declaration-order {

  /*定位 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* 盒模型 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* 关于文字 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* 关于颜色，背景 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /*其他 */
  cursor: pointer;

}

二、验证组件的 props

• 提供默认值
• 使用 type 属性 校验类型
• 使用 props 之前先检查该 prop 是否存在

export default {
    props: {
        previewData: {}
    },

export default {
    props: {
        isWorkBench: false,          // 是否是工作台界面
        synchronousPositionProp: {
            required: true,
            type: Object,
            default: function() {
                return {};
            }
        }
    },

    props: {
        /**
         * 是否显示原生搜索框
         */
        searchBarEnabled: {
            type: Boolean,
            default: true
        },
        /**
         * 是否显示原生分页
         */
        pagerEnabled: {
            type: Boolean,
            default: true
        },
        storeSearchParams: {
            type: Boolean,
            default: true
        },
        eventSource: {
            type: String,
            default: null
        }
    },

三、组件表达式简单化

为什么？

• 复杂的行内表达式难以阅读。
• 行内表达式是不能够通用的，这可能会导致重复编码的问题。
• IDE 基本上不能识别行内表达式语法，所以使用行内表达式 IDE 不能提供自动补全和语法校验功能。

<div class="hellow-text" v-if="expand">{{basicInfo.cur_tenant ? basicInfo.cur_tenant.name.length <= 8 ? basicInfo.cur_tenant.name : basicInfo.cur_tenant.name.substr(0, 7) + '...' : ''}}，欢迎你</div>

怎么做？
如果你发现写了太多复杂并难以阅读的行内表达式，那么可以使用 method 或是 computed 属性来替代其功能。

<template>
...
<div class="hellow-text" v-if="expand">{{curTenantName + '，欢迎你'}}</div>
...
</template>

<script>
export default {
    computed: {
        curTenantName() {
            let name = this.basicInfo.cur_tenant ? this.basicInfo.cur_tenant.name.length <= 8 ? this.basicInfo.cur_tenant.name : this.basicInfo.cur_tenant.name.substr(0, 7) + '...' : '';
            return name;
        }
    },
</script>

四、v-if/v-if-else/v-else 中的 key

如果一组 v-if/v-if-else/v-else 的元素类型相同，最好使用 key。默认情况下，vue 会尽可能高效的更新 DOM，这意味着在相同类型元素之间切换时，会修补已存在的元素，而不是将旧的元素替换掉。如果不相同的元素被设别为相同，则会出现意料之外的副作用。

<div v-if="searchResultList.length <= 0" class="select-location-options-item">未找到相关地点</div>
<div v-else>
    <div class="select-location-options-item" @click="selectLocation(item, index)" :class="{'fouse': index == focusIndex}" v-for="(item, index) in searchResultList" :key="item.detailUrl">{{ item.title }}<span style="color: #999;">（{{ item.address }}）</span></div>
</div>

五、关于===对象比较

如果两个操作数都是对象，则比较他们是不是同一个对象（引用的对象在内存中的地址一样），如果两个操作数都指向同一个对象，则相等操作符返回true，否则，返回false。

if (res.data.code === 0) {
    const data =  res.data.data === [] ? {} : res.data.data;
    localStorage.setItem('showHelp', JSON.stringify(data));
}

正确方法，使用JSON.stringify()方法转换为字符串，再进行比较。

if (res.data.code === 0) {
    const data = JSON.stringify(res.data.data) === '[]' ? {} : res.data.data;
    localStorage.setItem('showHelp', JSON.stringify(data));
}

六、关于Object.assign()

Object.assign 浅拷贝还是深拷贝，答案是第一级属性深拷贝，以后级别属性浅拷贝 。

let array = this.checkedItems.sort((a, b) => {
    return parseInt(a.field.substring(3)) - parseInt(b.field.substring(3));
});
this.showItems = Object.assign([], array);

解决办法，使用JSON.stringify()方法转换为字符串，再JSON.parse转化为对象。

let array = this.checkedItems.sort((a, b) => {
    return parseInt(a.field.substring(3)) - parseInt(b.field.substring(3));
});
this.showItems = JSON.parse(JSON.stringify(array));

七、数组方法

• 数组过滤方法filter()

let submitArr = [];
for (let item of this.updateInterviewStepParams) {
    if (item.name !== '') {
        submitArr.push(item.name);
    }
}

let submitArr = this.updateInterviewStepParams.filter((item) => {
        return item.name !== '';
});

• 遍历数组累加方法reduce()

totalSalaryChanged(val) {
    let total = 0;
    for (var i = 0; i < this.tableData.length; i++) {
        var value = parseFloat(this.tableData[i][val]);
        if (isNaN(value)) {
            continue;
        } else {
            total += value;
        }
    }
    this.totalSalary = total.toFixed(2);
}

totalSalaryChanged(val) {
    let total = this.tableData.reduce((total, item) => {
        var value = parseFloat(item[val]);
        return isNaN(value) ? total : total + item;
    }), 0);
    this.totalSalary = total.toFixed(2);
}