一.编程规约 (一) 命名规范 (二) 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,删除无用代码,保持代码整洁。 这些规范旨在提升代码质量,减少错误,促进团队协作,使得代码更易于维护和扩展。通过遵循这些规约,开发者可以创建出高效、稳定且易于理解的前端应用。
剩余19页未读,继续阅读
- 粉丝: 422
- 资源: 13
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助