看了这份《阿里前端代码规范》，你也能写出“高颜值”代码

Posted 2021-09-01 hugo233

工作的沟通，不只是电子邮件或者面对面语言交流，代码也是沟通方式之一。

用代码实现需求，只是万里长征走完了第一步，必须让代码表达自己的设计思想。

试想一下，你负责的功能被另外一个同事接手，如果你的代码结构清晰、注释合理，他就不用频繁的询问代码疑点，不用打断你的工作。

编写代码的时候，应该考虑到别人的阅读感受，减少阅读障碍，为整个团队创造代码，而不是你自己。

真正牛逼的程序员是写出能让人看得懂的代码。

不要小看这个，虽说我们写的代码确实是跑给机器的，但是代码是人写的，而通常一个项目的开发，需要多个程序员一同协助开发，这时能写出 human readble 的代码就显得至关重要，因为不仅可以减少后期维护的时间成本，而且还能让后面加入的新同事能更快的上手项目。

要能写出干净、整洁并让人易懂的代码，必然离不开一些规则，只要自觉遵守、合理运用这些规则，代码通常都不会太差。

下面分享给大家这份来自阿里的前端代码规范。

一．编程规约

(一)命名规范

1.1.1项目命名
1.1.2目录命名
1.1.3 JS、CSS、SCSS、html、PNG 文件命名
1.1.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 项目规范

(一) Vue 编码基础

2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范

(二) Vue 项目目录规范

2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他

完整版PDF资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。