关于前端:前端开发之JS规范

3次阅读

共计 1277 个字符,预计需要花费 4 分钟才能阅读完成。

个别标准
应用严格等 ===
总是应用 === 准确的比拟操作符,防止在判断的过程中,由 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);

正文完
 0