前端开发之JS规范

一般规范

使用严格等===

总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。

this关键字

只在对象构造器、方法和在设定的闭包中使用 this 关键字。

this 的语义常容易被误导。它时前端培训而指向全局对象（大多数时），时而指向调用者的定义域（在 eval 中），时而指向 DOM 树中的某一节点（当用事件处理绑定到 HTML 属性上时），时而指向一个新创建的对象（在构造器中），还时而指向其它的一些对象（如果函数被 call() 和 apply() 执行和调用时）。

 

正因为它是如此容易地被搞错，请限制它的使用场景：

· 在构造函数中

· 在对象的方法中（包括由此创建出的闭包内）

三元操作符

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。

// bad

if(x === 10) {

return 'valid';

} else {

return 'invalid';

}

// good

return x === 10 ? 'valid' : 'invalid'

不使用eval()函数

就如eval的字面意思来说，恶魔，使用eval()函数会带来安全隐患。eval()函数的作用是返回任意字符串，当作js代码来处理。

使用ES6编码规范

· 定义变量使用let ,定义常量使用const

· 静态字符串一律使用单引号或反引号，动态字符串使用反引号

// bad

const a = 'foobar';

const b = 'foo' + a + 'bar';

// good

const a = 'foobar';

const b = `foo${a}bar`;

const c = 'foobar';

· 解构赋值

// 1. 数组解构赋值

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

// bad

const first = arr[0];

const second = arr[1];

// good

const [first, second] = arr;

// 2. 对象解构赋值

// 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 }) {}

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

const items = [1, 2, 3, 4, 5];

// bad

const itemsCopy = items;

// good

const itemsCopy = [...items];

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

// bad

const self = this;

const boundMethod = function(...params) {

return method.apply(self, params);

};

// good

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

尚硅谷【官网】谷粉与老学员力挺的Java培训|大数据培训|前端培训|Python培训

---

推荐阅读：

前端开发框架之Vue

前端开发技术HTML基础

前端开发之组件库源码修改

前端开发之常用小技巧分享