前端HTML CSS JS风格规范

news/2024/11/20 1:22:46/

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


http://www.ppmy.cn/news/1168765.html

相关文章

C语言字符型

字符型变量作用 作用: 字符型变量用于显示单个字符 如:a、b、c、d、\n等等 字符型变量语法和使用 语法: char 变量名 字符; 如: char a ‘a’; 注意:字符型是用的单引号 ‘ ’ ,并且是单个…

JS随机数功能详解

目录 一、Math.random()函数 二、生成指定范围内的随机整数 三、生成指定范围内的随机浮点数 四、生成指定范围内的随机布尔值 JavaScript中的随机功能可以通过Math对象提供的各种数学函数来实现。其中最常用的是Math.random()函数,它可以返回一个介于0和1之间的…

java的for循环中遇到异常抛出后继续循环执行

java的for循环中遇到异常抛出后继续循环执行 Test public void loopTryCatchTest() throws Exception {Map<String, Object> a new HashMap();a.put("a", "1");a.put("b", null);a.put("c", "3");for (Map.Entry<…

192:最近的系列思考2/犬岛APP 的使用理解

最近的一些契机&#xff0c;导致一些思考&#xff1a; ​ * 与产品经理意志相悖的产品* 与最初的设计定位不匹配的产品社交大牛的APP一上线就引来诸多关注&#xff0c;作为总设计的纯大大非常简明扼要的说明了这个APP的定位&#xff1a;给内涵&#xff08;含&#xff09;有趣的…

写一个简单的解释器(1) 编译过程简介

编译过程 一般来说&#xff0c;将一份源代码编译为可执行文件包含下面的关键步骤&#xff1a; 源文件 ⇒ 构建标记流 ⇒ 构建编译树 ⇒ 生成可执行文件 \texttt{源文件}\Rightarrow \texttt{构建标记流}\Rightarrow \texttt{构建编译树}\Rightarrow\texttt{生成可执行文件} 源…

Leetcode刷题解析——串联所有单词的子串

1. 题目链接&#xff1a;30. 串联所有单词的子串 2. 题目描述&#xff1a; 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["…

Hadoop3教程(三十四):(生产调优篇)MapReduce生产经验汇总

文章目录 &#xff08;164&#xff09;MR跑得慢的原因&#xff08;165&#xff09;MR常用调优参数Map阶段Reduce阶段 &#xff08;166&#xff09;MR数据倾斜问题参考文献 &#xff08;164&#xff09;MR跑得慢的原因 MR程序执行效率的瓶颈&#xff0c;或者说当你觉得你的MR程…

git初学者使用教程(包含Android studio中git使用)

文章目录 1、登录 / 注册git账号2、创建git仓库3、设置git的用户名和邮箱4、创建git仓库5、已有仓库推送代码到远程仓库6、进阶使用&#xff0c;命令行和Android studio软件使用1. 克隆&#xff08;Clone&#xff09;源码仓库2. 查看仓库状态&#xff08;Status&#xff09;3. …