JS代码的简单重构与优化
in 前端 with 0 comment

JS代码的简单重构与优化

in 前端 with 0 comment

这篇文章是在网上看到的,感觉对自己提升js有一定的帮助。

对js学会初级应用之后,感觉又跟php似的进入了一种瓶颈,不知道要干什么。

通习此篇博文,估计对自己的代码优化有帮助。。


看了这篇博文之后,我对之前写的一个localstorage函数做了优化

原code

调用方法为Data.add(key,value),Data.xxx形式

var Data = {
    add: function (key, value) {
        localStorage.setItem(key, value);
    },
    get: function (key) {
        return localStorage.getItem(key);
    },
    del:function(key){
        localStorage.removeItem(key);
    },
    clear:function(){
        localStorage.clear();
    }
};

后来看了这个和受到了jq里的ajax函数的茶毒,改成了以下code

function Storage(options){
    options = options || {};//调用函数的时候如果 options 没指定,就给它赋值为空的对象{}
    options.type = options.type || null;
    var params = options.data;
    if(window.localStorage && options.type != null){
        if(options.type=="add")
            localStorage.setItem(params.key,params.value);
        else if(options.type=="get")
            localStorage.getItem(params.key);
        else if(options.type=="del")
            localStorage.removeItem(params.key);
        else if(options.type=="clear")
            localStorage.clear();
    }
}

调用方式改成了

 Storage({
     type:"add",
     data:{
         key:"test",
         value:"test value"
     }
 });

例子1

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

例子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...
}

例子3

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

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

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

例子4:

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

//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...

例子5

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

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

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

例子6

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

//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;

例子7

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

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

例子8

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

//(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();
}

例子9

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

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

原文地址:JS代码的简单重构与优化(适合新手)

Comments are closed.