前端HTML CSS JS风格规范

本文代码规范来自HTML/CSS代码开发规范文档

文件命名规范

使用小写字母、数字和下划线组成文件名。
避免使用特殊字符和空格。
使用语义化的命名，能够清晰地表达出文件的功能或内容。
目录结构规范

使用约定俗成的目录结构，如：src/components/、src/assets/等。
将不同类型的文件放置在不同的目录下，如：JavaScript文件放在src/目录下，样式文件放在src/styles/目录下。

缩进规范

使用两个空格进行缩进。
不要使用制表符进行缩进。

注释规范

使用单行注释 // 或多行注释 /* */。
在函数、类、变量等定义前添加注释，说明其功能和用途。
在复杂的逻辑处添加注释，解释代码的作用和实现方式。
空行规范

在函数、类、变量等定义之间使用一个空行分隔。
在条件语句、循环语句等控制结构中，每个语句块之间使用一个空行分隔。

代码换行规范

每行代码长度不超过80个字符。
长表达式可以使用括号进行换行，但要保持括号的对齐。

变量声明规范

使用 const 声明常量，使用 let 声明变量。
变量名使用小驼峰命名法，第一个单词以小写字母开头，后续单词首字母大写。
避免使用全局变量，尽量将变量限制在局部作用域内。

函数声明规范

函数名使用小驼峰命名法，第一个单词以小写字母开头，后续单词首字母大写。
函数参数使用逗号分隔，每个参数之间使用空格隔开。
函数体使用大括号包裹，保持代码的整洁和可读性。

事件处理规范

使用 addEventListener 方法绑定事件。
事件处理函数名使用小驼峰命名法，第一个单词以小写字母开头，后续单词首字母大写。
避免使用内联事件处理器，将事件处理逻辑封装在独立的函数中。

CSS规范

将样式文件分离出来，放在单独的目录下。
使用选择器时，避免使用过于具体的选择器，以提高代码的可维护性。
使用预处理器（如Sass、Less）来编写样式，提高代码的可复用性和可维护性。
使用CSS模块化技术（如CSS模块）来组织样式，避免样式冲突。

JavaScript规范

遵循ESLint或其他代码质量工具的规则。
使用严格模式 ‘use strict’。
避免使用全局变量，尽量将变量限制在局部作用域内。
使用箭头函数替代传统的函数声明。
避免重复的代码，将重复的逻辑封装在独立的函数中。
使用Promise来处理异步操作，提高代码的可读性和可维护性。

测试规范

为重要的功能编写单元测试，确保代码的正确性。
使用断言库（如Jest）来编写测试用例。
将测试用例放在单独的目录下，与被测试的代码保持相同的目录结构。
运行测试用例时，确保覆盖率达到一定的标准。