代码规范
Web 标准
Web 标准并非单一标准，是 W3C（万维网联盟） 以及其他标准化组织共同制定的一套技术规范集合。
狭义 Web 标准常被理解为 DIV+CSS 布局；广义 Web 标准指代码遵循 W3C、ECMA 各类技术规范。
网页分为结构、表现、行为三部分，对应不同标准：
- 结构化标准：XML、XHTML、HTML5；
- 表现标准：CSS；
- 行为标准：W3C DOM、ECMAScript。
备注：W3C 创建于 1994 年，是 Web 领域权威中立国际技术组织，目标是制定通用协议，保障 Web 互操作性，充分发挥万维网能力。
备注：多数标准由 W3C 制定；ECMAScript 由 ECMA（欧洲计算机制造商协会）组织制定。
结构标准语言
XML（可扩展标记语言）：推荐遵循 XML 1.0（W3C，2000-10-06）。XML 源自 SGML，是一门可以定义其他语言的标记语言。设计初衷弥补 HTML 扩展性短板，多用于数据转换、数据描述。
XHTML（可扩展超文本标记语言）：在 HTML4.0 基础上套用 XML 的严格语法规则得到。目的：实现从 HTML 向 XML 的平滑过渡；要求标签全部闭合、属性加引号、标签小写，语法严格。
HTML5：HTML 的现代主流版本，不再基于 SGML，是独立的标记语言标准。
- 新增大量语义化标签：
header、nav、main、section、article、aside、footer，提升可读性、SEO 与无障碍适配； - 原生多媒体：
<video>、<audio>，淘汰 Flash； - 表单增强：新增
tel、email、date等输入类型，原生校验； - 新增Web API：Canvas、SVG、本地存储、拖拽、地理位置、Web Worker等；
- 语法更加宽松：空标签不需要闭合斜杠；布尔属性可只写属性名，不强制写
属性="属性"； - 核心理念：一次编写，多浏览器、多终端兼容运行。
表现标准语言
CSS（Cascading Style Sheets，层叠样式表）。 CSS2 为 W3C 1998 年发布推荐标准；目标是替代 HTML 表格布局，实现结构与样式分离，提升可维护性。CSS 后续采用模块化迭代（CSS3 为模块集合，并非单一大版本）。
行为标准
- DOM（文档对象模型）：一套和浏览器、平台、编程语言无关的接口。解决早期 Netscape JS 和微软 JScript 的 API 不兼容问题，提供统一操作网页文档的标准方式。
- ECMAScript：ECMA 组织制定的脚本语言标准，JavaScript 就是该标准的实现，规范编号 ECMA-262。
W3C 验证要点
- 所有图片设置有意义
alt属性，对齐效果交给 CSS 实现； - 文档添加正确 DOCTYPE 文档类型声明；HTML5 简化为
<!DOCTYPE html>； - 页面 ID 全局唯一，重复 ID 会产生冲突，优先使用 class；
- 属性值引号：优先双引号，单引号也可通过校验，不可省略；
- 标签嵌套合法，不可错位；标签名统一小写；
- 标签完整闭合；HTML5 空标签不需要尾部
/； - 特殊字符使用 HTML 字符实体转义，例如
&写成&； - 页面必须存在
<title>； - 事件尽量 JS 绑定，不使用伪空链接；
- CSS、JS 尽量外部引入，样式优先使用 class，避免行内样式。
遵循Web标准的价值
不同浏览器解析存在差异，遵循Web标准，让页面在各设备浏览器渲染结果统一。
- 适配更多类型设备访问；
- 利于搜索引擎抓取；
- 降低流量开销；
- 代码易于维护迭代；
- 提升页面加载性能。
本质：让机器、其他开发者更容易读懂代码。
高质量可维护代码特征：可读性好、注释、文档完善、编码风格统一、模块化、低耦合。
高质量代码三要素
- 可读性：代码容易阅读、理解、跟踪；
- 可维护性：理解、修改、排错、升级成本低；
- 可变更性：应对需求变更，修改代价可控。
命名规范
四种经典命名风格：
- 小驼峰（驼峰式）：
userInfo，首单词小写，后续单词首字母大写； - 匈牙利命名：变量类型缩写作为前缀；
- 大驼峰（帕斯卡）：
UserInfo，每个单词首字母大写； - 下划线命名：
user_info，全部小写，下划线分隔单词。
通用语言命名
| 分类 | 常用名称 |
|---|---|
| 文字 | title、tips、msg、info、description |
| 图片 | avatar、logo、arrow、thumbnail |
| 标签组件 | btn、nav、popup、crumb、pagination |
| 功能 | login、register、search、submit、share、copyright |
| 容器 | container、wrap、wrapper、module |
| 内容 | content、main、section、slide |
| 状态 | active、disabled、selected、error、success、hide |
| 层级 | primary、secondary、sub |
| 序列 | first、last、even、odd、previous、next |
下划线和连字符
- SEO（URL文件名）：早期谷歌把下划线视作单词整体，连字符做单词分隔；现在搜索引擎两者都支持。
- 编程语言导入：Python、Java 包、模块不允许连字符，只能使用下划线；变量标识符不能使用
-。 - LaTeX等工具：文件名尽量避免下划线，会解析异常。
- 编辑器交互：下划线双击可以一次性选中整个标识符；正则
\w包含下划线字符。
推荐：文件名、CSS 类名优先下划线命名；在 css-module 的 React、Vue 项目中更友好。
HTML 代码规范
- 语言属性：
<html lang="zh-CN">，标识页面语言。 - 字符编码：
<meta charset="UTF-8">，统一写大写UTF-8，不要写utf8、UTF8。
HTML元素分类
- 空元素：
br、hr、img、input、link、meta、source等；HTML5空标签不需要末尾/。 - 原始文本元素：
script、style。 - RCDATA（可转义原始文本元素）：
textarea、title。 - 外来元素：SVG、MathML命名空间标签。
- 常规元素：其余普通标签，起止标签必须完整书写。
编码风格
- 标签名、class、属性名统一小写；属性值使用双引号。
- HTML5 不需要给 script、link 设置
type属性。 - 布尔属性直接写属性名即可，XHTML 时代要求属性=属性值的写法可以不再强制。
- 图片必须写有业务含义的
alt。 - form 表单配套
<label>提升无障碍访问。 - 属性书写顺序：
class→id→name→data-*→src、href、type、value→placeholder、title、alt→aria-*、role→required、readonly、disabled。 - 特殊符号使用HTML字符实体转义。
- 缩进：二空格或四空格，项目统一即可；块状元素独立一行；减少多余嵌套节点。
- 列表内容必须放在
<ul>、<ol>、<dl>中，不要单纯用div、p模拟列表。 - 注释：单行注释放在代码上方；模块注释标记模块起止。
HTML模板
HTML5基础模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
</body>
</html>
移动端模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="width">
<meta name="renderer" content="webkit">
<title></title>
</head>
<body>
</body>
</html>
PC端模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC页面</title>
</head>
<body>
</body>
</html>
CSS 代码规范
@charset
样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 UTF-8 。
@charset "UTF-8";
- UTF-8 编码：为世界统一编码，可以兼容全世界的操作系统，不会出现乱码情况。缺点是体积稍大点。
- gb2312 编码：国外的浏览者可能会出现乱码，一般面向全球网站使用
UTF-8；仅面向国内内网项目可选用 gb2312。 - 使用 UTF-8 注意两点：HTML 页面
<meta charset="UTF-8">；CSS、HTML 文件本身保存为 UTF-8 编码格式。
编码风格
- class 使用连字符，id 使用小驼峰；
- 展开式书写：一个属性占一行，每条属性末尾加分号；
- 慎用全局通配选择器
*；尽量少用 ID 选择器；避免无意义标签选择器； - 缩进统一2空格；
- 选择器左括号前一个空格；属性冒号后面一个空格；
- 十六进制颜色尽量简写，
#fff； - 数值为
0不加单位；小数省略前导零，.5px； - 属性内字符串统一使用单引号；图片 url 不要加引号。
属性书写顺序
- 布局定位：display、position、float、clear、overflow、z-index；
- 盒模型自身：width、height、margin、padding、border、background；
- 文本样式：color、font、text-align、text-decoration、vertical-align；
- CSS3其他：border-radius、box-shadow、transform、transition、animation；
- 浏览器私有前缀写在标准属性前面。
.box {
/* 布局定位 */
display: flex;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 10;
/* 盒模型 */
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
background: #fff;
/* 文本 */
color: #333;
font-size: 14px;
text-align: center;
}
JavaScript 代码规范
严格模式
严格模式主要变化：
- 意外赋值自动创建全局变量会报错；
- 对只读属性赋值、删除不可删除属性抛出异常；
- 对象属性名、函数参数名不能重复；
- 禁止八进制字面量语法；
- 禁止
with；eval拥有独立作用域； - 禁止使用
arguments.callee； call、apply传入原始值不会自动包装为对象；- 新增一批保留关键字：
let、yield、class等。
编码规范
- 推荐使用 ES6+ 语法：
const、let、解构、扩展运算符、箭头函数、import、export模块； - 对象、数组优先使用字面量；
- 禁止在原生内置对象原型上新增方法；
- 比较优先使用
===、!==，尽量避开==、!=； - 常量全大写，下划线分隔；
if、for必须使用大括号包裹代码块；switch必须写default分支；- 合理控制空格、空行，项目保持统一风格。
JS命名规范
- 普通变量：小驼峰；可使用匈牙利命名增加类型前缀（a 数组、b 布尔、n 数字、s 字符串、o 对象）。
普通函数：动词+名词；内部私有函数加下划线前缀；事件处理函数体现触发源。
类、构造函数：大驼峰。
- 循环临时变量 i、j、k；局部短变量允许简写；常量全大写下划线分隔。
get 获取
set 设置
add 增加
remove 删除
create 创建
destroy 移除
start 启动
stop 停止
open 打开
close 关闭
read 读取
write 写入
load 载入
save 保存
begin 开始
end 结束
backup 备份
restore 恢复
import 导入
export 导出
split 分割
merge 合并
bind 绑定
separate 分离
search 搜索
edit 编辑
copy 复制
paste 粘贴
insert 插入
delete 移除
find 查找
sort 排序
send 发送
receive 接收
update 更新
submit 提交
注释
可使用 JSDoc 注释，借助工具生成 API 文档。