前言

中国有句老话：“没有规矩，不成方圆”，前端学习也是一样。一个良好的代码风格不仅能提升代码的美观程度，同时也能很大程度上减轻未来的维护成本。对于刚入职的我而言，通过好的代码规范来限制住我放荡不羁的代码风格是非常重要的。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Javascript代码规范

  • 缩进

统一使用 4 空格

  • 花括号 
if (foo) {
   
}
  • 命名

变量（camel命名法） 如camelName
常量（大写加下划线命名法） 如CAMEL_NAME
类名（pascal命名法） 如PascalClass
私有成员（以下划线开头） 如_camelName

  • 空格 
var a = b + c
  • 引号

HTML(pug)中使用双引号
JavaScript中字符串使用单引号
可能被序列化的JSON中使用双引号

// html
img src="picture.gif"
// pug
div(data-action="goto")
// JavaScript
var str = 'name';
  • 注释

准则
1、不写文档风格的注释
2、如无必要，勿增注释
3、如有必要，尽量详尽
4、业务代码必须写足量注释

需要写注释的场景
1、说明代码在干什么（why）
2、理清代码的结构（当一片段代码比较冗长时，需要写注释）
3、当出现非常规情况代码时（预感到以后自己或别人可能理解不了的代码）
4、大部分变量名要写注释说明，尤其是变量名不能望文生义时

注释书写规范
源码中的注释，主要使用中文注释
如果是中文为主的注释，标点符号用中文全角
中英文夹杂时，英文与中文之间要用一个空格分开
注释标识符与注释内容要用一个空格分开：// 注释 与 / 注释 /
注释与源代码在一行时，与源代码末尾分隔两个空格
所有文件必须写文件注释，写明该文件的作用

语言规则

  • 变量

变量在使用前必须声明
所有变量声明必须在该作用域的开始位置

  • 常量

使用大写字母与下划线进行命名。

语句

  • 必须以分号结尾 
var a = '343';
  • 不要添加多余的逗号 
{
   
  b: "dsf",
  a: "ccc"
}

使用直接量

减少使用构造函数创建。

var a = [x1, x2, x3];
var a2 = [x1, x2];

函数声明

不要使用块内声明

二、HTML编码规范

空白

空白使用保持前后一致，使用空白提高可读性。

1、绝不要混用空格和制表符。
2、坚持使用一种缩进：空格或制表符
3、如果使用空格，确定缩进的字符 (偏好：4个字符)

格式

1、标签以及属性名称总是小写。
2、一行一个元素。
3、每个嵌套元素使用一个额外的缩进。
4、布尔属性无值 (e.g. checked 而不是 checked=“checked”)。
5、属性值总是使用双引号引起来。
6、省略link样式表、style以及script元素的type属性。
7、总是包含结束标签。

命名

.在命名这个地方我觉得是HTML、css部分最难的地方了。但是大家一定要主要命名的规范，不能应为太麻烦就不去命名。

1、使用清晰，贴切，适当的HTML类名。名称应该体现HTML和2、2、CSS文件的信息。
3、避免很系统地使用类名缩写，这会让事情变得难以理解。

前端目录规范

目录命名

前端目录和文件名全使用全小写’_’ 连字符。不要使用驼峰命名，不要使用’-‘连接，’-'在框架中将用于文件目录的解析

总结

目前只总结了这些，等我在经历一些项目在继续更新。