前端代码规范

基本的格式化

1.1 缩进层级

• 使用空格符进行缩进;

• 四个空格符表示一个缩进层级;

function demo() {
    console.log(\'hello world\');
}

1.2 语句结尾

• 使用分号结尾;

// 正确的代码
let name = \'Nicholas\';
function sayName() {
    alert(name);
}

• 错误实例：因ASI的分号插入规则复杂难记，会造成与原代码不同的执行结果；

// 原始代码
function getData() {
    return
    {
        title: \'\',
        author: \'\'
    }
}
// 分析器会理解成
function getData () {
    return;
    {
        title: \'\',
        author: \'\'
    };
}

1.3 行的长度

• 指定一行代码长度限定在80个字符；

1.4 换行

• 当一行长度超过最大字符数限制（80个字符），需手动将一行代码拆成两行，且下一行增加两个层级的缩进；

// 正确做法： 在运算符后换行，第二行追加两个缩进层级
callAFunction(document, element, window, \'some string value\', true, 123,
        navigator);

// 不好的做法：第二行只有一个缩进
callAFunction(document, element, window, \'some string value\', true, 123,
    navigator);

// 不好的做法：在运算符之前换行了
callAFunction(document, element, window, \'some string value\', true, 123
        , navigator);

• 注意：逗号也算一个运算符，应当作为前一行当结尾;

• 变量赋值时，第二行的位置应当与赋值运算符的位置保持对齐;

// 正确的做法
let result = something + anotherThing + yetAnotherThing + somethingElse +
             anotherSomethingElse;
// 确保代码的可读性，并能一眼看清折行的上下文

1.5 空行

• 在方法之间加入空行

• 在方法中的局部变量和第一条语句之间加入空行

• 在多行或单行注释之前加入空行

• 在方法内的逻辑片段之间插入空行，提高可读性

• 在方法之间加入空行

// 好的写法
function anther () {

    for (let i = 0; i < wl.length; i++) {

        // 内部逻辑
        p = wl[i];

        if (s.hasOwnProperty(p)) {

            if (merge && type === \'object\') {
                y.min(r[p], s[p]);
            } else {
                r[p] = s[p];
            }
        }
    }
}

/*
*多行注释
*/
function bather() {}

1.6 命名

• 驼峰式大小写：小写字母开始，后续每个单词首字母都大写;

// 好的写法
let thisIsMyName;
let anotherletiable;
let aVeryLongariableName;

1.6.1 变量和函数

• 变量名需总是遵守驼峰式大小写命名法，且命名前缀为【名词】，以名词做前缀可以让变量与函数区分开来；函数名前缀为【动词】

// 变量: 好的写法
let count = 10;
let myName = \'Nicholas\';
let found = true;

// 不好的写法：变量看起来像函数
let getCount = 10;
let isFound = true;

// 函数： 好的写法
function getName () {
    return myName;
}

// 不好的写法： 函数看起来像变量
function theName() {
    return myName;
}

• 对于函数和方法命名，第一个单词应该式动词；常见的一些使用动词的约定

动词	含义
can	函数返回一个布尔值
has	函数返回一个布尔值
is	函数返回一个布尔值
get	函数返回一个非布尔值
set	函数用来保存一个值

1.6.2 常量

• 常量使用大写字母和下划线来命名，下划线用以分割单词

let MAX_COUNT = 10;
let URL = \'http://www.nczonline.net/\';

1.6.3 构造函数

• 构造函数以\'驼峰式大小写\'命名,首字母为大写，名词

// 好的做法
function Person(name) {
    this.name = name
}

Person.prototype.sayName = function() {
    alert(this.name);
};

let me = new Person(\'Nicholas\')

1.7 直接量

1.7.1 字符串

• 静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号。并从头到尾保持一种风格

// 不好的写法
const a = "foobar";
const b = \'foo\' + a + \'bar\';

// 可接受的写法
const c = `foobar`;

// 好的写法
const a = \'foobar\';
const b = `foo${a}bar`;
const c = \'foobar\';

1.7.2 数字

• 在js中不可省略小数部分或者整数部分

// 整数
let count = 10;

// 小数
let price = 10.0;
let price = 10.00;

// 不推荐的小数写法：没有小数部分
let price = 10.;

//不推荐的小数写法： 没有整数部分
let price = .1;

//不推荐的写法： 八进制写法已经被弃用了
let num = 010;

// 十六进制写法
let num = 0xA2

// 科学计数法
let num = 1e23;

1.7.3 null

• null是个特殊值，切勿与undefind搞混;
• null用来初始化一个变量，这个变量可能赋值为一个对象；
• null用来和一个已经初始化的变量比较，这个变量有可能是也可能不是一个对象；
• 当函数的参数期望是对象时，用作参数传入；
• 当函数的返回值期望是对象时，用作返回值传出；
• 不要使用null来检测是否传入了某个参数；
• 不要用null来检测一个未初始化的变量

// 好的用法
let person = null;

// 好的用法
function getPerson() {
    if (condition) {
        return new Person(\'Nicholas\')
    } else {
        return null;
    }
}

// 好的用法
let person = getPerson()
if (person !== null) {
    doSomething();
}

// 不好的写法： 用来和未初始化的变量比较
let person;
if (person !== null) {
    doSomething();
}

// 不好的写法： 检测是否传入了参数
function doSomething(arg1, agr2, arg3, arg4) {
    if (arg4 !== null) {
        doSomethingElse();
    }
}

• 理解null最好的方式时将它当作对象的占位符；

1.7.4 undefined

• 未被初始化的变量都有一个初始值，即undefined;表示这个变量等待被赋值

// 不好的写法
let person;
console.log(person === undefined); // true

• 尽量避免在代码中使用undefined,这个值常常与返回\'undefined\'的typeof运算符混淆。

// foo未被声明
let person;
console.log(typeof person); // \'undefined\'
console.log(typeof foo);    // \'undefined\'

• 通过禁止使用特殊值 undefined, 可以有效的保证只有一种情况下typeof才会返回\'undefined\'。如果使用了一个可能（或不可能）赋值为一个对象的变量时，则将其赋值为null。

// 好的做法
let person = null;
console.log(person === null);   // true

1.7.5 对象直接量

• 对象直接量允许将所有的属性都括在一对花括号中；

// 好的写法
let book = {
    title: \'\',
    author: \'\'
}

// 不好的写法
let book = new Object();
book.title = \'\';
book.author = \'\';

• 单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。

// bad
const a = { k1: v1, k2: v2, };
const b = {
  k1: v1,
  k2: v2
};

// good
const a = { k1: v1, k2: v2 };
const b = {
  k1: v1,
  k2: v2,
};

• 对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

// bad
const a = {};
a.x = 3;

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;

• 如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

// bad
const obj = {
  id: 5,
  name: \'San Francisco\',
};
obj[getKey(\'enabled\')] = true;

// good
const obj = {
  id: 5,
  name: \'San Francisco\',
  [getKey(\'enabled\')]: true,
};

• 上面代码中，对象obj的最后一个属性名，需要计算得到。这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。
• 另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。

var ref = \'some value\';

// bad
const atom = {
  ref: ref,

  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  ref,

  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

1.7.6 数组直接量

• 使用两个方括号将数组初始元素括起来，来替代Array的方式创建数组;

// 好的写法
let colors = [\'red\', \'green\', \'blur\'];
let numbers = [1,2,3,4];

// 不好的写法
let color = new Array(\'red\', \'green\', \'blur\')
let numbers = new Array(1,2,3,4);

• 使用扩展运算符（...）拷贝数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

• 使用 Array.from 方法，将类似数组的对象转为数组。

const foo = document.querySelectorAll(\'.foo\');
const nodes = Array.from(foo);

1.8 ES6解构赋值

• 使用数组成员对变量赋值时，优先使用解构赋值。

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

• 函数的参数如果是对象的成员，优先使用解构赋值。

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}

// best
function getFullName({ firstName, lastName }) {
}

• 如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

// bad
function processInput(input) {
  return [left, right, top, bottom];
}

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

2. 注释

• 代码晦涩难懂
• 可能被误认为错误的代码
• 必要但不明显的针对特定浏览器的代码
• 对于对象、方法或者属性，生成文档是有必要的（使用恰当的文档注释）

2.1 单行注释

• 独占一行，用来解释下一行代码，且缩进层级和下一行代码保持一致;
• 在代码行的尾部的注释，代码结束到注释之间至少有一个缩进，且不超过单行最大字符数限制，如果超过，则放置在代码行的上方；

// 好的写法
if (condition) {

    // 代码执行逻辑
    allowed();
}

// 不好的写法：注释之前没有空行
if (condition) {
    // 代码逻辑
    allowed();
}

// 不好的写法： 错误的缩进
if (condition) {
// 代码执行逻辑
    allowed();
}

// 好的写法
let result = something + somethingElse; // 代码执行逻辑

// 不好的写法: 代码和注释之间没有间隔；
let result = something + somethingElse;// 代码执行逻辑

2.2 多行注释

• 多行注释之前应当有一个空行，且缩进层级和其描述的代码保持一致；

// 好的写法
if (condition) {

    /*
    * 代码执行逻辑
    * 代码执行逻辑
    */
    allowed();
}

2.3 使用注释

• 当代码不够清晰时添加注释，当代码很明了时不应当添加注释；
• 添加注释的一般原则是：在需要让代码变的更清晰时添加注释;

// 不好的写法

// 初始化count
let count = 10;

// 好的写法

//改变这个值可能会让它变成青蛙
let count = 10;

3. 语句和表达式

• 在JavaScript中，不论块语句包含多行代码还是单行代码，都应该使用花括号

// 好的写法
if (condition) {
    doSomething();
}

// 不好的写法
if(condition)
    doSomething();

// 不好的写法
if(condition) doSomething();

// 不好的写法
if (condition) { doSomething(); }

3.1 花括号的对齐方式

• 推荐使用的花括号对齐风格是：将左花括号放置在块语句的第一句代码的末尾。

// 好的做法
if (condition) {
    doSomething();
} else {
    doSomethingElse();
}

3.2 块语句间隔

• 推荐风格：在括左圆括号之前和括右圆括号之后各添加一个空格

// 好的做法
if (condition) {
    doSomething();
}

3.3 switch语句

• 无论何时都不应该省略default

// 好的做法
switch (condithing) {
    case \'first\'
        // 代码
        break;
    default:
        // default中没有逻辑
}

4.变量、函数、运算符、Class

4.1 变量声明

• ES6 提出了两个新的声明变量的命令：let和const。其中，let完全可以取代let，因为两者语义相同，而且let没有副作用。

\'use strict\';

if (true) {
  let x = \'hello\';
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

• 建议不再使用var命令，而是使用let命令取代。

\'use strict\';

if (true) {
  console.log(x); // ReferenceError
  let x = \'hello\';
}

• let命令存在变量提升效用，let命令没有这个问题

• 必须将所有的变量声明放在函数顶部，而不是散落在各个角落

// 好的做法
function doSomething(items) {
    let i, len;
    let value = 10;
    let result = value + 10;

    for (i = 0; len = items.length; i < len; i++) {
        doSomething();
    }
}

• 合并let语句，可以让代码更短更快：每个变量的初始化独占一行，赋值运算符应当对齐，没有初始值的变量，应当出现在let语句的尾部；

// 好的做法
function doSomething() {
    let value = 10,
        result = value + 10,
        i, len;
    for (i = 0; len = items.length; i < len; i++) {
        doSomething();
    }
}

• 在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量

// 不好的写法
var a = 1, b = 2, c = 3;

// 好的写法
const a = 1;
const b = 2;
const c = 3;

// 最好的写法
const [a, b, c] = [1, 2, 3];

• 所有的函数都应该设置常量

4.2 函数

• 必须先声明javascript函数再使用函数

// 好的写法
function doSomething() {
    alert(\'\');
}

doSomething();

// 不好的写法
doSomething();

function doSomething() {
    alert(\'\');
}

• 立即执行函数可以写成箭头函数的形式。

(() => {
  console.log(\'Welcome to the Internet.\');
})();

• 那些需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。

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

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

// best
[1, 2, 3].map(x => x * x);

• 箭头函数取代Function.prototype.bind，不应再用 self/_this/that 绑定 this。

// bad
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

• 简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法
• 所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。

// bad
function divide(a, b, option = false ) {
}

// good
function divide(a, b, { option = false } = {}) {
}

• 不要在函数体内使用 arguments 变量，使用 rest 运算符（...）代替。因为 rest 运算符显式表明你想要获取参数，而且 arguments 是一个类似数组的对象，而 rest 运算符可以提供一个真正的数组。

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join(\'\');
}

// good
function concatenateAll(...args) {
  return args.join(\'\');
}

• 使用默认值语法设置函数参数的默认值。

// bad
function handleThings(opts) {
  opts = opts || {};
}

// good
function handleThings(opts = {}) {
  // ...
}

4.3 严格模式

• 不要在全局作用域中使用"use strict"

// 不好的写法
"use strict"
function doSomething() {
    // 代码
}

// 好的写法
function doSomething() {
    "use strict"
    // 代码
}

4.4 相等

• 所有情景下都应当使用全等===和不全等!==

4.5 原始包装类型

• 尽量禁止使用原始包装类型（String、Number、Boolean）来创建新对象

// 不好的做法
let name = new String(\'Nicholas\');
let author = new Boolean(true);
let count = new Number(10);

4.6 Map结构

• 注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要key: value的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制。

let map = new Map(arr);

for (let key of map.keys()) {
  console.log(key);
}

for (let value of map.values()) {
  console.log(value);
}

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

4.7 Class

• 总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解。

// bad
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
}

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

• 使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。

// bad
const inherits = require(\'inherits\');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
  return this._queue[0];
}

// good
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

4.8 模块

• Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用import取代require。

// bad
const moduleA = require(\'moduleA\');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// good
import { func1, func2 } from \'moduleA\';

• 使用export取代module.exports。

// commonJS的写法
var React = require(\'react\');

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

module.exports = Breadcrumbs;

// ES6的写法
import React from \'react\';

class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};

export default Breadcrumbs;

• 如果模块只有一个输出值，就使用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用。

• 不要在模块输入中使用通配符。因为这样可以确保你的模块之中，有一个默认输出（export default）。

// bad
import * as myObject from \'./importModule\';

// good
import myObject from \'./importModule\';

• 如果模块默认输出一个函数，函数名的首字母应该小写。

function makeStyleGuide() {
}

export default makeStyleGuide;

• 如果模块默认输出一个对象，对象名的首字母应该大写。

const StyleGuide = {
  es6: {
  }
};

export default StyleGuide;

5. 避免使用全局变量

• 在浏览器中，window对象往往重载并等同于全局对象，，因此任何在全局作用域中声明点变量和函数都是window对象的属性；

6.事件处理

• 最佳实践：将应用逻辑从所有事件处理程序中抽离出来

• 规则 1: 隔离应用逻辑;

// 好的写法
let myApplication = {
    handleClick: function(event) {
        this.showPopup(event)
    },
    showPopup: function(event) {
        let popup = document.getElementById(\'popup\');
        popup.style.left = event.clientX + \'px\';
        popup.style.top = event.clientY + \'px\';
        popup.className = \'reveal\'
    }
};

addListener(element, \'click\', function(event) {
    MyApplication.handleClick(event);
});

• 规则 2: 不要分发事件对象, 最佳点办法是让事件处理程序使用event对象来处理事件；然后拿到所需要的数据传给应用逻辑

// 好的写法
let myApplication = {
    handleClick: function(event) {
        this.showPopup(event.clientX, event.clientY)
    },
    showPopup: function(x,y) {
        let popup = document.getElementById(\'popup\');
        popup.style.left = x + \'px\';
        popup.style.top = y + \'px\';
        popup.className = \'reveal\'
    }
};

addListener(element, \'click\', function(event) {
    MyApplication.handleClick(event);
});

7. 避免空比较

let Controller = {
    process: function(items) {
        if (items !== null) {   // 不好的写法
            items.sort();
            items.forEach(function() {
                // 执行逻辑
            })
        }
    }
}

7.1 检测原始值

• javascript有五种原始类型：字符串、数字、布尔值、null、undefined
• 判断五种原始类型，最好使用typeo运算符；
• typeof运算符会返回一个表示值的类型的字符串

// 检测字符串
if (typeof name === \'string\') {
    anotherName = name.substring(3);
}

// 检测数字
if (typeof count === \'number\') {
    updateCount(count);
}

// 检测布尔值
if (typeof found === \'boolean\' && found) {
    message(\'Found\');
}

// 检测undefined
if (typeof MyApp === \'undefined\') {
    MyApp = {}
}

• 未定义到变量和值为undefined的变量，通过typeof都将返回\'undefined\'
• 原始值 null ,一般不用于检测语句，如果需要检测null,最好使用===或!==

typeof null 返回 \'object\'
编程时需要杜绝使用typeof来检测null的类型

7.2 检测引用值

• 检测某个引用值的类型的最好方法是使用instanceof运算符

value instanceof constructor

// 检测日期
if (value instanceof Date) {
    console.log(value.getFullYear());
}

// 检测正则表达式
if (value instanceof RegExp) {
    if (value.test(anotherValue)) {
        console.log(\'Mathces\');
    }
}

// 检测Error
if (value instanceof Error) {
    throw value;
}

• instanceof运算符可用于检测自定义的类型

function Person(name) {
    this.name = name;
}
let me = new Person(\'Nicholas\');

console.log(me instanceof Object); // true
console.log(me instanceof Person); // true

7.2.1 检测函数

• javascript中的函数都是引用类型，同样存在Function构造函数，每个函数都是其实例;

function myFunc() {};

// 不好的写法
console.log(myFunc instanceof Function); // true
// 然而这个方法不能跨帧(frame)使用，因为每个帧都有各自的Function构造函数。但是可以使用typeof运算符检测函数

// 好的写法
console.log(typeof myFunc === \'function\')

7.3 检测属性

• 判断属性是否存在的最好办法是使用in运算符

• in运算符仅仅会简单的判断属性是否存在，而不会去读取属性到值

let object = {
    count: 0,
    related:null
}

// 好的写法
if (\'count\' in object) {
    // 这里的代码会执行
}

// 不好的写法: 检测假值
if (object[\'count\']) {
    // 这里的代码不会执行
}

// 好的写法
if (\'related\' in object) {
    // 这里的代码会执行
}

// 不好的写法： 检测是否为null
if (object[\'related\'] !== null) {
    // 这里的代码不会执行
}

• 检测实例对象的某个属性是否存在，则使用hasOwnProperty()方法，如果实例存在这个属性则返回true(如果这个属性只存在于原型里，则返回false)

// 对于所有非dom对象，这是最好的办法
if (object.hasOwnProperty(\'related\')) {
    // 执行这里的代码
}

// 如果不确定是否为dom对象，
if (\'hasOwnProperty\' in object && object.hasOwnProperty(\'related\')) {
    // 执行这里的代码
}

8 将配置数据从代码中分离出来

8.1 什么是配置数据

• 配置数据是应用中写死的值

function validate(value) {
    if (!value) {
        alert(\'Invalid value\')  // 可能会修改替换
        location.href = \'/errors/invalid.php\';  // 可能会修改替换
    }
}

function toggleSelected(element) {
    if (hasClass(element, \'selected\')) {    // \'selected\' 可能会修改替换
        removeClass(element, \'selected\');   // \'selected\' 可能会修改替换
    } else {
        addClass(element, \'selected\')   // \'selected\' 可能会修改替换

    }
}

• URL
• 需要展现给用户的字符串
• 重复的值
• 设置（比如每页的配置项)
• 任何可能发生变更的值

8.2 抽离配置数据

• 将配置数据从代码中抽离出来的第一步是将配置数据拿到外部，即将数据从JavaScript代码之中拿掉

let config = {
    MSG_INVALID_VALUE: \'Invalid value\',
    URL_INVALID: \'errors/invalid.php\',
    CSS_SELECTED: \'selected\'
}
function validate(value) {
    if (!value) {
        alert(config.MSG_INVALID_VALUE);
        location.href = config.URL_INVALID;
    }
}
function toggleSelected(element) {
    if (hasClass(element, config.CSS_SELECTED)) {    // \'selected\' 可能会修改替换
        removeClass(element, config.CSS_SELECTED);   // \'selected\' 可能会修改替换
    } else {
        addClass(element, config.CSS_SELECTED)   // \'selected\' 可能会修改替换

    }
}

8.3 保存配置数据

• 配置数据最好放在单独的文件中，以便清晰的分隔数据和应用逻辑
• 将配置文件置于单独的JavaScript文件中,是一个不错的开始。一旦配置数据存放于单独的文件中，就可以管理这些数据

9. 抛出自定义错误

9.1 在JavaScript中抛出错误

• 使用throw操作符，将提供的一个对象作为错误抛出。
• 任何类型的对象都可以作为错误抛出，Error对象是最常用的

throw new Error(\’something bad happend\’)

  // 不好的写法
  throw \'message\';

• 如果没有通过try-catch语句捕获，抛出任何值将引发一个错误
• 唯一不出差错的显示自动移动错误消息的方式就是使用一个Error对象

9.2 抛出错误的好处

• 抛出自己的错误可以使用确切的文本供浏览器显示
• 在错误消息中包含函数名称以及函数失败的原因

9.3 何时抛出错误

• 一旦修复了一个很难调试的错误，尝试增加一两个自定义错误，当再次发生错误时，这将有帮助于更容易的解决问题
• 如果正在编写代码，思考一下：“我希望【某些事情】不会发生，如果发生，我的代码会一团糟糕”。这时，如果“某些事情”发生，就抛出一个错误
• 如果正在编写的代码别人也会使用，思考一下他们的使用方式，在特定的情况下抛出错误

请牢记，我们多目的不是防止错误，而是在错误发生时能更加容易的调试

9.4 try-catch语句

• 将可能引发错误的代码放在try块中，处理错误的的代码放在catch块中

try {
    somethingThatMighCauseAnError();
} catch (ex) {
    handleError(ex)
}

当try块中发生一个错误时，程序立即停止执行，然后跳到catch块，并传入一个错误对象。检测该对象可以确定从错误中恢复的最佳动作。

• 可以增加finally块。finally块中的代码不管是否有错误发生，最后都会被执行。

try {
    somethingThatMighCauseAnError();
} catch (ex) {
    handleError(ex)
} finally {
    continue;
}

注意：如果try块中包含了一个return语句，实际上必须等到finally块中的代码执行后才能返回，因此，finally其实不太常用，但是如果处理错误必要，它仍是处理错误的一个强大工具；

• 使用throw还是try-catch
• 千万不要将try-catch中的catch留空，需写点错误处理逻辑来处理错误。

// 不好的写法
try {
    somethingThatMighCauseAnError();
} catch (ex) {
    // 空
}

9.5 错误类型

• Error: 所有错误的基本类型;

  • EvalError: 通过eval()函数执行代码发生错误时抛出;
  • RangeError: 一个数字超出它的边界时抛出;
  • SyntaxError: 期望的对象不存在时抛出;
  • TypeError: 变量不是期望的类型时抛出;
  • URIError: 给encodeURL()、encodeURLComponent()、decodeURL()等函数传递格式非法的URL字符串时抛出;

• 创建自己的错误类型，继承Error，这种做法允许你提供额外的信息，同时可区别与浏览器抛出的错误。

function MyError(message) {
    this.message = message;
}
MyError.prototype = new Error();

这段代码有两个重要的部分：message属性，浏览器必须要知道错误消息字符串；设置prototype为Error的一个实例，对JavaScript引擎就标识它是一个错误对象；

throw new MyError(\’Hello world\’);

10. 文档化 JSDOC

• JSDoc是一个根据javascript文件中注释信息，生成JavaScript应用程序或库、模块的API文档 的工具
• JSDoc注释一般应该放置在方法或函数声明之前，它必须以/ **开始，以便由JSDoc解析器识别。其他任何以/*，/***或者超过3个星号的注释，都将被JSDoc解析器忽略

/**
 * Book类，代表一个书本.
 * @constructor
 * @param {string} title - 书本的标题.
 * @param {string} author - 书本的作者.
 */
function Book(title, author) {
    this.title=title;
    this.author=author;
}
Book.prototype={
    /**
     * 获取书本的标题
     * @returns {string|*}
     */
    getTitle:function(){
        return this.title;
    },
    /**
     * 设置书本的页数
     * @param pageNum {number} 页数
     */
    setPageNum:function(pageNum){
        this.pageNum=pageNum;
    }
};

学习文档：JSDoc中文文档

学习资料《编写可维护的JavaScript》《ECMAScript 6入门》