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关键字

RonDen / SoftwareEngineering

20190402-宋文宇-JavaScript代码规范 #15

JavaScript代码规范

1.嵌入规则

2.空格与运算符

3.代码缩进

4.语句规则

6.每行代码字符小于80

7.命名规则

8.HTML载入外部JavaScript文件

9.使用JavaScript访问HTML元素

10.return语句

11.注释

12.优先使用箭头函数

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

14.单引号的使用

15.避免使用var声明