在前端开发中，代码质量的保证是非常重要的。而现代前端开发中，JavaScript 代码的复杂度和规模都在不断提高，如何保证代码的质量并避免不必要的错误就成为了开发者的一大问题。因此，代码规范的制定和执行是很有必要的。其中一个常见的工具就是 eslint，不过它只在语法层级进行规范。
近年来，Clojure 语言盛行，其中 closure 就是其中一个重要的概念。Closure 可以简单理解为闭包，它还是一种函数。不过，在闭包中可以访问定义在闭包之外的变量。这种特性为代码复用和可维护性带来了极大的方便，因此成为很多语言开发流派中的核心概念。在 JavaScript 开发中，使用 closure 也被广泛提倡。
然而，使用 closure 的时候，很容易出现一些代码问题，比如忘记从闭包中返回值，导致变量泄漏等，这些问题可能编译时无法被发现。因此，提供一个可以在编译时检测 Closure 错误的工具就显得十分必要。而在 npm 上，已经有了 eslint-closure 这个优秀的工具包，在前端工程中得到了广泛的应用。
安装
使用 npm 安装 eslint-closure：
--- ------- ------ -------------- ----------
配置
在使用 eslint-closure 之前需要配置 eslint。可以在 .eslintrc 文件中添加如下配置：
-
---------- -
-----------------------------
--------------------
--
---------- -
---------
--
----------- -
---------- -
---------- -
------
--
-------- -
-------------------------------------
-
-
-
-其中 "extends": ["plugin:closure/recommended", "eslint:recommended"] 表示将 eslint-closure 的规范和 eslint 的规范结合使用。如果需要更自定义的规则，可以将 "plugin:closure/recommended" 改为 "plugin:closure/myConfig。这时需要在 .eslintrc 的根目录下添加一个 "myConfig": {...} 节点，其中 "..." 是自定义规范的内容。
同时，在配置中还需要指定 closure 库的路径和代码路径。对于 closure，可以使用 paths 指定 closure 库的路径。对于要检查的代码，可以使用 baseDir 来指定目录，其中所有的 JavaScript 文件将会被检查。
使用
------ ----- --- -------------- - ----
在 package.json 中可以添加快速使用脚本：
---------- -
------- ------- ----- --- -------------- - -----
--然后执行：
--- --- ----
示例
接下来，我们来演示一下 eslint-closure 的规范检测能力。
---
- ------ -------- ---- --- ----- ------ -- ----
- ------ -------- ---- --- ------ ------ -- ----
- ------- -------- --- --- -- ------ --- -------
--
-------- --------- ----- -
------ ---- - ----- -- -- -------- --------
-
---
- --------------
--
-------- --------------- ----- -
--- ------ - --------- ------ -- --------
------- -- -------------
-
---
- ----- ------ -----------
- ------ ---------------- ---- -- ----- -- ------- -- --------
- ------- -------- --- ------- -----
--
-------- ------------- -
-- ------------ --- -- ------ ---- -- -------
--- --- - --
------------------------ - --- -- -- --- -- --------
------ --- - ------------ -- --- - ------
-在上面的示例中，函数 add 和 brokenAdd 有语法错误，没有添加右侧的 return 语句，返回了 undefined。而函数 average 在有些场景下也存在缺陷。但这些问题在编译时无法被发现，因此需要 eslint-closure 来完成预检工作。
执行 npm run lint 脚本后，可以得到下面的检查结果：
- ------ ----- --- -------------- - ---- --- ----- ----------------------------- -------- ------ --------- --- ----- ---- --- -------- --- ----- ---------------------------------- --- ------ ------ ----- ------ --- -- ---- --- -------- ---- ----- ---------------------------------- --- ------ ------ ----- ------ --- -- ---- ------- -------- ---- ----- ----------------------------- -------- -- ---- -------- -- --- ----------- --------
可以看到，所有的问题都被精准地定位并提示。这样做可以大量减少代码错误带来的困扰，并大幅度提高代码质量及稳定性。
结论
使用 eslint-closure 可以更好地保证代码质量及稳定性，推荐在开发过程中使用该工具，并贯彻在进行技术分享时将该工具的使用内容纳入指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f80238a385564ab6b30