js和css的代码规范
一、为什么要有规范
要首先排除一个误区,规范是:
1、跟性能无关
2、跟功能无关
3、跟结果无关
所谓代码规范是用来提高整个团队的开发效率,减少沟通成本,统一化代码编写方案,减少团队gap,保留团队最佳实践的团队建设的必须项之一。因此在制定规范之前,首先要明确规范是用来做什么的,确保团队成员心里能够有完全按照规范编写代码的意识。
二、规范的特点
1、易读性
这是规范首要追求的特性之一,易读性是保证代码可供团队快速,准确阅读的首要保障。是制定规范最重要的目标。
保证代码易读性需要注意的方面:
空格:
又例如:
中⽂文English数字01混合时
中⽂文 English 数字 01 混合时
可见加了空格之后,代码的结构更清晰,视觉感受更优,更容易把两者抽离出来,提高代码的可读性。心理学有一个相关性的概念,就是说,如果两个独立的事物在很短的时间内或者同时出现,人们下意识的就会认为这两件事物是有相关性的。因此在代码中,如果缺少空格,人眼就很容易将两段不同的代码认为是相关的,这样就需要动用额外的精力去判断两段代码之间的关系,造成不必要的成本。
空格的场景:注释符号与注释内容之间,css和object属性和属性值之间,操作符 = + - && || (or more)两边...等等。
编码习惯:
编码习惯是在保证易读性的前提下,加入了团队和个人的一些特点,所形成的一系列编码规范。
比如一些css的属性顺序等。比如谷歌是按照属性名的首字母进行a-z的排序来编写,有些是按照定位-布局-大小-内容-修饰等分类来编写。
每一种编码习惯孰优孰劣见仁见智,但只要保证整个团队有一致的编码习惯就没问题。
代码命名:
这是保证代码易读性里,最重要的事情之一,每个好的代码规范都会对代码命名有着严苛的要求,命名可以分为以下几类:
例如
```
myName = "";
studentNames = [];
class CollageStudent {};
WIDTH = 200; HEIGHT = 300;
handleButtonClick() {};
canDelete = false; hasCar = true;
obj.__setName = () => {} ;
```
其实在命名的时候,代码的可读性有时比代码的简洁性更重要,比如createUserByNameAndEmail(name, email)这样的函数,尽管很长,但是一眼就容易让人看懂这个函数的作用。
2. 精简
精简的目的是能省则省,例如google里面对CSS属性值精简的例子:
例子太多,就不一一举例子了。
3. 严谨
这几年TS的火热,又把静态语言带入到各个JS语言开发者的视野当中,TS由于它的类型检查的机制,使得它对于一些核心业务代码,框架,组件等严谨性要求比较高的场合更加适合,减少一些不必要bug。不过过于追求严谨也会给团队带来不必要的麻烦,在大多数敏捷开发的场合,动态类型的JS更加适合。
三、最重要的一点
用什么代码规范不重要,最重要的是,团队能够统一代码规范,能够保证团队成员每个人能够编写出同样规则的代码。