前端代码编写注意事项

date
Mar 2, 2019
slug
frontend-code-tip
status
Published
tags
Javascript
summary
一些前端编码中的规范🫣
type
Post

变量

  1. 声明不用,数据只使用一次或不使用就无需装到变量中
  1. 变量命名,驼峰、简洁、易懂
  1. 特定变量:
const MAX_INPUT_LENGTH = 8;
if (value.length < MAX_INPUT_LENGTH) {
     // 一目了然,不能超过最大输入长度
    ....
}
  1. 使用说明性的变量(即有意义的变量名)
const address = 'One Infinite Loop, Cupertino 95014';

const cityZipCodeRegex = /^[^,\]+[,\s]+(.+?)s*(d{5})?$/;

saveCityZipCode(
	address.match(cityZipCodeRegex)[1],
	address.match(cityZipCodeRegex)[2],
);

// 改为如下:

const address = 'One Infinite Loop, Cupertino 95014';

const cityZipCodeRegex = /^[^,\]+[,\s]+(.+?)s*(d{5})?$/;

const [, city, zipCode] = address.match(cityZipCodeRegex) || [];

saveCityZipCode(city, zipCode);
  1. 避免使用太多的全局变量,如有需要请使用命名空间
  1. 对于求值变量做好默认值(兜底),对于赋值变量可不用:
//其实在项目中有很多求值变量,对于每个求值变量都需要做好兜底。
let propertyValue = Object.attr || 0; // 因为Object.attr有可能为空,所以需要兜底。

// 但是,赋值变量就不需要兜底了。
let a = 2; // 因为有底了,所以不要兜着。
let myName = 'Tiny'; // 因为有底了,所以不要兜着。

函数

  1. 对于返回true or false的函数,最好以should/is/can/has开头
  1. 动作函数已动词开头否则不好辨别意图
  1. 功能函数最好为纯函数:
// NO: 不要让功能函数的输出变化无常。
function plusAbc(a, b, c) {  // 这个函数的输出将变化无常,因为api返回的值一旦改变,同样输入函数的a,b,c的值,但函数返回的结果却不一定相同。
	var c = fetch('../api');
  return a+b+c;
}

//YES:功能函数使用纯函数,输入一致,输出结果永远唯一
function plusAbc(a, b, c) {  // 同样输入函数的a,b,c的值,但函数返回的结果永远相同。
	return a+b+c;
}
  1. 函数传参要有说明(参数过多,使用对象来代替)
// NO:传参无说明
page.getSVG(api, true, false); // true和false啥意思,一目不了然

// YES: 传参有说明
page.getSVG({
    imageApi: api,
    includePageBackground: true, // 一目了然,知道这些true和false是啥意思
    compress: false,
})
  1. 一个函数完成一个独立的功能,不要一个函数混杂多个功能
  1. 优先使用函数式编程,少用for
  1. 多重判断使用array.includes(逻辑复杂可以考虑使用策略模式) :
// NO 
function test(fruit) 
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

// YES
function test(fruit) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}
  1. 更少的嵌套,尽早return,考虑使用非 ( ! )
  1. 倾向于遍历对象还不是switch:
// NO
function test(color) {
  // 使用条件语句来寻找对应颜色的水果
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

// test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']

// YES
const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
};

function test(color) {
  return fruitColor[color] || [];
}
  1. 对 所有/部分 判断使用 Array.every & Array.some

© i7eo 2017 - 2022