zoukankan      html  css  js  c++  java
  • JavaScript代码优化

    1、if else 语句中变量赋值为布尔值

    if (a > b) {
        status =  true;
    } else {
        status = false;
    }
    // 可以简化为
    status = a > b
    
    

    if语句的条件会自动转换为布尔值,如果在使用时不确定是否为布尔值,可以对表达式双重取反(!!).

    2、if else 语句中变量赋值为非布尔值

    if (a > b) {
        status =  1;
    } else {
        status = 2;
    }
    // 可以简化为
    status = a > b ? 1 : 2;
    
    

    3、用命名常量代替魔数(数值是编程者自己指定的,其他人不知道数值有什么具体意义)

    function getUserState() {
        // 人数达到5人,不考虑时间直接成功
        if (users.length == 5) {
            return 1;
        }
    
    // 超过时间 失败
        if (serverTime > endTime) {
            return 0;
        }
    
    // 在时间范围内 && 人数不到5人
        if (joinedGroup == '0') {
            return  2;
        } else {
            return 3;
        }
        return;
    }
    

    0,1,2,3这些数字具体的含义不是很清晰,用常量来代替。

    const STATE = {
        // 拼团失败
        GROUP_SHOPPING_FAIL: 0,
        // 拼团成功
        GROUP_SHOPPING_SUCCESS: 1,
        // 符合参加活动的资格
        CAN_JOIN: 2,
        // 已经参加活动
        ALREADY_JOIN: 3
    };
    
    groupState = STATE => ({joinedUserCount, joinedGroup, serverTime, endTime}) => {
        if (joinedUserCount >= 5) {
            return STATE.GROUP_SHOPPING_SUCCESS;
        }
        if (serverTime > endTime) {
            return STATE.GROUP_SHOPPING_FAIL;
        }
        return joinedGroup == '0'
            ? STATE.CAN_JOIN
            : STATE.ALREADY_JOIN;
    }
    
    
    

    4、函数参数比较多(个人建议超过3个),最好用json对象,在方法里面要判断是否传入对象,没传入对象,要赋值为空对象,防止后面用对象的属性报错,传入的参数最好可以有个默认值。

    5、在多个逻辑或(||)表达式中,同一个变量跟多个状态做===比较。

    e.target.id == 'titleDrag' || e.target.id == 'subtitleDrag'
    
    // 改成下面这种写法,在条件比较多时就会显得比较简洁:
    ['titleDrag', 'subtitleDrag'].indexOf(e.target.id) > -1
    
    

    6、建议不再使用var命令,使用let或者const,因为使用var声明的变量会提升到代码块的头部,违反的变量先声明后使用的原则。

    使用const声明常量有2个好处:阅读代码的人会意识到不应该修改这个值;防止无意间修改变量导致错误。

    7、静态字符串一律使用单引号,包含变量的动态字符串使用反引号(``)。

    8、rest参数(…变量名)用于获取函数的多余参数,将用逗号分隔的参数序列保存到数组中,rest参数中的变量代表一个数组,可以代替arguments对象。

    扩展运算符(…)将一个数组转为用逗号分隔的参数序列。如果函数的形参为多个变量,而实参是一个数组,则不需要使用apply将数组转化成函数的参数,使用扩展运算符即可展开数组。

    9、跟接口相关的代码最好写在一个文件中,在一个常量对象中保存接口名称

    const API = {
        GET_INFOS_BY_USER_ID:'getInfosByUserId'
    };
    
    
    export var getInfosByUserId = function (params) {
        return getJSONP(API.GET_INFOS_BY_USER_ID, params);
    };
    
    

    这样的话,接口易于维护,当接口有变动时,只需改动这一个地方,不需要改动其他引用该接口的代码。

    10、公共方法记得添加注释,按照jsDoc格式添加注释。

    11、代码的格式要规范,赋值运算符、逻辑运算符前后最好添加空格,赋值语句结束要有分号,尤其是export导出一个变量,代码的缩进保持一致,更容易阅读。

    努力学习,不断总结中~

  • 相关阅读:
    算法基础~链表~求两个链表的交点(不考虑时间、空间复杂度)
    《人月神话》阅读笔记一
    html与css学习笔记
    新手教程
    课程信息管理
    关于文件动手动脑
    四则运算随机生成
    关于异常
    第四次动手动脑
    第三次动手动脑
  • 原文地址:https://www.cnblogs.com/happypayne/p/8215770.html
Copyright © 2011-2022 走看看