前端基础代码规范

目录命名

 大驼峰 例如：MyName

文件名

  除index.vue 外其他文件使用大驼峰 例如： MyName.vue

HTML

1. 父子标签缩进使用2个空格 例如：

<div>
  <div>
    <div>test</div>
  </div>
  <div>
    <div>test</div> 
  </div>
</div>

2. 类名使用小写加中华线分割 例如：

<div class="user-name" />

3.id使用大驼峰 例如：

<div id="UserName"/>

4. 尽量避免在html里写过多的style， 建议使用class来定义样式 例如： 避免这种代码

<div style="width:120px; height:120px; margin-top:10px; padding-left: 10px;">

建议采用：

<div class="name-container" />

.name-container {
  width:120px;
  height:120px;
  margin-top:10px;
  padding-left: 10px;
}

 Css/Scss/Less:

1. 使用两空格缩进：class规则和属性之间空两格， 父子嵌套规则空两格

例如：

.name-container {
  margin-top: 10px;
  .table-name {
    margin-top: 10px;
    padding-left: 10px;
  }
}

2.每个属性声明末尾都要加分号

3. 属性名称和值之间要有空格

margin: 10px;

4. 规则名称和{ 之间要有空格

.name {
  
}

命名：

• 类名使用小写字母，以中划线分隔
• id采用驼峰式命名
• SCSS中的变量、函数、混合、%placeholder采用驼峰式命名

选择器

• 对于通用元素使用 class ，这样利于渲染性能的优化。
• 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
• 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
• 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 – 前缀类似于命名空间）。

javascript

1. 使用var的变量 请使用let或者const来代替

2. 使用两格空格缩进例如

let handleName = () => {
  // 空两格
  let name = "James Li";
}

3. 运算符和赋值符号前后要留一个空格（+ - * / > < ）

例如： 

let count = unitPrice * num;

4.  三元运算符 ? :  前后加空格

let count = count ? price : num;

5. 代码块 { 前 加空格

let handleFunc = () => {

}

6.  这些关键字前： else , while, catch, finally

这些关键字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof 例如：

if() {
  //if ...
} else {
  //else...
}

7. 单行 // 后（若单行注释和代码同行，则 // 前也需要），多行注释 * 后

// 注释

8. for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格

for (let i = 0; i < 8; i++) {
  // todo
}

9. 无论是函数声明还是函数表达式， { 前一定要有空格

let handleFunc = () => {
}

10. 函数的参数之间

function handleFunc(name, age, address) {
}

handleFunc("JamesLi", 28, "成都市踏水桥街道XXXXX")

11. 标准变量和函数名称命名 

标准变量和函数名称的命名采用小驼峰：

let userName = "James Li";
let cityName = "ChengDu";

function generateName() {
}

12. 常量命令使用全大写加_连接

let PRIVATE_NUM = 10;

13. 作用域： 只在函数中使用的变量需要声明在函数体内， 不能声明在全局或者更高的作用域

let handleFunc = () => {
  let name = "James Li"
  return name;
}

14. 函数的格式

无论是函数声明还是函数表达式， ( 前不要空格，但 { 前一定要有空格,  参数之间用’, '分隔，注意逗号后有一个空格

function handleName(name, age, address) {
}

15. 函数之间或者变量和函数之间留一个空行

let name = "James Li"

function generateAge() {
  // todo
}

function generateName() {
  // todo
}

16. 数组和对象声明： 对象属性名不需要加引号， 对象以缩进的形式书写，不要写在一行

let jamesLi = {
  age: 28,
  name: "JamesLi"
}