总结了一些有用的前端代码规范, 分享给大家, 希望对大家有所帮助~
代码评审内容
-
- 看下各自的负责的模块, 选取一些好的或有待改进的分享出来, 大家提供解决方案
-
- 项目优化建议
-
- 项目有疑问的点
-
- 代码规范 以上有的或自己想要分享的到时候都可以提出来
代码评审目的
-
- 帮助大家提升代码质量, 养成好的编码习惯, 提高系统性能和稳定性
-
- 互相学习, 发现好的思路
-
- 自我提升
代码评审步骤
-
- 建议写一份 word, 自己分享的流程清晰点
-
- 项目优化建议 => 项目疑问点 => 代码某些片段的 review
一, js规范
1. const 命名常量
- 消除魔法字符串,所有的常量都应该被命名
// 推荐
const COL_NUM = 10;
let row = Math.ceil(num / COL_NUM);
// 不推荐
let row = Math.ceil(num / 10);
2. 函数参数传递默认值
// 推荐
function createMicrobrewery(name = "Hipster Brew Co.") {}
// 不推荐
function createMicrobrewery(name) {
const breweryName = name || "Hipster Brew Co.";
// ...
}
3. 如果函数参数较多, 可解构
- 函数参数越少越好, 如果参数较多, 可采用解构, 不用考虑参数的顺序
// 推荐
function createMenu({ title, body, buttonText, cancellable }) {
// ...
}
createMenu({
title: "Foo",
body: "Bar",
buttonText: "Baz",
cancellable: true
});
// 不推荐
function createMenu(title, body, buttonText, cancellable) {
// ...
}
4. 使用...args 代替 arguments
- args 是真实数组
// 推荐
function getName(...args) {
console.log("args", args);
}
// 不推荐
function getName() {
// 1. let args = Array.prototype.slice.call(arguments)
// 2. let args = Array.from(arguments)
console.log("args", args);
}
5. 引入模块时, 先第三方插件, 后内部组件
// 推荐
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import _ from "lodash";
import Utils from "./utils/";
import AppHeader from "./app-header.vue";
// 不推荐
import Utils from "./utils/";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import AppHeader from "./app-header.vue";
import _ from "lodash";
6. 文件命名避免缩写
// 推荐
studentScoreAnalysis
// 不推荐
stuScoAna
7. 采用函数式编程
- 函数式编程可以使代码的逻辑更清晰更优雅
// 推荐
const programmerOutput = [
{
name: 'Uncle Bobby',
linesOfCode: 500
}, {
name: 'Suzie Q',
linesOfCode: 1500
}, {
name: 'Jimmy Gosling',
linesOfCode: 150
}, {
name: 'Gracie Hopper',
linesOfCode: 1000
}
];
let totalOutput = programmerOutput
.map(output => output.linesOfCode)
.reduce((totalLines, lines) => totalLines + lines, 0)
// 不推荐
const programmerOutput = [
{
name: 'Uncle Bobby',
linesOfCode: 500
}, {
name: 'Suzie Q',
linesOfCode: 1500
}, {
name: 'Jimmy Gosling',
linesOfCode: 150
}, {
name: 'Gracie Hopper',
linesOfCode: 1000
}
];
let totalOutput = 0;
for (let i = 0; i < programmerOutput.length; i++) {
totalOutput += programmerOutput[i].linesOfCode;
}
7.1 扩展--什么是函数式编程
- 函数是一等公民
- 函数可以和其他数据类型处于平等的地位, 可以赋值, 作为传参, 也可以作为返回值
// 赋值
var a = function fn1() { }
// 函数作为参数
function fn2(fn) {
fn()
}
// 函数作为返回值
function fn3() {
return function() {}
}
-
函数是纯函数
- 同输入, 同输出
- 无副作用(副作用: 函数内部的操作会影响外部,如修改全局变量的值, 修改 dom 节点)
7 中 map, reduce 就是典型的纯函数
// 是纯函数
function add(x,y){
return x + y
}
// 输出不确定，不是纯函数
function random(x){
return Math.random() \* x
}
// 有副作用，不是纯函数
function setColor(el,color){
el.style.color = color ;
}
// 输出不确定、有副作用，不是纯函数
var count = 0;
function addCount(x){
count+=x;
return count;
}
函数式编程示例: compose 函数
function compose(...args){
let start = args.length -1
return function(){
let i = start - 1
let result = args[start].apply(this, arguments)
while(i>=0){
result = args[i].call(this, result)
i--
}
return result
}
}
function addHello(str){
return `Hello ${str}`
}
function toUpperCase(str){
return str.toUpperCase()
}
function reverse(str){
return str.split('').reverse().join('');
}
let composeFn = compose(reverse, toUpperCase, addHello)
composeFn('abcde')
上述过程有三个步骤, hello, 转成大写, 反转, compose函数将上述三个动作合成一个, 最终输出正确结果
8. 最小函数原则
- 可以提高代码可读性, 重用性, 也方便测试
9. 将对象属性值保存为局部变量
- 避免查找属性的开销
// 推荐
let person = {
info:{
sex:'男'
}
}
function getMaleSex(){
let sex = person.info.sex;
if(sex === '男'){
console.log(sex)
}
}
// 不推荐
let person = {
info:{
sex:'男'
}
}
function getMaleSex(){
if(person.info.sex === '男'){
console.log(person.info.sex)
}
}
10. 使用工具库, 而不是重写函数, 如果重写函数需要写单元测试, 确保函数正确性
二, vue规范
1. 循环时, key 值绑定 id
2. 复杂语句使用 computed
3. 组件传值
- 兄弟组件 eventbus
- 爷孙组件 provide/inject
- 页面组件之间传值, 使用 router, 使用 vuex 刷新时会丢失
