宁_Yi
宁_Yi

Vue开发的团队代码规范

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

一个团队的编码规范、git规范等，并没有绝对的最优解，心里要清楚明白没有银弹，规范是为了让团队统一，提高代码阅读性、降低代码维护成本等，

本文是记录一些在项目code review中常见的规范，仅供参考。

image

JS 部 分

和渲染无关的数据

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

table中columns数据可以单独提取一个外部js文件作为配置文件，也可以在当前.vue文件中定义一个常量定义columns数据，

因为无论如何都是固定且不会修改的数据，应该使用Object.freeze进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此操作。

const columnList = Object.freeze([
  { title: '姓名', key: 'name', align: 'center' },
  { title: '性别', key: 'gender', align: 'center' }
])

需要注意的是 Object.freeze() 冻结的是值，这时仍然可以将变量的引用替换掉，还有确保数据不会变才可以使用这个语法，

如果要对数据进行修改和交互，就不适合使用冻结了。

Modal框的控制

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

可以使用一个变量来控制同一页面中的所有Modal弹框的展示。

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

// bad
// 每一个数据控制对应的Modal展示与隐藏
new Vue({
    data() {
        return {
            modal1: false,
            modal2: false,
            modal3: false,
        }
    }
})

// good
// 当modalType为对应的值时 展示其对应的弹框
new Vue({
    data() {
        return {
            modalType: '' // modalType值为 modal1，modal2，modal3
        }
    }
})

debounce使用

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

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



import {debounce} from 'lodash'

methods：{
    remoteMethod：debounce(function (query) {
        // to do ...
       // this 的指向没有问题
    }, 200),
}

图片

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

图片压缩问题，除非特别要求图片必须高质量的显示，否则都应该进行对应的压缩处理；

不同业务场景进行图片格式的选型：

JPG 适用于呈现色彩丰富的图片，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现等；

Logo、颜色简单且对比强烈的图片或背景、需要透明度等；

将常用且变动频率很低的小图片进行合并成雪碧图，对于变动比较频繁和小于6KB的图片进行base64处理；

根据项目图片数量和项目的用户机型分布等，考虑采取webp进行图片的处理。

路由组件传参

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

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

取代与 $route 的耦合

const User = {
  template: '
User {{ $route.params.id }}
'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通过 props 解耦

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

const User = {
  props: ['id'],
  template: '
User {{ id }}
'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

参考：路由组件传参

https://router.vuejs.org/zh/guide/essentials/passing-props.html

Vue生命周期

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

父组件

子组件

加载时父子组件的加载顺序

home beforeCreate --> home created --> home beforeMount --> list created --> list beforeMount --> list mounted

销毁时父子组件的销毁顺序

home beforeDestroy --> list beforeDestroy --> list destroyed --> home destroyed

实际开发过程中会遇到当子组件某个生命周期完成之后通知父组件，然后在父组件做对应的处理。

emit up

// 子组件在对应的钩子中发布事件
created(){
  this.$emit('done')
}

// 父组件订阅其方发

hook

通过@hook监听子组件的生命周期

Select优化

下拉框遍历时，需要注意options标签保持同一行，若是存在换行，会导致选中时的值存在多余的空白。

需要将Options和下拉框的值保持在同一行

data数据层级

data数据具有数据层级结构，切勿过度扁平化或者嵌套层级过深，

若是过度扁平化会导致数据命名空间冲突，参数传递和处理，

若是层级嵌套过深也会导致vue数据劫持的时候递归层级过深，

若是嵌套层级丧心病狂那种的，小心递归爆栈的问题。

而且层级过深会导致数据操作和处理不便，获取数据做容错处理也比较繁琐。一般层级保持2-3层最好。

若是只有一层数据，过于扁平

{
    name: '',
    age: '',
    gender: ''
}

导致处理不方便

// 作为接口参数传递
ajax({
 this.name, this.age, this.gender
})

// 接口获取数据，批量处理
ajax().then(res => {
 const {name, age, gender} = res.data
    this.name = name
    this.age = age
    this.gender = gender
})

适当的层级结构不仅增加代码的维护和阅读性，还可以增加操作和处理的便捷性

{
    person: { // 个人信息
        name: '',
        age: '',
        gender: ''
    }
}

可以针对person进行操作

// 作为接口参数传递
ajax(this.person)

// 接口获取数据，批量处理
ajax().then(res => {
 const {name, age, gender} = res.data
    this.$set(this, 'person', {name, age, gender})
})

策略模式

策略模式的使用，避免过多的if else判断，也可以替代简单逻辑的switch

const formatDemandItemType = (value) => {
    switch (value) {
        case 1:
            return '基础'
        case 2:
            return '高级'
        case 3:
            return 'VIP'
    }
}

// 策略模式
const formatDemandItemType2 = (value) => {
    const obj = {
        1: '基础',
        2: '高级',
        3: 'VIP',
    }
    
    return obj[value]
}

解构

解构赋值以及默认值，当解构的数量小于多少时适合直接解构并赋值默认值，数据是否进行相关的聚合处理

const {
  naem = '',
  age = 10,
  gender = 'man'
} = res.data

// bad
this.name = name
this.age = age
this.gender = gender

// good
this.person = {
  naem,
  age,
  gender
}

职责单一

任何时候尽量是的一个函数就做一件事情，而不是将各种逻辑全部耦合在一起，提高单个函数的复用性和可读性。

每个页面都会在加载完成时进行数据的请求并展示到页面

created() {
  this.init();
},
methods: {
  // 将全部的请求行为聚合在init函数中
  // 将每个请求单独拆分
  init() {
    this.getList1()
    this.getList2()
  },
  getList1() {
    // to do ...
  },
  getList2() {
    // to do ...
  }
}

v-bind

在日常的开发过程中， 提取和封装组件是一件很常规的操作，但是当组件需要的参数非常多时，会导致传递一堆的prop，不仅书写上面比较繁琐，对代码的维护和阅读不是一件有利的事情

例如组件test-demo需要一堆props传递

使用时

test-demo中需要接收处理

{
  props: ['data1', 'data2', 'data3', ...]
}
// or
props: {
  modalVisible: {
    // 控制展示modal
    type: Boolean,
    default: false
  },
  data1: {
    type: String,
    default: '1'
  },
  data2: {
    type: String,
    default: '2'
  },
  data3: {
    type: String,
    default: '3'
  }
}

建议将子组件需要的数据收集起来，集中在一个对象中，使用v-bind传递将这个对象传递，子组件的使用和普通的props一样