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导出一个变量,代码的缩进保持一致,更容易阅读。

努力学习,不断总结中~

JavaScript代码优化的更多相关文章

  1. JavaScript代码优化新工具UglifyJS

    jQuery 1.5 发布的时候 john resig 大神说所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意. UglifyJS 是一个服务端no ...

  2. 《JavaScript 代码优化指南》

      ~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> &l ...

  3. JavaScript代码优化指南

    1. 将脚本放在页面的底部 <script src="./jquery.min.js"></script> <script src="./i ...

  4. JavaScript代码优化(下载时间和执行速度优化)

    JavaScript代码的速度被分成两部分:下载时间和执行速度. 下载时间 Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内.这个因素会增加下载时间.1160是一个TCP-IP包中的字 ...

  5. javascript 代码优化工具 UglifyJS

    安装: 1. 安装 node.js 环境 (这个不用我教了吧,网上教程一大堆哦.) 2. 进入 https://github.com/mishoo/UglifyJS  右上角 “Download” Z ...

  6. 关于javascript代码优化的8点建议

    前面的话 本文将详细介绍JS编程风格的几个要点 松耦合 当修改一个组件而不需要更改其他组件时,就做到了松耦合 1.将JS从CSS中抽离:不要使用CSS表达式 //不好的做法 .box{width: e ...

  7. javascript: 代码优化

    一.避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些 function search() { //当我要使用当前页面地址和主机域 ...

  8. javascript之变量、作用域、作用域链

    一.变量 javascript的变量是松散类型的,所谓松散类型就是说定义的变量可以用来保存任何类型的数据.定义变量时要使用var操作符后面跟变量名.这里的var是一个关键字,如果定义变量时省略了var ...

  9. Regexper:牛逼的 JavaScript 正则可视化工具

    RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 C ...

随机推荐

  1. vue created中初始化属性

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

  2. .NET复习笔记-泛型

    1.yield关键字用于返回迭代器具体的值,如下框代码所示 /// 返回0~9整数集合 public static IEnumerable<int> yieldSampleMethod() ...

  3. windows下端口占用处理工具

    一.通用方法 经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,笔者在最近使用tomcat时,老是会遇到这种端口占用的问题,如何知道谁占有了我们需要的端口,很多人都比较头疼,以下是通用方法: ...

  4. MSP430中断的一个细节问题

    关于中断标志: 从SPI发送一字节数据: void SPI_Set_SD_Byte(unsigned char txData) { UCB0TXBUF = txData; // 写入发送缓冲区 whi ...

  5. python之路之简单介绍:

    python介绍: a. python 基础 - 基础 - 基本的数据类型 - 函数 - 面向对象 python 安装 python 安装在os上 执行操作: 写一个文件,文件中按照python规则写 ...

  6. Git克隆代码后更新代码上传至服务器

    首先在本地新建一个文件夹,鼠标右键点击Git clone(熟悉命令的可以直接在Git Bsah Here 里输入命令进行克隆), 点击后在弹框中输入服务器url后点击ok               ...

  7. 非对称加密, 助记词, PIN, WIF

    一钱包 1.1非对称加密, 助记词, PIN, WIF, 地址 1.1.1 非对称加密算法 非对称加密算法, 加密与解密使用不同的KEY, 我们分别称为私钥与公钥,其中可以通过私钥生成公钥 在比特币中 ...

  8. 如何才能在python的路上走得更远

    刚开始了新的课程,现在又没有什么心情学习了,不知点解就是提不起兴趣去学习,为什么呢?学习python如何才能提起劲,有什么方法可以提上劲学习?

  9. crunch--字典生成工具

    Crunch是一种创建密码字典工具,按照指定的规则生成密码字典,可以灵活的制定自己的字典文件.使用Crunch工具生成的密码可以输出到屏幕,保存到文件.或另一个程序.crunch程序在2004年及以前 ...

  10. Spark读HBase写MySQL

    1 Spark读HBase Spark读HBase黑名单数据,过滤出当日新增userid,并与mysql黑名单表内userid去重后,写入mysql. def main(args: Array[Str ...