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. node.js 之 N-blog

    N-blog  使用 Express + MongoDB 搭建多人博客 原文地址: https://github.com/nswbmw/N-blog 建议初学者,研究下整个项目. 这里节选了一些内容为 ...

  2. 微信小程序自定义TabBar

    项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...

  3. node,npm,vue的全局升级

    pc环境:windows 10, OS:win32, Arch:x64 1.升级node.js到最新 ⑴.别人成功的方法: . 第一步 npm -g install n //此处可以加上 --forc ...

  4. servlet之小demo(四)

    描述: 1.在web.xml文件中设置两个web应用的初始化参数,user和password 2.定义一个login.html,里面定义两个请求字段:user,password,发送请求到loginS ...

  5. ios 拉伸背景图中间图片不变四周拉伸

    上图中间区域的翅膀不能变形,Android的点九能很好的解决,但是iOS的stretchableImageWithLeftCapWidth没法一次性指定拉伸区域,最后发现https://www.jia ...

  6. npm 镜像源替换为淘宝镜像

    1.查询配置的镜像源地址: npm get registry 2.配置为淘宝镜像源 npm config set registry http://registry.npm.taobao.org/ 3. ...

  7. AI五子棋需求规格说明书

    AI-Gobang AI五子棋小程序 github地址:https://github.com/holidaysss/AI-Gobang 程序简介 AlphaGo Zero在世界舞台上取得的巨大成功体现 ...

  8. LeetCode第一次刷题

    感觉自身编程水平还是差很多,所以刷刷题 LeetCode貌似是一个用的人比较多的题库,下面是第一题 给数组和目标和求需要元素的下标 public class Solution { public int ...

  9. 前端框架Angular、react、vue在github上的数据统计-2018-05

    2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...

  10. 测试那些事儿—LR脚本插入DOS命令

    1.基础命令 dir  查看当前目录下的文件和文件夹 cd  目录名:进入特定的目录. md 路径名:建立特定的文件夹. rd 路径名:删除特定的文件夹. cls:清除屏幕. copy 路径\文件名 ...