专栏名称: 前端JavaScript
分享 | 学习 | 交流 | 原创 分享是学习的开始;学习不必要从头开始,是从现在开始;交流能沟通你我,提高你的学识;期待你的加入!!! web前端技术交流,JavaScript,HTML5,CSS3……
51好读  ›  专栏  ›  前端JavaScript

写好你的JavaScript(2)

前端JavaScript  · 公众号  · Javascript  · 2017-03-12 07:17

正文

请到「今天看啥」查看全文


编码规范


对于编码规范,既然是规范,那我们就应该按照一定的规则来编写。随意编写违反编码规范的代码,可能会导致程序的出错和潜在的bug,因此其相对于编码风格来说应该更加严谨,也有人会把编码风格包含在编码规范之中。


下面就列举几个常见的实例代码:


1.比较参数


// 不推荐的写法 :==和!=比较时会进行类型转换,应尽量避免使用

var num = 123;


if (num == '123') {

console.log(num);

} else if (num != '321') {

console.log('321');

}

// 推荐的写法 :使用===和!==来进行比较

var num = 123;


if (num === '123') {

console.log(num);

} else if (num !== '321') {

console.log('321');

}


2.包裹if语句


// 不推荐的写法 :if语句不用大话号包裹会出现潜在bug

var num = 123;


if (num === '123')

console.log(num);

// 推荐的写法 :if语句用大话号包裹

var num = 123;


if (num === '123') {

console.log(num);

}


3.慎用eval


// 不推荐的写法 :应避免使用eval,不安全,非常耗性能(一次解析成js语句,一次执行)

var json = '{"name": "劳卜", "func": alert("hello")}';


eval('(' + json + ')'); // 弹出“hello”

// 推荐的写法

var json = '{"name": "劳卜", "func": alert("hello")}';


JSON.parse(json); // 校验报错


4.判断类型


// 不推荐的写法 :用typeof来判断构造函数创建的对象

var str = new String('劳卜');


console.log(typeof str); // 'object'

// 推荐的写法 :用instanceof来判断构造函数创建的对象

var str = new String('劳卜');


console.log(str instanceof String); // true


5.检测属性


// 不推荐的写法 :使用undefined和null来检测一个属性是否存在

if (obj['name'] !== undefined) {

console.log('name属性存在'); // 若obj.name为undefined时则会导致判断出错

}


if (obj['name'] !== null) {

console.log('name属性存在'); // 若obj.name为null时则会导致判断出错

}

// 推荐的写法 :使用in运算符来检测对象属性是否存在,使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在

if ('name' in obj) {

console.log('name属性存在');

}


if (obj.hasOwnProperty('name')) {

console.log('name属性存在');

}

以上主要列举了5个常见的编码规范的例子,合理地规范自己的代码能够很大程度上减少不必要的维护成本和潜在的bug风险,对于JavaScript学习者来说应该铭记于心。


结语


“程序是写给人读的,只是偶尔让计算机执行一下。”我们不能为了贪图一时的方便而亲手毁了自己的代码形象,这会给他人和整个项目带来不必要的麻烦。


本文内容参考自《编写可维护的JavaScript》一书。


转自: http://www.jianshu.com/p/f5dee4d02a80

作者: 劳卜


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


========== 阅读原文 ==========








请到「今天看啥」查看全文