也谈提升js代码可读性的小技巧

逻辑扁平化

我们工作中,可能会碰到一些比较复杂的逻辑,比如:满足条件1,不然XX;满足条件2,不然XX……如此都满足了才OO,写出来大概是这样:

 代码如下 复制代码

if (condition1) {
  if (condition2) {
    if (condition3) {
      // do
      // a
      // lot
    } else {
      // do zz
    }
  } else {
    // do oo
  }
} else {
  // do xx
}

这样带来的结果就是逻辑嵌套后显得很复杂,不好读。如果再赶上缩进没搞好或者换行就更惨了。这个时候,通常可以提前中断代码执行来使得逻辑扁平化。提前中断的方法包括return、throw,以及PHP中的die()和exit()。重新整理后的代码如下:

 代码如下 复制代码

if (!condition1) {
  // do xx
  return;
}
 
if (!condition2) {
  // do oo
  return;
}
 
if (!condition3) {
  // do zz
  return;
}
 
// do
// a
// lot

当然,有例外情况要排除的地方也很适用这种方法。甚至有激进的言论,表示不应该使用else,而都要这样提前中断。我觉得那样也有点过分,if ... else ... 的意义还是非常明确的。

缩短超长逻辑判断

有个从上古时期传下的不成文的规定,一行代码80个字符。随着显示器变大,这个老规矩应该打破。但是单行代码太长的话左右看起来也会很累,所以我们还是有必要控制。超长的代码经常出现在逻辑判断里,比如游戏中常见的检测子弹有没有打中玩家的代码,用较好的格式写出来大概是这样:

 代码如下 复制代码

if (bullet.x > enemy.x + enemy.width || bullet.y > enemy.y + enemy.height || bullet.x + bullet.width < enemy.x || bullet.y + bullet.width < enemy.y) {
  console.log('没打中');
}

这就已经不短了。有些时候我们还要加上enemy.damagable、!enemy.immunePhysical之类的其它条件判断,把这一行写的特别长。这个时候就需要我们用点小技巧将它缩短了。方法可能有多种,思路是一致的,就是提炼“目的”——将某一组判断的目的提炼成一个变量,既好读又能缩短代码。接下来还是用一段代码来说明吧:

 代码如下 复制代码
var isGod = !enemy.damagable || eneymy.immunePhysical, // 判断敌人是否不能攻击/上帝模式
    isHit = bullet.hitTest(eneymy); // 将刚才那一大串抽出方法“碰撞检测”
if (!isGod && isHit) {
  enemy.die();
}

 
总结

这两个小技巧都很简单,但对代码的可读性提高却很显著。各种各种的小技巧叠加起来,会让代码更好读,更容易维护。

时间: 2024-10-25 14:20:58

也谈提升js代码可读性的小技巧的相关文章

javascript-问题如图,js代码可读性差。想知道差在哪里。请各位指出。不胜感激

问题描述 问题如图,js代码可读性差.想知道差在哪里.请各位指出.不胜感激 解决方案 第一,变量名要能体现所表示的内容,让他人能一看就明白什么意思. 第二,就是 if else 逻辑控制的问题,上面有人解释得比较清楚了. 第三,像 "未确认数据不能编制单元号!" "宗地代码不足19位不能编制单元号!" "已生成的不动产单元号不能重复编制!" 此类的返回消息应定义为常量.或者用一个变量保存,最后统一返回. 解决方案二: 因为你每个判断都是retur

网页Flash播放代码的一个小技巧

flash播放|技巧|网页 网页Flash播放代码的一个小技巧 很多网页中都插有Flash播放代码,这不仅是为了页面元素的多样化,更是为了内容体现的需要.很多时候,我们会遇到这样的问题:根据需要使用Flash的script来读取不同的音频源或者视频源,那么如何实现这一功能呢?下面我们用改写<object>标签中的代码来实现. 一个典型的Flash播放器源代码中常常有这样的语句:<param name="movie" value="http://mydomin

125个提升网页可用性的优化小技巧(四)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> <有图有案例!125个提升网页可用性的优化小技巧(三)> 尽可能兼顾不同用户的知识和技能水平 用户可能是新手.专家或介于两者之间,要根据用户情况设计界面. △ 使用适当的新人引导(四种主要的新人引导策略) 这四种用法刚好可以用一个2*2的矩阵来表示.根据下方图示选择最适合你界面的方式: △ 为新手用户添加提示而不干扰专家用户 △ 使用卡片分

125个提升网页可用性的优化小技巧(三)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> 除了引导用户,还要减少他们的认知流程,以保持流畅状态. 尽可能少让用户做计算 千万别把计算这种事情丢给用户,让计算机来处理. △ 显示剩余数量 在界面内体现用户当前所处位置 界面就像机场,如果没有"你在这里"的标记,用户会迷路,因此记得提供标记. △ 在导航菜单上突出当前所选 △ 在复杂的界面中提供面包屑导航或步骤图示 △ 在页面标

125个提升网页可用性的优化小技巧(二)

  第一期回顾:<有图有案例!125个提升网页可用性的优化小技巧(一)> 让常用功能和重要数据信息更接近用户 预测用户的意图,让他们尽可能接近目标. △ 筛选出或跳至用户正在搜索的条目 △ 将用户常选项目列为默认选项 △ 产品列表页上把重要数据信息展示出来 很多时候用户需要像踩弹簧高跷杖一样,点击一个产品,查看信息,返回上一页,再反复操作以查看其他产品.这种设计的可用性差.应把重要信息直接放在主要页面,减少用户反复操作的次数. 如果你怕这样页面会杂乱,也可以设计成鼠标悬停时显示(如下面这样)

3款实用的在线JS代码工具(国外)_javascript技巧

   1. 压缩工具        用于在线压缩你的JS代码,它有一个选项"Include latest jquery.min.js",这对于提升速度非常有用.         推荐理由:缩小代码 = 更小的文件大小 = 更快的网页加载速度           2. 美化工具          用于将压缩后的代码转换回正常状态,使代码再次可读.该工具也可用于混淆的代码.         推荐理由:漂亮的代码 = 易读 = 更快地开发         3. 混淆工具        用于保

js、jquery实用小技巧集合

Tip16:JS的定时器 JS 中有两种定时器,setTimeout('fn', t) 和 setInterval('fn', t),'fn'指的是定时执行的方法名,字符串类型.       setTimeout('fn', t):   只执行一次,执行完成后将销毁.   setInterval('fn', t):一直执行.   (Date:2012-02-17)   ----------------------------------------------------------------

文本框只能输入数字的js代码(含小数点)_javascript技巧

只能输入0-9多包括小数点 <html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <title>js 只能输入数字和小数点</title> <script language="JavaScript" type="text/javascript">

不用一句js代码初始化组件_javascript技巧

最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js的初始化,所以导致页面初始化的时候js的初始化代码里面出现很多重复的代码,看着很闹心.于是想起bootstrap table里面的data属性来,如果能够直接在html里面使用data-*这种方式来初始化简单的组件,那该多爽.我们先来看看bootstrap table的文档: