项目创建

遵循一定的规范有助于提高项目的可维护性、可扩展性和团队协作效率

不同框架与语言的基本项目结构是不同的，例如前端以HTML+CSS+JS创建的项目结构相对比较简单，项目中包含的文件夹为css(css文件存放)、img(静态资源存放，例如图片、视频、音频等)、js(js逻辑代码存放)
这里以HBuilder编辑器举例创建新的基本HTML项目
1.选择基本HTML项目
2.输入新项目的名称(建议使用英文，中文会造成编码问题)
3.注意选择项目的创建地址(建议选择除C盘外的盘符)

目录结构

新建好后会自动生成三个文件夹以及一个html文件
css文件夹用来存放页面的层叠样式表文件
img文件夹用来存放项目中需要用到的静态资源，如图片、视频、音频
js文件夹用来存放页面的脚本文件以及项目中需要用到的插件、库之类的js文件
index.html为项目的首页文件（入口文件），首页的内容建议写到该文件中，同时不建议修改该文件的文件名

除了这些基础的之外，我们的项目中如果用到了很多插件、组件或者封装好的库，都放在js中就会显得比较乱，可以自行额外创建用来存储外部资源的目utils或modules
再或者可以把我们项目中公共的方法、样式等也都单独创建好文件，统一放在自行创建的public目录中
建议使用良好清晰的目录结构，方便方便我们开发者对于项目的掌握了解，提高我们的开发效率

命名规范

开发时符合文件命名规范具有诸多显著的好处
● 直观理解文件内容：使用有意义且符合规范的文件名，开发者能迅速了解文件的用途和大致内容。例如，user-login.js 这个文件名清晰表明该文件与用户登录功能相关，相比随意命名的 abc.js，开发者无需花费额外时间去探究其功能
● 快速定位文件：在大型项目中，往往包含大量文件。规范的命名能帮助开发者快速定位到所需文件。比如在一个电商项目里，若遵循规范将商品详情页的样式文件命名为 product-detail.css，当需要修改商品详情页样式时，能迅速找到该文件
● 便于后续修改和扩展：随着项目的发展，代码需要不断修改和扩展。规范的文件名能让开发者轻松识别文件在项目中的角色和作用，从而更高效地进行修改和扩展。例如，payment-service.js 这个文件负责处理支付服务相关逻辑，当需要添加新的支付方式时，开发者能准确找到该文件进行修改
● 降低出错概率：规范的命名可以减少因文件名混乱导致的错误。比如在引用文件时，如果文件名规范，就能避免因拼写错误或文件名相似而引用错误的文件
● 统一团队认知：在团队开发中，所有成员遵循相同的文件命名规范，能确保大家对文件的理解一致。例如，团队约定使用下划线命名法（snake_case），那么所有成员都能快速理解 user_profile_page.html 这样的文件名含义，避免因命名风格不一致而产生沟通成本
● 提高协作效率：规范的命名使得团队成员在交接工作或共同开发时，能够更快地熟悉代码结构和文件组织，提高开发效率。比如，新成员加入项目后，通过规范的文件名能快速了解项目的大致功能模块和文件分布
● 清晰记录变更：在使用版本控制系统（如 Git）时，规范的文件名能更清晰地记录文件的变更历史。当查看提交记录时，能准确知道哪些文件发生了变化以及变化的大致内容。例如，提交信息 “修改 user-profile.css 文件中的字体样式”，由于文件名规范，能明确知道修改的是用户资料页面的样式文件
● 方便回滚操作：如果需要回滚到某个版本，规范的文件名能让开发者更容易找到需要恢复的文件，减少回滚过程中的错误
● 符合行业标准：遵循通用的文件命名规范，能使项目更符合行业标准，便于与其他开发者或团队进行交流和合作。例如，大多数前端项目都遵循特定的命名规范，采用这些规范能让项目更容易被其他开发者理解和接受
● 体现专业素养：规范的文件命名是一个项目专业度的体现，能给客户、合作伙伴或其他利益相关者留下良好的印象

文件命名通用规则

● 使用小写字母：按照规范使用驼峰、间隔符等命名
● 使用连字符分隔：使用连字符 - 分隔单词，如 user-info.html
● 避免特殊字符：文件名中不要使用特殊字符，如 @、#、$ 等，只使用字母、数字和连字符

