菜单

JS代码的简单重构与优化

2015年12月23日 - JS

Demo . 1

//bad
if (age > 20) {
    return true;
} else {
    return false;
}
//good
return age > 20;

这种一看就明白吧,没什么说的。

Demo . 2

//bad
for (var i = 0; i < arr.length; i++) {
    //do something...
}

//good
for (var i = 0, len = arr.length; i < len; i++) {
    //do something...
}

将数组的长度进行存储,循环时就不用每次去读取一次数组长度,从而提升性能

Demo . 3

//bad
if (value !== "") {
    //do something...
}

//good
if (value) {
    //do something...
}

js中所有 非空字符 作布尔运算时,都会返回 true,反之返回 false。 (空格 属于非空字符)

Demo . 4

//bad
if (value !== 0) {
    //do something...
}

//good
if (value) {
    //do something...
}

js中所有 非零 数字作布尔运算时,都会返回 true, 反之返回 false。

Demo . 5

//bad
if (user.id === 10) {
    if (user.name !== "") {
        if (user.email === "email") {
            //do something...
        }
    }
}

//good
if(user.id === 10 && user.name !=="" && user.email === "email") {
    //do something...
}

//good
if (user.id !== 10) return;
if (user.name === "") return;
if (user.email !== "email") return;
//do something...

多层条件嵌套,进行 转换 或 拆分。

Demo . 6

//bad
var a = "aa";
var b = "bb";
var c = "cc";
var d;

//good
var a = "aa",
    b = "bb",
    c = "cc",
    d ;

多个变量的定义,写一个 var 即可,遵循的原则:被赋值的在前面,只是进行声明放后面(d 在最后)

Demo . 7

//bad
for (var i = 0; i < 100; i++){
    str += str;
    document.getElementById("box").innerHtml = str;
}

//good
for (var i = 0; i < 100; i++) {
    str += str;
}
document.getElementById("box").innerHtml = str;

尽可能的减少DOM操作,将DOM操作放在循环体之外,数据处理好后,只执行一次DOM操作即可。

Demo . 8

//bad
 function test() {
     var a = b = 1;
     console.log(a);
 }

 //good
 function test() {
     var a = 1,
         b = 1;

     console.log(a);
 }

避免使用 连等号 声明赋值变量。js基础好点的同学都知道,这里存在着一个坑: b 会被声明为全局变量,意思就是在 test() 方法之外b也是可以被访问到的。 全局变量是不推荐使用的,容易污染环境。

Demo . 9

//bad
if (age > 20) {
    console.log("年龄大于20");
}

//good
(age > 20) && console.log("年龄大于20");

这里的bad并不是说第一种写法不好,其实就可读性来说,第一种比第二种更好。 只是第二种写法更加优雅一点(个人觉得)。 这个句法可能有些同学用的比较少,解释一下:

如果第一个条件为 true ,那么就执行后面的语句,第一个条件为false, 后面的语句便不会执行。后面的语句可以是表达式,方法,或变量,常量都可以。 比如 (age > 20) && test()。用于赋值时的具体说明,如下图

Demo . 10

//bad
if (age > 20) {
    value = "similar";
    //do something...
}

//good
if (age > 20 && value = "similar") {
    //do something...
}

这个可以说是Demo9的变体,代码可读性还是第一个比较好,当你采用第二种写法时,请配合注释使用。因为有些人可能会认为你这是书写失误,少写了一个 = ,从而他自行给你补上了(value == “similar”)。而你实际上是想做赋值操作的。因为你要写上注释说明,你这里不是书写失误,而是要进行赋值。

Demo . 11

//bad
if (value === "") {
    value = "similar";
}

//good
if(!value) {
    value = "similar";
}

//good
value = value || "similar";

这个和Demo9的 && 号运算正好相反,当第一个条件为 false 时,执行后面的语句。因为空字符串作布尔运算是返回 false的,所以可以这样用。

Demo . 12

//bad
i = i + 1;
i = i - 1;

//good
i++;
i--;

这个没什么好说的。

Demo . 13

//bad
 if (typeof str === "String") {

 }

//good
 if (typeof str === "string") {

 }

这里只是帮大家填个坑,不存在好坏。typeof 运算是用来检查数据类型的(常用来检查js中的基础类型),它返回的是一个字符串(并且始终为小写),所以第一个始终为false。 检查js中的引用类型要用 instanceof 运算, 如: var arr = []; if(arr instanceof Array){}, 但 Function 类型比较特别,也可以用 typeof 来进行判断。

Demo . 14

//(bad) 格式化字符串 fontSize => font-size
function stringFormat(str) {
    var strArr = str.split(''),
        len = strArr.length,
        i = 0;

    for (; i < len; i++) {
        if(/^[A-Z]$/.test(strArr[i])) {
            strArr[i] = "-" + strArr[i].toLowerCase();
        }
    }

    return strArr.join('');
}

//(good) 格式化字符串 fontSize => font-size
function stringFormat(str) {
    return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();
}

两个方法实现同样的功能,但第二个优雅得多,性能上也比第一个要好。当对字符串进行循环操作,如:查找、替换。 首先考虑的应该是使用 正则,不应该是循环遍历。

Demo . 15

//bad
function regist(userName, userPwd, userEmail, userPhone) {
    //do something...
}

//good
function regist(user) {
    //do something
}

当一个方法接收的参数过多的时候,可以考虑将其封装成一个json对象, 这样简单得多。

Demo . 16

var a = 1,
    b = "1";

//(bad) 输出 a等于b
if (a == b) { 
    console.log("a等于b"); 
}

//(good) 输出 a不等于b
if (a === b) { 
    console.log("a等于b"); 
} else {
    console.log("a不等于b");
}

推荐使用 全等 判断,这样更准确。 字符串和数字并不是全等的。关于比较的一点说明:
1.两个操作数都是数值,则进行数值比较;
2.两个操作数都是字符串,则比较两个字符串对应的字符编码进行数值比较;
3.两个操作数有一个是数值,则把另一个转换成数值再进行数值比较;
4.两个操作数有一个是对象,则先调用valueOf()方法或toString()方法,再用结果比较。

var num='3'>22;//false;
var num='3'>'22';//true,进行第一个数字3>2,所以是true;
var num='a'>'b';//false,a=97,b=98,ASCII表;
var num='a'>'B';//true,B=66;

Demo . 17

//bad
if (age > 20) {
    value = "aa";
} else {
    value = "bb";
}

//good
value = age > 20 ? "aa" : "bb";
标签:

发表评论