前端代码编写规范-编程规约和Vue项目规范

164 浏览量 2023-10-08 14:32:52 上传评论收藏 680KB DOC 举报

一．编程规约 (一) 命名规范 (二) HTML 规范（Vue Template 同样适用） (三) CSS 规范 (四) LESS 规范 (五) Javascript 规范二、Vue 项目规范 (一) Vue 编码基础 (二) Vue 项目目录规范前端代码编写规范是提高代码质量和团队协作效率的关键。在编程规约方面，主要涉及命名规范、HTML规范、CSS规范、LESS规范以及JavaScript规范。一、命名规范 1.1.1 项目命名遵循全小写，使用中线分隔，确保清晰易读。 1.1.2 目录命名同样使用小写，中划线分隔，复数命名需正确使用复数形式。 1.1.3 文件命名，包括JS、CSS、SCSS、HTML、PNG等，也采用小写加中划线的规则。 1.1.4 命名严谨性要求避免混合拼音和英文，禁止使用中文，确保英文拼写和语法准确，减少理解难度。二、HTML规范 1.2.1 HTML类型推荐使用HTML5的<!DOCTYPE html>声明。 1.2.2 缩进要保持一致，提高代码可读性。 1.2.3 分块注释用于解释代码功能，便于理解。 1.2.4 语义化标签如<header>, <nav>, <section>等能增强页面结构和可访问性。 1.2.5 引号推荐使用双引号包裹属性值，增加安全性。三、CSS规范 1.3.1 命名要清晰，遵循一定的命名约定，如BEM（Block Element Modifier）。 1.3.2 避免在选择器中使用标签名，以减少特异度。 1.3.3 使用直接子选择器（>）提高选择器效率。 1.3.4 属性独占一行，提高可读性。 1.3.5 缩写属性如margin: 0 auto;可节省空间。 1.3.6 省略0后的单位如px，简化代码。 1.3.7 避免ID选择器和全局标签选择器，防止全局样式污染。四、LESS规范 1.4.1 代码组织提倡将公共LESS文件放在特定目录，按特定顺序组织。 1.4.2 避免嵌套过深，保持代码结构清晰。五、JavaScript规范 1.5.1 命名规则包括小写驼峰命名、常量全大写，下划线分隔。 1.5.2 代码格式要求2个空格缩进，用空行分隔不同逻辑。 1.5.3 字符串处理，如字符串连接优化。 1.5.4 对象声明推荐使用字面量方式。 1.5.5 鼓励使用ES6+的新特性。 1.5.6 括号使用规则，保持一致性。 1.5.7 undefined判断时，避免直接比较，使用`typeof variable !== 'undefined'`。 1.5.8 限制条件判断和循环的层数，以保持代码简洁。 1.5.9 this转换命名，避免在非构造函数中使用`new`。 1.5.10 慎用console.log，使用合适的调试工具。六、Vue项目规范 2.1.1. 组件规范强调组件名、文件名、数据、Prop、样式作用域等的标准化。 2.1.2. 模板中使用简单表达式，减少复杂性。 2.1.3 指令缩写形式，如使用`v-bind`简写`:`，`v-on`简写`@`。 2.1.4 保持标签顺序一致，提高可读性。 2.1.5 v-for指令必须设置key，以区分循环元素。 2.1.6 v-if和v-show的选择根据性能需求灵活使用。 2.1.7 script标签内部结构顺序规范化，如先定义props，后定义data。 2.1.8 Vue Router规范包括页面跳转、路由参数、懒加载、命名和path命名规则。七、Vue项目目录规范 2.2.1 基础目录结构如src、public等。 2.2.2 使用Vue CLI创建项目，遵循其默认目录结构。 2.2.3 具体目录说明，如api、assets、components、constants、router、store、views等。 2.2.4 注释说明有助于团队成员理解代码意图。 2.2.5 避免手动操作DOM，删除无用代码，保持代码整洁。这些规范旨在提升代码质量，减少错误，促进团队协作，使得代码更易于维护和扩展。通过遵循这些规约，开发者可以创建出高效、稳定且易于理解的前端应用。

资源推荐

资源详情

资源评论