1. 代码规范的重要性
1.1 提升代码质量
良好的代码规范能够显著提高代码质量和可维护性，减少错误发生率。
1.2 促进团队协作
统一的代码风格让团队成员更容易理解和维护彼此的代码，提高协作效率。
1.3 降低维护成本
规范的代码结构和命名约定使得后期维护更加容易，降低长期维护成本。
1.4 提高开发效率
一致的代码风格减少了代码阅读和理解的时间，提高整体开发效率。
2. HTML代码规范
2.1 文档结构规范
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
2.2 标签使用规范
2.2.1 语义化标签
优先使用语义化标签，提高代码可读性和SEO友好性：
<!-- 推荐 -->
<header>
<nav></nav>
</header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
<!-- 不推荐 -->
<div class="header">
<div class="nav"></div>
</div>
<div class="content">
<div class="article"></div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
2.2.2 标签闭合
所有标签必须正确闭合：
<!-- 自闭合标签 -->
<img src="image.jpg" alt="描述">
<input type="text">
<br>
<hr>
<!-- 成对标签 -->
<div></div>
<p></p>
<span></span>
2.3 属性规范
2.3.1 属性顺序
按照特定顺序排列属性，提高可读性：
<!-- 推荐顺序：class > id > name > data-* > src/for/type/href > title/alt > role/aria-* -->
<a class="button" id="submit-btn" href="#" title="提交">提交</a>
<input class="form-control" type="text" name="username" placeholder="用户名">
2.3.2 布尔属性
布尔属性不需要赋值：
<!-- 正确 -->
<input type="checkbox" checked>
<option selected>选项</option>
<!-- 错误 -->
<input type="checkbox" checked="true">
<option selected="selected">选项</option>
2.4 注释规范
<!-- 单行注释 -->
<div class="container">
<!-- 区块注释开始
这里是多行注释内容
区块注释结束 -->
</div>
3. CSS代码规范
3.1 命名规范
3.1.1 BEM命名法
使用BEM(Block Element Modifier)命名规范：
/* Block */
.card { }
/* Element */
.card__header { }
.card__body { }
.card__footer { }
/* Modifier */
.card--large { }
.card--featured { }
.card__header--dark { }
3.1.2 语义化命名
使用有意义的类名，避免使用外观描述：
/* 推荐 */
.article-title { font-size: 24px; }
.user-avatar { border-radius: 50%; }
/* 不推荐 */
.big-font { font-size: 24px; }
.round-image { border-radius: 50%; }
3.2 代码组织
3.2.1 文件结构
合理组织CSS文件结构：
/* ==========================================================================
1. 重置样式和依赖
========================================================================== */
/* ==========================================================================
2. 基础样式
========================================================================== */
/* ==========================================================================
3. 组件样式
========================================================================== */
/* ==========================================================================
4. 页面特定样式
========================================================================== */
/* ==========================================================================
5. 响应式样式
========================================================================== */
3.2.2 属性排序
按照功能相关性对CSS属性进行分组排序：
.selector {
/* 定位 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型 */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
/* 边框 */
border: 1px solid #000;
border-radius: 5px;
/* 背景 */
background: #fff;
/* 文本 */
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
text-align: center;
/* 其他 */
opacity: 1;
}
3.3 选择器规范
3.3.1 避免过度嵌套
限制选择器嵌套层级，一般不超过3层：
/* 推荐 */
.nav-item { }
.nav-item.active { }
.nav-item .icon { }
/* 不推荐 */
.header .navigation .nav-list .nav-item .nav-link { }
3.3.2 避免ID选择器
尽量使用类选择器而非ID选择器：
/* 推荐 */
.button-primary { }
/* 不推荐 */
#primary-button { }
3.4 数值和单位
3.4.1 零值单位
省略0值后面的单位：
/* 推荐 */
margin: 0;
padding: 0 10px;
/* 不推荐 */
margin: 0px;
padding: 0px 10px;
3.4.2 小数点前缀
小数值前面加上0：
/* 推荐 */
font-size: 0.8em;
/* 不推荐 */
font-size: .8em;
4. JavaScript代码规范
4.1 命名规范
4.1.1 变量命名
使用驼峰命名法，变量名应具有描述性：
// 推荐
const userName = 'John';
let productList = [];
const MAX_COUNT = 100; // 常量使用大写
// 不推荐
const user_name = 'John';
let productlist = [];
const maxcount = 100;
4.1.2 函数命名
函数名应该清晰表达其功能：
// 推荐
function getUserInfo() { }
function calculateTotalPrice() { }
function isValidEmail() { }
// 不推荐
function getInfo() { }
function calc() { }
function check() { }
4.1.3 类和构造函数
使用帕斯卡命名法：
// 推荐
class UserManager { }
class HttpRequest { }
// 不推荐
class userManager { }
class httpRequest { }
4.2 代码格式
4.2.1 缩进和空格
使用2个空格缩进，关键字后加空格：
// 推荐
if (condition) {
console.log('Hello');
}
function greet(name) {
return `Hello, ${name}!`;
}
// 不推荐
if(condition){
console.log('Hello');
}
function greet(name){
return `Hello,${name}!`;
}
4.2.2 大括号位置
左大括号不换行：
// 推荐
if (condition) {
// code
} else {
// code
}
// 不推荐
if (condition)
{
// code
}
else
{
// code
}
4.3 注释规范
4.3.1 单行注释
// 计算两个数的和
function add(a, b) {
return a + b;
}
// TODO: 需要优化性能
const expensiveOperation = () => {};
4.3.2 多行注释
/*
* 这是一个多行注释
* 用来描述复杂的逻辑
* 或者提供详细的说明
*/
function complexFunction() {
// implementation
}
4.3.3 JSDoc注释
/**
* 计算矩形面积
* @param {number} width - 宽度
* @param {number} height - 高度
* @returns {number} 面积
*/
function calculateArea(width, height) {
return width * height;
}
4.4 最佳实践
4.4.1 变量声明
优先使用 const 和 let，避免使用 var：
// 推荐
const PI = 3.14159;
let count = 0;
// 不推荐
var PI = 3.14159;
var count = 0;
4.4.2 字符串模板
使用模板字符串代替字符串拼接：
// 推荐
const message = `Hello, ${userName}! You have ${unreadCount} unread messages.`;
// 不推荐
const message = 'Hello, ' + userName + '! You have ' + unreadCount + ' unread messages.';
4.4.3 数组和对象解构
// 推荐
const [first, second] = array;
const {name, age} = user;
// 不推荐
const first = array[0];
const second = array[1];
const name = user.name;
const age = user.age;
5. 框架特定规范
5.1 React规范
5.1.1 组件命名
组件名使用帕斯卡命名法：
// 推荐
function UserProfile() { }
class TodoList extends React.Component { }
// 不推荐
function userProfile() { }
class todoList extends React.Component { }
5.1.2 JSX语法
// 推荐
const App = () => {
return (
<div className="app">
<Header />
<MainContent />
<Footer />
</div>
);
};
// 不推荐
const App = () => {
return <div className="app"><Header /><MainContent /><Footer /></div>;
};
5.2 Vue规范
5.2.1 组件结构
<template>
<div class="component-name">
<!-- 模板内容 -->
</div>
</template>
<script>
export default {
name: 'ComponentName',
props: {},
data() {
return {};
},
computed: {},
methods: {},
mounted() {}
};
</script>
<style scoped>
.component-name {
/* 样式 */
}
</style>
6. 工具化规范实施
6.1 ESLint配置
使用ESLint进行JavaScript代码检查：
{
"extends": ["eslint:recommended"],
"rules": {
"indent": ["error", 2],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}
6.2 Prettier配置
使用Prettier统一代码格式：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
6.3 Stylelint配置
使用Stylelint进行CSS代码检查：
{
"extends": ["stylelint-config-standard"],
"rules": {
"indentation": 2,
"string-quotes": "single"
}
}
7. 团队协作规范
7.1 Git提交规范
使用约定式提交格式：
feat: 新增功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具的变动
7.2 代码审查规范
建立代码审查清单：
- 代码是否符合规范
- 功能实现是否正确
- 是否有潜在的性能问题
- 是否有足够的测试覆盖
- 注释是否清晰完整
8. 总结
制定并遵循统一的代码规范对于前端团队至关重要。通过建立完善的规范体系，并借助自动化工具来执行这些规范，可以显著提高代码质量和团队协作效率。规范不是一成不变的，应该根据团队实际情况和技术发展进行适时调整和优化。