不同类型文件命名：

● HTML文件：根据页面内容或功能命名，如 user-info.html（userInfo.html）、info-edit.html
● CSS 文件：与对应的页面或组件相关联，如 user-info.css（userInfo.css）、public-nav.css
● JavaScript 文件：根据对应页面或功能命名，如 user-info.js（userInfo.js）、banner.js
● 图片文件：使用描述性名称，如 product-image.jpg、logo-icon.png

代码命名规范

开发代码书写规范对于提高代码的可读性、可维护性和可扩展性至关重要

通用规范

● 有意义的名称：变量、函数、类等的命名要能清晰表达其用途和功能，避免使用无意义的缩写或随机字符。例如，使用 userName 而不是 un 来表示用户名
● 遵循命名约定：不同语言有不同的命名约定，常见的有驼峰命名法（CamelCase）和蛇形命名法（snake_case）。一般来说，类名常用大驼峰命名法（每个单词首字母大写），变量和函数名常用小驼峰命名法（除第一个单词外，其余单词首字母大写）或蛇形命名法（单词之间用下划线分隔）

代码规范

不同编辑器可以使用对应的方式进行代码格式化，如HBuilder可以使用CTRL+K 快捷对代码进行格式化，VS Code 可以使用SHIFT+ALT+F快捷对代码格式化
● 一致的缩进：使用统一的缩进风格，如 2 个或 4 个空格，避免使用制表符。缩进可以使代码结构更清晰，便于阅读和理解
● 适当的空格和换行：在运算符、逗号、括号等周围使用适当的空格，使代码更易读。同时，合理使用换行来分隔不同的代码块和逻辑

没有空格和换行
有空格和换行

HTML代码规范

1.HTML标签是由尖括号包围的关键词，例如 。
2.HTML标签通常是成对出现的，例如 和 ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例，我们称为单标签。
4.双标签关系可以分为两类: 包含关系(父子关系) 和 并列关系(兄弟关系)。

标签闭合

所有标签都要正确闭合，包括单标签（如 、、
等）。虽然 HTML5 中部分单标签不闭合也能显示，但为了兼容性和代码规范性，建议闭合

标签语义化

优先使用语义化标签（如<header>、<nav>、<main>、<article>、<section>、<footer>等），它们能清晰表达页面结构和内容的含义，有利于搜索引擎优化（SEO）和屏幕阅读器等辅助设备理解页面

标签嵌套规则

标签嵌套要符合 HTML 语法规则，父标签要正确包裹子标签

属性引号

属性值必须使用双引号括起来

布尔属性

布尔属性（如 disabled、checked、readonly 等）不需要赋值，直接写属性名即可

注释规范

在关键区域添加注释，帮助其他开发者理解代码结构和功能。例如在复杂布局、特殊功能模块或条件判断处添加注释

避免内联样式和脚本

尽量将 CSS 样式和 JavaScript 代码分离到外部文件中，提高代码的可维护性和复用性。如果需要使用内联样式或脚本，应确保其简洁且仅用于临时或特定的情况

减少不必要的标签和属性

避免使用过多的无意义标签和属性，保持代码简洁，提高页面加载性能。

CSS代码规范

注释

块注释：用于对一组样式规则或某个模块的样式进行整体说明，通常采用多行注释形式

行注释：用于对某一行或某一小段样式代码进行解释，采用单行注释形式

代码格式化

● 缩进：使用 2 个或 4 个空格进行缩进，保持代码的层次结构清晰，避免使用制表符
● 换行：每个选择器和声明都应独占一行，这样可以提高代码的可读性

