前端JavaScript代码规范

该文章介绍了一些比较核心的前端规范，过滤了一些简单的规范，如使用 let、const代替var，不滥用全局变量，结尾是否用分号，编写注释等。

命名规范

常量

全部大写，使用大写字母和下划线来组合命名，下划线用以分割单词。

const MY_SCHOOL = "牛逼大学";
const ADULT_AGE = 18;

变量

普通变量

命名必须是跟需求的内容相关的词。

// 我的书
const myBook = "JavaScript 入门";

// 书的颜色
const bookColor = "red";

数组

结尾加上 s 或 List。

const books = ["JavaScript", "HTML", "CSS"];
const bookList = ["JavaScript", "HTML", "CSS"];

函数命名

首字母小写，驼峰式命名，统一使用动词或者动词+名词形式。

function setBookName(name) {
  // 设置书名
}

function getBookName() {
  // 获取书名
}

常用动词：set、get、go、handle。

布尔值命名

开头使用 is、has 等状态词。

const isWomen = true;
const hasLongHair = false;

禁止简写

除了三目运算，if、else 等禁止简写。

// bad
if (true) alert(name);

// good
if (true) {
  alert(name);
}

解构赋值

使用数组成员对变量赋值时，优先使用解构赋值。

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

函数的参数如果是对象的成员，优先使用解构赋值。

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}

// best
function getFullName({ firstName, lastName }) {
}

函数中使用默认参数

以减少不必要的参数检查。

// bad
function greet(name) {
  const finalName = name || 'Guest';
  console.log(`Hello, ${finalName}`);
}

// good
function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

使用常量代替常用数字或字符串字面量

// bad
if (age > 18) {
  console.log('Adult');
}

// good
const ADULT_AGE = 18;
if (age > ADULT_AGE) {
  console.log('Adult');
}

推荐使用

在可代替情况下，始终使用 === 替代 ==

// bad
if (a == b) {
  // do something
}

// good
if (a === b) {
  // do something
}

使用可选链?.代替 &&

// bad
if (a && a.b && a.b.c) {
  // do something
}

// good
if (a?.b?.c) {
  // do something
}

模板字符串

使用模板字符串 ${} 替代字符串拼接 "" + ""

// bad
const greeting = "Hello, " + name + "!";

// good
const greeting = `Hello, ${name}!`;

保持函数的单一职责

每个函数只做一件事，并保持其短小。

// bad
function readBookAndPlayGame(user) {
	//看书
  	//打游戏
}

// good
function readBook(user) {
  // 看书
}
function PlayGame(user) {
  // 打游戏
}

推荐使用 async 和 await

替代回调函数和 Promise 链式调用，以提高代码的可读性。

// bad
function fetchData() {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// good
async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

仅在简单情况下使用三目运算符，复杂条件下使用 if-else

// bad
const isAdultWomen = age > 18 ? (sex === "women" ? true : false) : false;

// good
const isAdultWomen = age > 18 && sex === "women";

// better
if (age > 18) {
  if (sex === "women") {
    console.log('Adult Women');
  } else {
    console.log('Not Adult Women');
  }
} else {
  console.log('Not an adult');
}

通过遵循这些规范，可以编写出更易读、更易维护的JavaScript代码，并提高代码的质量和效率。希望这些规范对您的前端开发工作有所帮助。