作者:Nordon


规范与每个团队和个人都是息息相关的,因为其影响的不只是只是代码的维护和理解成本,严重的时候是会影响成员开发的心情

一个团队的编码规范、git规范等,并没有绝对的最优解,心里要清楚明白没有银弹,规范是为了让团队统一,提高代码阅读性、降低代码维护成本等,本文是记录一些在项目code review中常见的规范,仅供参考

JS部分

和渲染无关的数据

vuedata的数据默认便会进行双向数据绑定,若是将大量的和渲染无关的数据直接放置在data中,将会浪费双向数据绑定时所消耗的性能,将这些和渲染无关的数据进行抽离并配合Object.freeze进行处理

tablecolumns数据可以单独提取一个外部js文件作为配置文件,也可以在当前.vue文件中定义一个常量定义columns数据,因为无论如何都是固定且不会修改的数据,应该使用Object.freeze进行包裹,既可以提高性能还可以将固定的数据抽离,一些下拉框前端固定的数据也建议此操作

const columnList =

需要注意的是 Object.freeze() 冻结的是值,这时仍然可以将变量的引用替换掉,还有确保数据不会变才可以使用这个语法,如果要对数据进行修改和交互,就不适合使用冻结了。

`Modal`框的控制

一个页面种通常会存在很多个不同功能的弹框,若是每一个弹框都设置一个对应的变量来控制其显示,则会导致变量数量比较冗余和命名困难,可以使用一个变量来控制同一页面中的所有Modal弹框的展示

比如某个页面中存在三个Modal弹框

// bad

`debounce `使用

例如远程搜索时需要通过接口动态的获取数据,若是每次用户输入都接口请求,是浪费带宽和性能的

当一个按钮多次点击时会导致多次触发事件,可以结合场景是否立即执行immediate

<Select :remote-method="remoteMethod">
import {debounce}

图片

功能的开发过程中,图片的处理往往是比较容易被忽略的环节,也会在一定程度影响开发的效率和页面的性能

  • 图片压缩问题,除非特别要求图片必须高质量的显示,否则都应该进行对应的压缩处理
  • 不同业务场景进行图片格式的选型
  • JPG 适用于呈现色彩丰富的图片,JPG 图片经常作为大的背景图、轮播图或 Banner 图出现等
  • Logo、颜色简单且对比强烈的图片或背景、需要透明度等
  • 将常用且变动频率很低的小图片进行合并成雪碧图,对于变动比较频繁和小于6KB的图片进行base64处理
  • 根据项目图片数量和项目的用户机型分布等,考虑采取webp进行图片的处理

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

使用 props 将组件和路由解耦:

取代与 $route 的耦合

const User = {

通过 props 解耦

这样你便可以在任何地方使用该组件,使得该组件更易于重用和测试。

const User = {

参考:路由组件传参

Vue生命周期

在父子组件中,掌握父子组件对应的生命周期钩子加载顺序可以让开发者在更合适的时候做适合的事情父组件

<div><h3>homeh3><list @hook:mounted="listMounted" />div>template>