空格使用：在选择器与 { 之间、属性名与 : 之后添加一个空格，: 前不要加空格

选择器规范

1. 命名规则

● 类名和 ID 名：使用小写字母，单词之间用连字符 - 连接，避免使用驼峰命名法或下划线命名法，以保持一致性和可读性

● 避免使用无意义的命名：类名和 ID 名应具有描述性，能够清晰表达其用途

2. 选择器优先级

● 尽量避免使用内联样式，因为内联样式的优先级最高，会增加样式管理的难度
● 减少使用 ID 选择器，因为 ID 选择器的优先级较高，过多使用会导致样式难以覆盖和扩展。优先使用类选择器
● 保持选择器的简洁性，避免过长和过于复杂的选择器链

属性规范

1. 属性顺序

按照一定的逻辑顺序书写属性，例如先写布局相关属性（如 display、position、float 等），再写盒模型属性（如 width、height、margin、padding 等），最后写文本和视觉效果属性（如 color、font-size、background 等）

2. 属性值

● 缩写属性：尽量使用缩写属性，使代码更简洁

● 单位使用：对于长度单位，根据实际情况选择合适的单位，如 px、em、rem、% 等。对于颜色值，优先使用十六进制表示法（如 #ffffff），如果需要透明度，可使用 rgba() 或 hsla() 函数

响应式设计规范

1. 媒体查询

●媒体查询应放在独立的 CSS 文件或在主 CSS 文件中集中管理，便于维护。
●为不同的设备断点设置合理的媒体查询范围，常见的断点有手机（如 max - width: 767px）、平板（如 min - width: 768px 和 max - width: 991px）、桌面（如 min - width: 992px）等

代码复用与模块化

1. 提取公共样式

将通用的样式提取到公共的 CSS 文件或类中，避免代码重复。例如，将按钮的通用样式提取到一个 .btn 类中

2. 使用预处理器

如果项目规模较大，可以考虑使用 CSS 预处理器（如 Sass、Less 等），利用其变量、嵌套、混合等特性提高代码的可维护性和复用性

JavaScript代码规范

基本规范

1. 文件编码

JavaScript 文件应使用 UTF - 8 编码，避免出现字符编码问题。

2. 注释

● 单行注释：使用 // 进行单行注释，通常用于解释代码的功能、变量的含义等。注释应简洁明了，与代码逻辑紧密相关

● 多行注释：使用 /* … */ 进行多行注释，适用于对函数、类或一段复杂代码的详细解释

3. 代码格式化

● 缩进：使用 2 个或 4 个空格进行缩进，保持代码的层次结构清晰，避免使用制表符
● 换行：合理使用换行，使代码易于阅读。例如，函数参数较多时，每个参数可单独一行

● 空格使用：在运算符、逗号、分号前后适当添加空格，提高代码可读性

变量和常量规范

1. 命名规则

● 变量名：使用驼峰命名法（camelCase），变量名应具有描述性，能够清晰表达其用途

● 常量名：使用全大写字母，单词之间用下划线分隔，用于表示不可变的值

2. 变量声明

● 使用 const 和 let 代替 var。const 用于声明常量，一旦赋值就不能再重新赋值，多用来声明变量、函数、数组；let 用于声明变量，具有块级作用域

函数规范

1. 命名规则

● 函数名使用驼峰命名法，应具有描述性，能够清晰表达函数的功能

2. 函数长度

保持函数简洁，一个函数最好只负责单一的功能。如果函数过长，应考虑将其拆分成多个小函数

3. 参数处理

● 明确函数参数的类型和用途，可在注释中说明
● 对于可选参数，可使用默认参数值

对象和数组规范

1. 对象

● 使用简洁的对象字面量语法，避免不必要的构造函数调用

● 对象属性名如果是合法的标识符，可省略引号

2. 数组

● 使用数组字面量语法创建数组

控制结构规范

1. 条件语句

● 使用大括号 {} 包裹条件语句的代码块，即使代码块只有一行

2. 循环语句

● 对于数组遍历，优先使用 for…of 或数组的迭代方法（如 forEach、map、filter 等），避免使用传统的 for 循环，使代码更简洁易读

模块化规范

1. 使用 ES6 模块

在现代 JavaScript 开发中，优先使用 ES6 模块（import 和 export）进行模块化开发，提高代码的可维护性和复用性

2. 模块命名

模块文件命名应具有描述性，使用驼峰命名法或连字符分隔的命名方式注释规范
在开发过程中，良好的注释规范能极大提升代码的可读性和可维护性

● 必要的注释：在关键代码、复杂逻辑、公共函数和类等地方添加注释，解释代码的功能、实现思路和使用方法。注释要简洁明了，避免冗长和不必要的注释


● 统一的注释风格：使用统一的注释风格，如单行注释（//）和多行注释（/* … */）的使用规范

通用注释原则

● 简洁明了：注释应简洁，避免冗长和复杂的表述，让其他开发者能够快速理解代码意图
● 准确无误：注释内容必须准确反映代码的功能和逻辑，避免误导其他开发者
● 及时更新：当代码发生修改时，要同步更新相应的注释，保证注释与代码的一致性
● 避免冗余：不要对过于明显的代码进行注释，例如 // 增加 1 写在 count++; 旁边就属于冗余注释

移植代码规范

在开发过程中遇到不会的功能是很常见的情况，下面我们来说一下应该如何去做，提高我们的开发效率

遇到不会的功能时的做法

1. 自我分析与思考

● 明确问题：仔细梳理该功能的具体需求和目标，将大问题拆解成多个小问题。例如，若要实现一个复杂的表单验证功能，可拆分为格式验证、必填项验证、数据范围验证等小问题。
● 分析已有知识：回顾自己已掌握的知识和经验，思考是否有类似功能的实现思路可以借鉴。比如之前实现过简单的用户登录验证，可从中提取一些通用的逻辑和方法。

2. 查阅官方文档

● 开发语言和框架文档：大多数编程语言和框架都有详细的官方文档，其中包含了各种功能的使用说明和示例代码。例如，在使用jQuery时，如遇到其提供的方法不会用，可以查看官方提供的开发文档进行查阅。
● 第三方库文档：如果使用了第三方库来实现某些功能，一定要查阅其官方文档。比如使用 jQuery 实现页面交互效果，可在 jQuery 官方文档中查找相关的 API 用法

3. 利用搜索引擎

● 使用准确的关键词：使用清晰、准确的关键词进行搜索，能提高搜索结果的相关性。例如，搜索 “JavaScript 实现文件上传至后台功能” 比 “JavaScript 文件上传” 更能精准定位到所需信息。
● 筛选搜索结果：优先查看权威技术博客、论坛（如 Stack Overflow、CSDN 等）、官方社区的内容，这些来源的信息通常更准确、可靠。

4. 请教他人

● 同事和同行：向身边有经验的同事或同行请教，他们可能曾经遇到过类似的问题并解决过。可以通过面对面交流、团队讨论群等方式寻求帮助。
● 技术社区和论坛：在专业的技术社区和论坛上发布问题，描述清楚问题的背景、具体需求和自己已经尝试过的方法，等待其他开发者的回复和建议。

搜索到相关代码后的做法

1. 理解代码逻辑

● 逐行分析：仔细阅读搜索到的代码，逐行理解其功能和实现原理。可以添加注释来标记每一行代码的作用，帮助自己更好地理解。
● 整体把握：从整体上把握代码的结构和流程，了解各个部分之间的关系和调用顺序。例如，对于一个包含多个函数的代码段，要明确函数之间的调用关系和数据传递方式。

2. 评估代码适用性

● 功能匹配度：判断代码是否完全符合自己的需求。有些代码可能只是部分实现了所需功能，需要进行适当的修改和扩展。
● 性能和稳定性：考虑代码的性能和稳定性，是否存在潜在的漏洞或效率问题。例如，代码中是否有过多的循环嵌套、是否存在内存泄漏等问题。

3. 进行代码测试

● 单元测试：编写单元测试用例，对搜索到的代码进行测试，确保其在各种输入情况下都能正常工作。例如，对于一个实现字符串处理的函数，要测试不同长度、不同格式的字符串输入。
● 集成测试：如果代码要集成到现有的项目中，需要进行集成测试，验证其与其他模块的兼容性和协同工作能力。

4. 遵循开源协议（如果适用）

● 了解协议要求：如果搜索到的代码是开源代码，要仔细阅读其开源协议，了解使用、修改和分发代码的相关要求。常见的开源协议有 MIT、Apache、GPL 等，不同协议的要求不同。
● 遵守协议规定：按照开源协议的规定使用代码，如保留原作者的版权声明、遵循代码的分发限制等。

5. 代码优化与扩展

● 优化代码：根据自己的需求和项目的代码风格，对搜索到的代码进行优化。例如，优化代码的可读性、减少代码冗余、提高代码的性能等。
● 扩展功能：如果代码只是部分满足需求，可以在其基础上进行功能扩展。例如，在一个简单的图片上传功能代码基础上，添加图片压缩、水印等功能。