Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何改善既有 JS 代码:修复常见的 ESLint 报警(二) #78

Open
cssmagic opened this Issue Dec 22, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@cssmagic
Copy link
Owner

cssmagic commented Dec 22, 2017

前言

ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时,ESLint 就会提示错误。

本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则,帮助你顺利地把既有代码迁移到 ESLint 的保护之中。

no-return-assign

禁止 return 一个赋值表达式。

虽然函数允许 return 一个赋值表达式,但这种写法令人困惑:

function foobar (bar) {
	return foo = bar + 1
}

它的效果是返回 bar + 1,但本意很可能是想返回 foo === bar + 1 但写错了。因此,这条规则往往可以帮我们发现代码中的笔误。当你的代码触发这条规则报警时,看一下你的真实意图到底是哪一种情况,然后就可以简单修复了:

  • 要么拆成 foo = bar + 1return foo 两条语句;
  • 要么改成 return foo === bar + 1

有意思的是,到了 ES6 时代,还有一种情况可能会令你无意中触发这条规则。箭头函数令我们的代码更加简洁,用它写回调函数看起来很酷,比如我们在实现 “延时一秒跳转页面” 的需求时,可能会写成这样:

setTimeout(() => location.href = myUrl, 1000)

这行代码顺理成章,一气呵成,但实际上它也会触发 no-return-assign 这条规则。怎么会这样?

我们不妨来复习一下箭头函数的语法设计:为了精简代码噪音,当箭头函数的函数体只有一个 return 语句时,可以同时省略函数体外层花括号({})和 return 关键字。

好,再来看一眼上面这个的箭头函数 () => location.href = myUrl,我们不难反推出它的 “完全体” 实际上是这样的:

() => {
	return location.href = myUrl
}

这正好符合 no-return-assign 这条规则扫描的特征,于是报警。

你可能会觉得这条规则在这里太过敏感了?其实不是。仔细想一下,其实 () => location.href = myUrl 这个箭头函数的行为实际上已经与作者的本意不符了,因为它除了有跳转页面的功能以外,还让函数有了返回值——这超出了作者的初衷。

常言道:我们的本意是什么,就应该把代码写成什么样。在这里,我们对这个箭头的预期就是跳转页面,所以它的行为只需要是这样:

() => {
	location.href = myUrl
}

那么接下来,触发报警的那一行代码改成这样就可以了:

setTimeout(() => { location.href = myUrl }, 1000)

改过之后的代码在简洁性和可读性方面没有任何损失,意图却更加准确了,鼓掌!

no-constant-condition

这条规则禁止在 if/while/for 等判断条件中出现永远不变的判断结果。

比如 if (true) {...} 等。

乍一看你可能会认为 “完全没有道理写出这样的代码呀~”。然而跑一遍 ESLint 就会发现,代码库中这样的情况并不少见!写出这种代码通常有三种原因,分别讨论如下。

原因一:调试代码忘了删

举个日常例子,某功能需要由一个判断条件来决定是否启动,代码会这样写:

if (foo === bar) {
	// 启动某功能
}

在开发调试阶段,你可能需要跳过这个判断,直接启动这个功能,那么代码会临时小改一下:

if (true || foo === bar) {
	// 启动某功能
}

当我们开发完整个功能之后,往往可能忘了把这里的 true || 删掉。幸好在上线之前,ESLint 的 no-constant-condition 规则帮你发现了这一行明显有违常理的代码,业界良心有木有!

原因二:临时下线某功能

有时候我们需要临时下线某功能,为了最小化对代码的改动,往往会这样写:

if (false && foo === bar) {
	// 启动某功能
}

这显然也是过不了 no-constant-condition 规则的。那怎么办?…………

……

……


完整文章在 “CSS魔法” 微信公众号首发,扫码立即阅读:

weixin-post-qr-code


© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.