前端开发规范— 命名、HTML、CSS、JS（下）

凩晨
110 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在前端开发过程中，每个人可能都有自己的开发习惯，但团队间的开发，为了更好的进行代码管理和维护迭代，最好是做统一的开发规范。

下面给大家介绍下之前团队统一的开发规范！（接上篇）

4、js规范

  • 避免全局命名空间污染

  • 变量声明

总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，如：****

image.png

使用 var 来声明变量，并且使用单var模式，如：

image.png

  • 使用严格

· 总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。

image.png

 ==， 两边值类型不同的时候，要先进行类型转换，再比较。

 ===，不做类型转换，类型不同的一定不等。

  • ==等同操作符

      如果两个值具有相同类型，会进行===比较，返回===的比较值

  如果两个值不具有相同类型，也有可能返回true

  如果一个值是null另一个值是undefined，返回true

  如果一个值是string另个是number，会把string转换成number再进行比较

  如果一个值是true，会把它转成1再比较，false会转成0

image.png

  • ===操作符：

      要是两个值类型不同，返回false

  要是两个值都是number类型，并且数值相同，返回true

  要是两个值都是stirng，并且两个值的String内容相同，返回true

  要是两个值都是true或者都是false，返回true

  要是两个值都是指向相同的Object，Arraya或者function，返回true

  要是两个值都是null或者都是undefined，返回true

  • 真假判断

js中以下内容为假：false、null、undefined、0、'' (空字符串)、NaN

  • 三元条件判断（if 的快捷方法）

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。如：

不推荐：    

image.png

推荐：

image.png

 

 

5、css规范

  • id和class的命名

ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称。

  • 合理使用id

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class。

  • css选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。

  • 使用子选择器

很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。

不推荐：   

image.png

推荐：

image.png

  • 尽量使用缩写属性

尽量使用缩写属性对于代码效率和可读性是很有用的，比如font属性。

不推荐：        

image.png

推荐：

image.png

  • 0后面不带单位

image.png

  • 属性格式

    · 为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

    · 属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

    · 每个选择器和属性声明总是使用新的一行。

    · 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。

    · URI值（url()）不要使用引号。

    · 作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

      a.  结构性属性：

  display

  position, left, top, right etc.

  overflow, float, clear etc.

  margin, padding
  

  b. 表现性属性：

  background, border etc.

  font, text
avatar
文章
阅读
粉丝