代码规范是编写高质量、可维护代码的基础。良好的代码规范能提高代码可读性、减少错误、便于团队协作。
东巴文（db-w.cn） 认为：代码规范不仅是技术要求,更是专业素养的体现,规范的代码是给未来的自己和他人最好的礼物。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML代码规范示例 - 东巴文">
<meta name="keywords" content="HTML, 代码规范, 最佳实践">
<meta name="author" content="东巴文">
<title>HTML代码规范 - 东巴文</title>
<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 规范演示 */
.demo-box {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 5px;
}
.good-example {
background: #d4edda;
border-color: #28a745;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
.bad-example {
background: #f8d7da;
border-color: #dc3545;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
font-size: 14px;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML代码规范</h1>
<h2>1. 文档类型声明</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
<!DOCTYPE html><br>
<html lang="zh-CN">
</div>
</div>
<h2>2. 字符编码</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
<meta charset="UTF-8">
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</div>
</div>
<h2>3. 语义化标签</h2>
<div class="good-example">
<strong>✓ 推荐：使用语义化标签</strong>
<div class="code-block">
<header>头部</header><br>
<nav>导航</nav><br>
<main>主要内容</main><br>
<article>文章</article><br>
<section>区块</section><br>
<aside>侧边栏</aside><br>
<footer>页脚</footer>
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：滥用div</strong>
<div class="code-block">
<div class="header">头部</div><br>
<div class="nav">导航</div><br>
<div class="main">主要内容</div>
</div>
</div>
<h2>4. 属性顺序</h2>
<p>建议按以下顺序排列属性：</p>
<div class="code-block">
<input<br>
type="text"<br>
id="username"<br>
name="username"<br>
class="form-control"<br>
placeholder="请输入用户名"<br>
required>
</div>
<table class="info-table">
<thead>
<tr>
<th>顺序</th>
<th>属性类型</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>class</td>
<td>class="container"</td>
</tr>
<tr>
<td>2</td>
<td>id, name</td>
<td>id="main", name="email"</td>
</tr>
<tr>
<td>3</td>
<td>data-*</td>
<td>data-id="123"</td>
</tr>
<tr>
<td>4</td>
<td>src, href, type</td>
<td>src="image.jpg", href="#"</td>
</tr>
<tr>
<td>5</td>
<td>其他属性</td>
<td>placeholder, required</td>
</tr>
</tbody>
</table>
<h2>5. 布尔属性</h2>
<div class="good-example">
<strong>✓ 推荐：布尔属性不需要赋值</strong>
<div class="code-block">
<input type="text" required><br>
<input type="checkbox" checked><br>
<button disabled>按钮</button><br>
<option selected>选项</option>
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
<input type="text" required="required"><br>
<input type="checkbox" checked="checked">
</div>
</div>
<h2>6. 自闭合标签</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
<img src="image.jpg" alt="图片"><br>
<br><br>
<hr><br>
<input type="text"><br>
<meta charset="UTF-8">
</div>
</div>
<h2>7. 图片必须有alt属性</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
<img src="logo.png" alt="东巴文Logo"><br>
<img src="photo.jpg" alt="产品照片 - 智能手机">
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
<img src="logo.png"><br>
<img src="photo.jpg" alt="">
</div>
</div>
<h2>8. 缩进和格式</h2>
<div class="good-example">
<strong>✓ 推荐：使用2或4个空格缩进</strong>
<div class="code-block">
<ul><br>
<li>项目1</li><br>
<li>项目2</li><br>
<li>项目3</li><br>
</ul>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>使用编辑器的格式化功能（如Prettier）自动格式化代码,保持代码风格一致。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS代码规范示例</title>
<style>
/* ====================
基础样式
==================== */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
line-height: 1.6;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* ====================
规范演示
==================== */
.good-example {
background: #d4edda;
border: 2px solid #28a745;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
.bad-example {
background: #f8d7da;
border: 2px solid #dc3545;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
font-size: 14px;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS代码规范</h1>
<h2>1. 选择器命名</h2>
<div class="good-example">
<strong>✓ 推荐：使用小写字母和连字符</strong>
<div class="code-block">
.navigation-bar { }<br>
.user-profile { }<br>
.product-card { }<br>
.btn-primary { }
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
.navigationBar { } /* 驼峰命名 */<br>
.userProfile { } /* 驼峰命名 */<br>
.product_card { } /* 下划线 */<br>
.btnPrimary { } /* 驼峰命名 */
</div>
</div>
<h2>2. 属性顺序</h2>
<p>建议按以下顺序组织CSS属性：</p>
<div class="code-block">
.element {<br>
/* 1. 定位 */<br>
position: absolute;<br>
top: 0;<br>
left: 0;<br>
z-index: 10;<br><br>
/* 2. 盒模型 */<br>
display: block;<br>
width: 100px;<br>
height: 100px;<br>
margin: 10px;<br>
padding: 15px;<br><br>
/* 3. 边框和背景 */<br>
border: 1px solid #ddd;<br>
background: white;<br><br>
/* 4. 文本 */<br>
color: #333;<br>
font-size: 16px;<br>
text-align: center;<br><br>
/* 5. 其他 */<br>
cursor: pointer;<br>
transition: all 0.3s;<br>
}
</div>
<h2>3. 简写属性</h2>
<div class="good-example">
<strong>✓ 推荐：使用简写属性</strong>
<div class="code-block">
.element {<br>
margin: 10px 20px;<br>
padding: 15px;<br>
border: 1px solid #ddd;<br>
background: #f5f5f5;<br>
font: 16px/1.5 'Segoe UI', sans-serif;<br>
}
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
.element {<br>
margin-top: 10px;<br>
margin-right: 20px;<br>
margin-bottom: 10px;<br>
margin-left: 20px;<br>
padding-top: 15px;<br>
padding-right: 15px;<br>
padding-bottom: 15px;<br>
padding-left: 15px;<br>
}
</div>
</div>
<h2>4. 颜色值</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
.element {<br>
color: #333;<br>
background: #f5f5f5;<br>
border-color: rgba(0, 0, 0, 0.1);<br>
}
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
.element {<br>
color: #333333; /* 不需要重复 */<br>
background: rgb(245, 245, 245);<br>
}
</div>
</div>
<h2>5. 值为0时不写单位</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
.element {<br>
margin: 0;<br>
padding: 0 10px;<br>
border: none;<br>
}
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
.element {<br>
margin: 0px;<br>
padding: 0px 10px;<br>
border: 0px;<br>
}
</div>
</div>
<h2>6. 避免使用!important</h2>
<div class="good-example">
<strong>✓ 推荐：通过提高选择器优先级</strong>
<div class="code-block">
.container .button {<br>
background: #667eea;<br>
}
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
.button {<br>
background: #667eea !important;<br>
}
</div>
</div>
<h2>7. 注释规范</h2>
<div class="code-block">
/* ====================<br>
区块标题<br>
==================== */<br><br>
/* 单行注释 */<br><br>
/**<br>
* 多行注释<br>
* 说明：组件样式<br>
* 作者：东巴文<br>
* 日期：2024-01-01<br>
*/
</div>
<h2>8. 媒体查询组织</h2>
<div class="code-block">
/* 移动优先 */<br>
.element {<br>
font-size: 14px;<br>
}<br><br>
/* 平板 */<br>
@media (min-width: 768px) {<br>
.element {<br>
font-size: 16px;<br>
}<br>
}<br><br>
/* 桌面 */<br>
@media (min-width: 992px) {<br>
.element {<br>
font-size: 18px;<br>
}<br>
}
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>使用CSS预处理器（如Sass、Less）可以更好地组织代码,使用变量、嵌套和混合等功能。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript代码规范示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.good-example {
background: #d4edda;
border: 2px solid #28a745;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
.bad-example {
background: #f8d7da;
border: 2px solid #dc3545;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
font-size: 14px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>JavaScript代码规范</h1>
<h2>1. 变量声明</h2>
<div class="good-example">
<strong>✓ 推荐：使用const和let</strong>
<div class="code-block">
// 常量<br>
const MAX_SIZE = 100;<br>
const API_URL = 'https://db-w.cn/api';<br><br>
// 变量<br>
let count = 0;<br>
let userName = '东巴文';
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：使用var</strong>
<div class="code-block">
var count = 0;<br>
var userName = '东巴文';
</div>
</div>
<h2>2. 命名规范</h2>
<table class="info-table">
<thead>
<tr>
<th>类型</th>
<th>命名规则</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>变量</td>
<td>小驼峰（camelCase）</td>
<td>userName, totalCount</td>
</tr>
<tr>
<td>常量</td>
<td>全大写+下划线</td>
<td>MAX_SIZE, API_URL</td>
</tr>
<tr>
<td>函数</td>
<td>小驼峰（camelCase）</td>
<td>getUserInfo, handleClick</td>
</tr>
<tr>
<td>类</td>
<td>大驼峰（PascalCase）</td>
<td>UserService, ProductCard</td>
</tr>
<tr>
<td>私有属性</td>
<td>下划线前缀</td>
<td>_privateMethod</td>
</tr>
</tbody>
</table>
<h2>3. 函数定义</h2>
<div class="good-example">
<strong>✓ 推荐：使用箭头函数</strong>
<div class="code-block">
// 箭头函数<br>
const add = (a, b) => a + b;<br><br>
// 多行函数<br>
const calculate = (a, b) => {<br>
const sum = a + b;<br>
return sum * 2;<br>
};<br><br>
// 对象方法<br>
const user = {<br>
name: '东巴文',<br>
greet() {<br>
return `你好，${this.name}`;<br>
}<br>
};
</div>
</div>
<h2>4. 字符串</h2>
<div class="good-example">
<strong>✓ 推荐：使用模板字符串</strong>
<div class="code-block">
const name = '东巴文';<br>
const greeting = `你好，${name}！`;<br><br>
// 多行字符串<br>
const html = `<br>
<div><br>
<h1>${name}</h1><br>
</div><br>
`;
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
const name = '东巴文';<br>
const greeting = '你好，' + name + '！';
</div>
</div>
<h2>5. 解构赋值</h2>
<div class="good-example">
<strong>✓ 推荐：</strong>
<div class="code-block">
// 对象解构<br>
const { name, age } = user;<br><br>
// 数组解构<br>
const [first, second] = items;<br><br>
// 函数参数解构<br>
const greet = ({ name, age }) => {<br>
console.log(`${name}, ${age}岁`);<br>
};
</div>
</div>
<h2>6. 异步操作</h2>
<div class="good-example">
<strong>✓ 推荐：使用async/await</strong>
<div class="code-block">
// async/await<br>
async function fetchData() {<br>
try {<br>
const response = await fetch('/api/data');<br>
const data = await response.json();<br>
return data;<br>
} catch (error) {<br>
console.error('获取数据失败:', error);<br>
}<br>
}
</div>
</div>
<div class="bad-example">
<strong>✗ 不推荐：</strong>
<div class="code-block">
// Promise链<br>
function fetchData() {<br>
return fetch('/api/data')<br>
.then(response => response.json())<br>
.then(data => data)<br>
.catch(error => {<br>
console.error('获取数据失败:', error);<br>
});<br>
}
</div>
</div>
<h2>7. 注释规范</h2>
<div class="code-block">
/**<br>
* 函数说明<br>
* @param {string} name - 用户名<br>
* @param {number} age - 年龄<br>
* @returns {string} 问候语<br>
*/<br>
function greet(name, age) {<br>
// 单行注释<br>
const message = `你好，${name}`;<br>
return message;<br>
}
</div>
<h2>8. 代码组织</h2>
<div class="code-block">
// 1. 导入模块<br>
import { UserService } from './services';<br><br>
// 2. 常量定义<br>
const MAX_RETRY = 3;<br><br>
// 3. 变量定义<br>
let currentUser = null;<br><br>
// 4. 函数定义<br>
function init() {<br>
// 初始化代码<br>
}<br><br>
// 5. 事件监听<br>
document.addEventListener('DOMContentLoaded', init);<br><br>
// 6. 导出<br>
export { init };
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>使用ESLint和Prettier自动检查和格式化JavaScript代码,保持代码风格一致。
</div>
</div>
</body>
</html>
| 类型 | 规范 | 示例 | 说明 |
|---|---|---|---|
| 文件名 | 小写+连字符 | user-profile.js |
多个单词用连字符分隔 |
| 类名 | 大驼峰 | UserService |
每个单词首字母大写 |
| 函数名 | 小驼峰 | getUserInfo() |
第一个单词小写，后续首字母大写 |
| 变量名 | 小驼峰 | userName |
同函数名 |
| 常量名 | 全大写+下划线 | MAX_SIZE |
全大写，单词间用下划线 |
| CSS类名 | 小写+连字符 | .user-profile |
多个单词用连字符分隔 |
| ID名 | 小驼峰或连字符 | #userProfile 或 #user-profile |
保持项目一致性 |
| 私有属性 | 下划线前缀 | _privateMethod |
表示私有或内部使用 |
<!-- 单行注释 -->
<!--
多行注释
说明：页面头部
作者：东巴文
日期：2024-01-01
-->
<!-- TODO: 待办事项 -->
<!-- FIXME: 需要修复的问题 -->
<!-- NOTE: 重要说明 -->
/* 单行注释 */
/**
* 多行注释
* 说明：组件样式
* 作者：东巴文
*/
/* ====================
区块标题
==================== */
// 单行注释
/*
* 多行注释
* 说明：功能描述
*/
/**
* JSDoc注释
* @param {string} name - 用户名
* @returns {string} 问候语
*/
function greet(name) {
return `你好，${name}`;
}
// TODO: 待办事项
// FIXME: 需要修复的问题
// HACK: 临时解决方案
// NOTE: 重要说明
// .prettierrc
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid"
}
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
'indent': ['error', 2],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always'],
},
};
// ✓ 推荐
const isActive = user.age >= 18 && user.verified;
// ✗ 不推荐
let isActive = false;
if (user.age >= 18) {
if (user.verified) {
isActive = true;
}
}
// ✓ 推荐
const MAX_RETRY = 3;
for (let i = 0; i < MAX_RETRY; i++) {
// 重试逻辑
}
// ✗ 不推荐
for (let i = 0; i < 3; i++) {
// 重试逻辑
}
// ✓ 推荐
function validateEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function sendEmail(email, content) {
// 发送邮件逻辑
}
// ✗ 不推荐
function validateAndSendEmail(email, content) {
if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
// 发送邮件逻辑
}
}
// ✓ 推荐
const users = ['Alice', 'Bob', 'Charlie'];
const userCount = users.length;
const isUserLoggedIn = true;
// ✗ 不推荐
const u = ['Alice', 'Bob', 'Charlie'];
const n = u.length;
const flag = true;
问题1：以下哪个变量命名符合JavaScript规范？
A. user-name
B. userName
C. UserName
D. username
答案：B
东巴文解释：JavaScript变量应使用小驼峰命名法（camelCase），第一个单词小写，后续单词首字母大写。选项A包含连字符，选项C是大驼峰（用于类名），选项D虽然合法但不符合常见规范。
</details>问题2：以下哪个CSS选择器命名最规范？
A. .navigationBar
B. .navigation-bar
C. .Navigation_Bar
D. .NAVIGATIONBAR
答案：B
东巴文解释：CSS类名应使用小写字母和连字符分隔单词，这样更清晰易读。选项A使用驼峰命名，选项C混合大小写和下划线，选项D全大写不符合规范。
</details>任务：重构以下代码，使其符合代码规范。
// 原始代码
var x=10;
var y=20;
function calc(a,b){return a+b}
var result=calc(x,y)
console.log(result)
// 重构后的代码
const FIRST_NUMBER = 10;
const SECOND_NUMBER = 20;
/**
* 计算两个数的和
* @param {number} a - 第一个数
* @param {number} b - 第二个数
* @returns {number} 两数之和
*/
const calculateSum = (a, b) => a + b;
const result = calculateSum(FIRST_NUMBER, SECOND_NUMBER);
console.log(result);
改进说明：
const替代var东巴文（db-w.cn） - 让编程学习更有趣！