• 17道js风味 让你的js代码更接地气
  • 笑游江湖 发表于 2016/3/18 18:23:00 | 分类标签: 代码重构 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")。而你实际上是想做赋值操作的。因此你要写上注释说明,你这里不是书写失误,而是要进行赋值。

    注: 根据博友留言的帮助,此处应用需小心,当你为value赋值为空串 或 0 或 null 等等(也就是说,value作布尔运算返回值为 false)的时候,整个判断表达式会返回 false, 也就不会执行if花括号里面的代码程序。所以当你不确定 value 会被赋值为什么的时候,建议不要这样用。

    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");
    }

    推荐使用 全等 判断,这样更准确。 字符串和数字并不是全等的。关于比较的一点说明:

    Demo . 17

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

    目前只想到这么多,麻烦大家进行补充,感谢!

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:笑游江湖
  • 加入时间:2013/7/8 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