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

落日映苍穹つ 2022-09-03 00:23 162阅读 0赞

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

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

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

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

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

不要小看这个，虽说我们写的代码确实是跑给机器的，但是代码是人写的，而通常一个项目的开发，需要多个程序员一同协助开发，这时能写出 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选择器及全局标签选择器防止污染全局样式

![d00c5247fb2dd47d40102072c2adbeb4.png][]

#### (四)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

![44b0935840c15d57276387499dfa38cb.png][]

## 二、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 其他

![b4ee1921321dddc29bf532ba888c89e9.png][]

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

[d00c5247fb2dd47d40102072c2adbeb4.png]: /images/20220829/39441acf469544f5bb018a8f1d381508.png
[44b0935840c15d57276387499dfa38cb.png]: /images/20220829/0a0b17d58fb549a0840f5782f9f7d6ef.png
[b4ee1921321dddc29bf532ba888c89e9.png]: /images/20220829/4091cbfbc3ff4e479e4717e184d6aea6.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa