JavaScript代码规范

注：新手一枚，本篇博客为了给自己的学习做个记录，若有表述错误或其他错误欢迎指正，谢过各位了！[手动抱拳]

1.嵌入规则

JavaScript程序应尽量放在.js文件中，需要调用的时候在html文件中以script标签的形式包含进来，避免在html文件中直接编写JavaScript代码
```
<script src="filename.js">
```

2.空格与运算符

通常运算符（=±*/）前后需要添加空格

let x = y + z;
let values = ["Volvo", "Saab", "Fiat"];

3.代码缩进

通常使用4个空格符来缩进代码块，不推荐使用TAB键来缩进，因为不同编辑器TAB键的解析可能不同
```
function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}
```

4.语句规则

一条语句通常以分号作为结束符
```
let values = ["Volvo", "Saab", "Fiat"];
```

复杂语句的通用规则：

将做花括号放在第一行的结尾
做花括号前添加一个空格
将有花括号独立放在一行
不要以分号结束一个复杂的声明

// 函数
function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

// 循环
for (let i = 0; i < 5; i++) {
    x += i;
}

// 条件语句
if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

5.对象规则

短的对象代码可以直接写成一行

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

较复杂对象定义的规则：
- 将左花括号与类名放在同一行
- 冒号与属性值间有个空格
- 字符串使用双引号，数字不需要
- 最后一个键值对后面不要添加逗号
- 将右花括号独立放在一行，并以分号作为结束符号
```
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};
```

6.每行代码字符小于80

为了方便阅读，每行字符数建议小于80个

如果一个JavaScript语句超过了80个字符，建议在运算符或者逗号后换行

字符串过长时，利用字符串的+符号进行合并

let str1 = ''
    + '<article>'
    + '<h1>Title here</h1>'
    + '<p>This is a paragraph</p>'
    + '<footer>Complete</footer>'
    + '</article>';

三元运算符过长时，将条件以及两种结果分写在各行中
```
let result = condition
    ? resultA
    : thisIsAVeryVeryLongResult;
```

逻辑条件组合过长时，将每个条件独立一行，逻辑运算符放置在行首进行分隔

if(user.isAuthenticated()
    && user.isInRole('admin')
    && user.hasAuthority('add-admin')
    || user.hasAuthority('delete-admin')
) {
    // code
}

JSON或数组过长时，进行适当换行，将每一行控制在合理的范围内

let mapping = {
    one: 1, two: 2, three: 3, four: 4, five: 5,
    six: 6, seven: 7, eight: 8, nine: 9, ten: 10,
    eleven: 11, twelve: 12, thirteen: 13, fourteen: 14,fifteen: 15
};

7.命名规则

变量、参数和函数使用驼峰法命名, 即除第一个单词之外，其他单词首字母大写
```
let lowerCamelCase = "abc";
```
全局变量使用全部大写的下划线命名法
```
let MAX = 100;
let MAX_SIZE = 1000;
```

常量使用全部大写的下划线命名法

const PI = 3.14;
const IS_DEBUG_ENABLED = 1;

8.HTML载入外部JavaScript文件

使用简洁的格式载入JavaScript文件（type属性不是必须的）
```
<script src="myscript.js">
```

9.使用JavaScript访问HTML元素

使用JavaScript获取HTML元素使用getElementById方法

let obj1 = getElementById("Demo")
let obj2 = getElementById("demo")

10.return语句

return如果用表达式的执行作为返回值，请把表达式和 return 放在同一行中，以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式，则返回 undefined。构造器的默认返回值为 this。

11.注释

//用作代码的行注释
```
let itemsLayer; //礼物下落层
```
/* … */形式用作对代码段的注释，或用于较正式的声明中，如函数参数、功能、文件功能等的描述
```
/* Zepto v1.1.6 - zepto event ajax form ie - zeptojs.com/license */
let Zepto = function(){
    //code
}
```

12.优先使用箭头函数

使用函数时，优先使用箭头函数

// bad
[1, 2, 3].map( function (x) {
    const y = x + 1;
    return x * y;
});

// good
[1, 2, 3].map( (x) => {
    const y = x + 1;
    return x * y;
});

13.建议每次只声明一个变量

声明变量时，建议每次只声明一个变量，避免一次声明多个变量
```
// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;
```

14.单引号的使用

建议使用单引号包裹普通字符串

let directive = 'No identification of self of mission.';

当字符串出现单引号时，使用``包裹字符串
```
let saying = `Say it ain't so`;
```

15.避免使用var声明

var是方法作用域，在方法内均可访问该变量

function discountedPrices (prices, discount){
    var discounted = [];
    for(var i = 0; i< prices.length; i++){
        var discountedPrice = prices[i] * (1 - discount);
        var finalPrice = Math.round;(discountedPrice * 100) / 100;
        discounted.push(finalPrice);
    }
    console.log(i);  //正常输出
    console.log(discountedPrice);  //正常输出
    console.log(finalPrice);  //正常输出
    return discounted;
}

let是块作用域，即let声明的变量只能在局部代码块内被访问

function discountedPrices (prices, discount){
    let discounted = [];
    for(let i = 0; i< prices.length; i++){
        let discountedPrice = prices[i] * (1 - discount);
        let finalPrice = Math.round;(discountedPrice * 100) / 100;
        discounted.push(finalPrice);
    }
    console.log(i);  //报错
    console.log(discountedPrice);  //报错
    console.log(finalPrice);  //报错
    return discounted;
}

综上，推荐使用let声明变量，尽可能避免使用var关键字

参考：

JavaScript中文网
https://www.javascriptcn.com/read-2429.html
菜鸟教程JavaScript代码规范
http://www.runoob.com/js/js-function-definition.html
CSDN博客教程
https://blog.csdn.net/Ee2222/article/details/79902181

JavaScript代码规范（常用）