2019-06-23第二周周报-课堂笔记

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更加适合。

三、最重要的一点

用什么代码规范不重要,最重要的是,团队能够统一代码规范,能够保证团队成员每个人能够编写出同样规则的代码。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是html? html是一种网页标记语言,叫超文本标记语言,我们平时上网所看到的所有网页均来自于html,英文...
    波段顶底阅读 8,689评论 2赞 7
  • 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。 ------HTML------ 语法 用两个空格来...
    littleyu阅读 601评论 0赞 1
  • Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bx...
    白小明0927阅读 2,660评论 1赞 15
  • 不想追热点,但周杰伦的歌确实给我们的青春写下浓墨重彩的一笔。 有听过周董新歌的朋友可以在评论区讨论下感受,或者说一...
    梦醒惜年阅读 308评论 1赞 2
  • 再过一段时间,一年就又过去啦,可二货哥口袋还是空空的。 今天他找路边大师算了一卦。大师掐指一算,点头啧啧说到:“不...
    老罗xt阅读 354评论 0赞 2

友情链接更多精彩内容