前端HTML CSS JS风格规范-CSDN博客

本文代码规范来自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来编写测试用例。
将测试用例放在单独的目录下与被测试的代码保持相同的目录结构。
运行测试用例时确保覆盖率达到一定的标准。