前端代码规范
基本的格式化
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入门》