前端代码规范

### 前端代码规范详解 #### 一、命名规范 **1. 驼峰式命名法** - **PascalCase（大驼峰式命名法）**：每个单词的首字母都大写，适用于类名等。例如：`StudentInfo`、`UserInfo`、`ProductInfo`。 - **CamelCase（小驼峰式命名法）**：只有第一个单词的首字母小写，其余单词首字母大写，适用于变量和函数名等。例如：`studentInfo`、`userInfo`、`productInfo`。 **2. 文件资源命名** - 文件名不得含有空格。 - 文件名建议只使用小写字母，避免使用大写字母。但为了醒目，某些说明文件的文件名可以使用大写字母，如 `README`、`LICENSE`。 - 文件名包含多个单词时，建议使用半角的连词线 `-` 分隔单词。 - 引入资源时使用相对路径，不指定具体协议 (`http:` 或 `https:`)，除非这两种协议均不可用。推荐的做法是 `<script src="//cdn.com/foundation.min.js"></script>` 而非 `<script src="http://cdn.com/foundation.min.js"></script>`。 **3. 变量命名** - 命名方式：小驼峰式命名方法。 - 命名规范：使用类型+对象描述的方式，如果没有明确的类型，则以名词作为前缀。例如：`let arrayData`, `let tableTitle`。 **4. 函数命名** - 命名方式：小驼峰式命名方法。 - 命名规则：前缀为动词。例如：`function getName() { return this.name; }` **5. 常量命名** - 命名方法：全部大写。 - 命名规则：使用大写字母和下划线组合命名，下划线用来分割单词。例如：`const MAX_COUNT` **6. 类名** - 命名方式：大驼峰式命名方法。例如：`class MyClass {}` **7. CSS命名** - 类名使用小写字母，以中划线分隔。例如：`.element-content`。 - ID采用小驼峰式命名。例如：`#myDialog`。 #### 二、注释规范 **1. 单行注释** - 单独一行：`// (双斜线)` 与注释文字之间保留一个空格。 - 在代码后面添加注释：`// (双斜线)` 与代码之间保留一个空格，并且 `// (双斜线)` 与注释文字之间也保留一个空格。例如： ```javascript // 调用了一个函数； setTitle(); ``` **2. 多行注释** - 若至少三行注释时，第一行为 `/*`，最后行为 `*/`，其他行以 `*` 开始，并且注释文字与 `*` 保留一个空格。例如： ```javascript /* * 代码执行到这里后会调用setTitle()函数 * setTitle()：设置title的值 */ ``` **3. 函数（方法）注释** - 使用 JSDoc 样式的注释，描述函数的作用、参数和返回值。例如： ```javascript /** * 函数说明 * @param name {String} * @return true {Boolean} */ function getName() { return this.name; } ``` **4. CSS 注释** - 文件头注释：包括样式模块的描述、作者、版本号、修改记录等信息。 - 对于 HTML 模块需要添加相应的 CSS 注释，以说明该部分的功能或注意事项。 - 特殊的 hack（如 IE6 浏览器兼容性处理）要添加注释。 - 修改别人的 CSS 时，请添加注释说明修改的原因和时间。 ```css /* 主要修改IE8浏览器兼容性问题 djune 2013-09-26 13:21 */ ``` **5. HTML 注释** - 较长的 HTML 文件，在不同的功能板块之间加入注释，以提高代码可读性和维护性。例如： ```html <!-- 活动板块开始 --> <div class="part-act"> </div> <!-- 活动板块结束 --> ``` #### 三、HTML 规范 **1. 语言规范** - doctype 声明使用 HTML5。 - 统一页面编码格式为 UTF-8，`<meta charset="utf-8"/>`。 - 所有 HTML 标签和属性名使用小写字母。 - 所有 HTML 标签必须有结束符，除了 `<img/>`、`<col/>`、`<base/>`、`<link/>`、`<meta/>`、`<input/>` 这些自闭合标签。 - 自定义属性使用 `data-` 的形式来写，如 `data-name="value"`。如果自定义属性特别多，可以考虑使用标准 JSON 的方式去写：`data-json='{"a":"a","b":"b"}'`。 以上就是关于前端代码规范的一些基本要求和建议，这些规范旨在提高代码的可读性、可维护性以及团队协作效率。在实际开发过程中，可以根据项目特点进行适当的调整和补充。