阿里前端开发规范.pdf

一． 编程规约 (一) 命名规范 1.1.1 项目命名 1.1.2 目录命名 1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名 1.1.4 命名严谨性4 (二) HTML 规范 （Vue Template 同样适用） 1.2.1 HTML 类型 1.2.2 缩进 1.2.3 分块注释 1.2.4 语义化标签 1.2.5 引号 (三) CSS 规范 1.3.1 命名 1.3.2 选择器 1.3.3 尽量使用缩写属性 1.3.4 每个选择器及属性独占一行 1.3.5 省略 0 后面的单位 1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式 (四) LESS 规范 1.4.1 代码组织 1.4.2 避免嵌套层级过多 (五) Javascript 规范 1.5.1 命名 1.5.2 代码格式 1.5.3 字符串 1.5.4 对象声明 1.5.5 使用 ES6+ 1.5.6 括号 1.5.7 undefined 判断 1.5.8 条件判断和循环最多三层 1.5.9 this 的转换命名 1.5.10 慎用 console.log 二、 Vue 项目规范 阿里前端开发规范是一份详尽的指南，旨在提高团队协作效率和代码质量。这份规范涵盖了多个方面的编程规约，包括命名规范、HTML 规范、CSS 规范、LESS 规范以及 JavaScript 规范，并专门针对 Vue 项目提出了特别的要求。 在命名规范方面，项目命名应具有可读性和描述性，反映项目的功能或用途。目录命名应清晰地表示其内容，例如，按功能模块或组件进行命名。对于 JS、CSS、SCSS、HTML 和 PNG 文件，命名要遵循一定的规则，如使用驼峰式命名，添加合适的前缀或后缀，以表明文件类型。命名时要严谨，避免使用模糊不清或容易引起混淆的词汇。 HTML 规范中强调了类型的选择，推荐使用语义化的标签，如 `<header>`、`<footer>`、`<article>` 等，以提高页面结构的可读性和搜索引擎优化。缩进应保持一致，通常使用 2 个空格，分块注释有助于理解代码逻辑。引号统一使用双引号，以避免特殊字符导致的问题。 CSS 规范中，命名建议使用 BEM（Block Element Modifier）方法，确保模块化和可维护性。选择器应该简洁，避免使用过于复杂的选择器链，以提升性能。尽量使用缩写属性，如 `margin: 0 auto;` 替换 `margin-left: 0; margin-right: auto;`。每个选择器和属性应独占一行，便于阅读和调试。省略 0 后面的单位，如 `margin: 0;`，减少代码冗余。同时，应避免使用 ID 选择器和全局标签选择器，防止样式污染全局。 LESS 规范提倡良好的代码组织结构，避免嵌套层级过多，以降低维护难度和提高代码可读性。 JavaScript 规范中，命名同样遵循驼峰式，函数和变量名要有意义。代码格式要求统一，括号、逗号等符号的位置要一致。字符串可以考虑使用模板字符串，提高可读性。对象声明时，尽可能使用对象字面量。鼓励使用 ES6 及以上版本的语法特性，如箭头函数、解构赋值等。括号应正确对齐，undefined 判断时，优先使用 `typeof` 操作符。条件判断和循环控制在三层以内，以保持代码的清晰。对于 `this` 的使用，应谨慎并考虑使用箭头函数或 `.bind` 方法固定上下文。慎用 `console.log`，因为它可能会影响生产环境的性能。 Vue 项目规范则可能包含组件化开发、状态管理、路由配置等方面的具体要求，强调组件的复用性、独立性和可测试性，以及 Vue 模板中的最佳实践。 这份规范旨在提供一个标准，使得前端开发过程更加有序，代码更易读、易维护，同时也有助于新成员快速融入团队，降低学习成本。通过遵循这些规范，开发者可以创建出高质量、可扩展且易于协作的前端应用。