原文来自微信：前端工匠，作者：Nordon
规范与每个团队和个人都是息息相关的，因为其影响的不只是只是代码的维护和理解成本，严重的时候是会影响成员开发的心情一个团队的编码规范、git规范等，并没有绝对的最优解，心里要清楚明白没有银弹，规范是为了让团队统一，提高代码阅读性、降低代码维护成本等，本文是记录一些在项目code review中常见的规范，仅供参考。
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),}
图片
功能的开发过程中，图片的处理往往是比较容易被忽略的环节，也会在一定程度影响开发的效率和页面的性能
-
图片压缩问题，除非特别要求图片必须高质量的显示，否则都应该进行对应的压缩处理