前端代码规范

2024-11-26 35 阅读1分钟

HTML 代码规范

使用 HTML5 文档类型声明： <!DOCTYPE html>
缩进使用 2 个空格。
为所有具有语义的元素使用正确的 HTML 标签，例如使用 <header>、<nav>、<main>、<aside>、<footer> 等。
为图片添加 alt 属性，为表单元素添加必要的 label 。
保持标签的小写，并正确关闭标签。

CSS 代码规范

使用 CSS 预处理器（如 Sass 或 Less）来组织和管理代码。
选择器尽量具体，避免过度通用的选择器。
按功能或模块将 CSS 规则分组，并使用适当的注释进行分隔。
变量使用有意义的名称，并遵循驼峰命名法。
声明块中的属性按字母顺序排列。

示例：

// 模块注释
.module {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

JavaScript 代码规范

使用 const 或 let 声明变量，避免使用 var 。
函数和变量使用驼峰命名法。
控制每行代码的长度，一般不超过 80 个字符。
为函数和复杂的代码块添加必要的注释。

示例：

/**
 * 计算两个数的和
 * @param {number} num1 第一个数
 * @param {number} num2 第二个数
 * @returns {number} 两数之和
 */
function sumNumbers(num1, num2) {
  return num1 + num2;
}

避免全局变量，尽量将代码封装在模块中。

通用规范

统一代码的缩进和空格使用规则。
及时删除未使用的代码和注释。
提交代码前进行必要的格式化和代码检查。

这只是一个基本的前端代码规范示例，后续会继续完善。