303-javascript-guide

JavaScript编码指南 (303)

规则概述

本规范定义了JavaScript的编码规范和最佳实践，旨在提高代码质量、可读性和可维护性。

基本规范

1.1 命名规范

• 变量命名：使用驼峰命名法（camelCase）
• 常量命名：使用全大写下划线分隔（UPPER_SNAKE_CASE）
• 函数命名：使用动词短语，驼峰命名法（如：getUserInfo）
• 组件命名：使用大驼峰命名法（PascalCase）
• 布尔值：以 is、has、can、should 开头
• 数组命名：使用复数形式，如 users 或 userList

// 变量命名
let userName = 'Zhang San';
const MAX_COUNT = 100;

// 函数命名
function getUserProfile() { /*...*/ }

// 组件命名
class UserProfile extends Component { /*...*/ }

// 布尔值
const isActive = true;
const hasPermission = false;

// 数组
const userList = [];
const products = [];

1.2 代码格式

• 使用2个空格缩进
• 语句末尾使用分号
• 花括号起始位置与声明在同一行
• 单行代码长度不超过80-100个字符
• 使用空行分离代码逻辑块

// 推荐
function calculateTotal(items) {
  let total = 0;
  
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  
  return total;
}

1.3 引号使用

• 统一使用单引号（'）而非双引号（"）
• 模板字符串使用反引号（`）

// 推荐
const name = 'John Doe';
const greeting = `Hello, ${name}!`;

// 不推荐
const name = "John Doe";

ES6+特性使用

2.1 变量声明

• 使用 const 和 let 代替 var
• 默认使用 const，只有在需要重新赋值时使用 let
• 避免使用 var（存在变量提升和作用域问题）

// 推荐
const PI = 3.14;
let count = 0;
count++;

// 不推荐
var PI = 3.14;
var count = 0;

2.2 箭头函数

• 优先使用箭头函数，特别是在回调函数中
• 简单的单行表达式无需花括号和return语句
• 多行表达式使用花括号和return语句

// 单行箭头函数
const double = x => x * 2;

// 多行箭头函数
const calculateArea = (width, height) => {
  const area = width * height;
  return area;
};

// 回调函数
items.map(item => item.value);

2.3 解构赋值

• 使用对象解构获取对象属性
• 函数参数过多时使用对象参数，解构获取

// 对象解构
const { name, age, address } = user;

// 函数参数解构
function getUserInfo({ name, age, address }) {
  // 使用 name, age, address
}

getUserInfo({
  name: '张三',
  age: 30,
  address: '北京'
});

2.4 展开运算符

• 使用展开运算符（...）合并对象和数组

// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

// 合并对象
const defaults = { theme: 'light', language: 'en' };
const userSettings = { theme: 'dark' };
const settings = { ...defaults, ...userSettings };