使用JSLint完善代码

由于网络应用程序的普及和HTML5的采用，JavaScript是一种越来越流行的语言。 JavaScript的吸引力之一就是可以轻松地开始用它编写有用和有趣的东西。 无需大型集成开发环境（IDE）或第三方应用程序。 只需打开任何文本编辑器，保存文件，然后在Web浏览器中打开它即可。

JavaScript的诱惑很容易变成新手程序员的陷阱。 这种语言的可扩展性会在复杂的脚本中造成巨大的错误。 例如，丢失的局部变量声明可以通过更改全局变量来神秘地在页面上的其他地方显示自己。

输入JSLint 。 根据其网站，JSLint是“ JavaScript代码质量工具”。 它的作者Douglas Crockford因其在JavaScript（也称为ECMAScript）和JSON开发方面的工作而闻名。 JSLint通过确保遵循某些编码约定来帮助JavaScript程序员。 JSLint基于严格模式的前提，该模式在ECMAScript标准的第五版中可用。 使用严格模式，您将使代码以一组比正常情况更严格的规则运行。

使用JSLint

让我们看一下JSLint的示例用法。 我们正在编写一个简单的jQuery插件，该插件显示在msg参数中指定的带有前缀的msg 。 如果我们通过type参数传递false值，则前缀是隐藏的。

(function ($) {
    $.fn.loading = function(msg, type, cssClass){
        var prefixes = {
            warning: 'Warning: ' + msg,
            error: 'Error: ' + msg,
            info: 'Info: ' + msg,
            warning: 'Caution: ' + msg,
        };
        if (type) {
            concatMsg = prefixes[type];
        } else {
            concatMsg = msg;
        }
        $(this).each(function()  {
            var tis = $(this)
            if (msg == false) {
                tis.html('');
            } else {
                tis.html(concatMsg);
            }
        });
     }
})(jQuery);

尽管这段代码可以很好地用作jQuery的插件，但是当您在Firefox或Chrome中使用它时，您会发现其中存在一些明显的错误和一些非常微妙的错误。 让我们不用JSFint来解决问题，而是花点精力去解决问题。 将功能代码复制到JSLint网站上的文本区域，然后单击“ JSLint”按钮。 下图显示了一些最终的JSLint输出。

JSLint指出的第一个错误是"use strict"语句丢失。 该错误表明该功能未在严格模式下执行。 若要更正此错误，请通过将以下字符串文字添加到函数主体的开头来启用严格模式。

'use strict';

启用严格模式后，再次单击“ JSLint”按钮。 丢失的"use strict"的报告错误应该消失了。 现在，我们可以继续下一个错误，如下图所示。 此错误涉及空格，并且比功能更美观。 由于这不是实际错误，因此可以放心地忽略它。

您可以选择在function关键字后保留空白，并滚动到页面底部并将“ messy white space”选项切换为true ，以消除错误消息。 但是，现在，我们希望保留默认行为，因为此选项还会检查其他空白问题，我们将在以后看到。

还要注意，JSLint报告的第二个和第三个错误也位于同一行，但位置不同。 JSLint也建议在右括号和左括号之间使用一个空格，因此，请立即进行修复。

再次单击“ JSLint”按钮，我们看到下一个问题在第8行的位置39。 prefixes对象文字包含两个相同的warning属性，这显然是错误的。 让我们纠正通过更换第二次出现问题的warning与caution 。

无需再次单击“ JSLint”按钮，让我们看下一个错误，如下图所示。 对象文字包含尾随逗号。 Chrome和Firefox之类的浏览器可能会容忍此类错误，但Internet Explorer对于此类违规行为并不太友善。 要解决此问题，只需删除逗号。

接下来的两个错误表明concatMsg在定义之前已被使用。 如果在当前作用域中未定义变量，则JavaScript会检查封闭的作用域以查看是否在其他位置定义了该变量。 如果您使用的是来自第三方的代码，而该代码恰好在全局范围内定义了此确切变量，则可能要花费无数的时间来查找错误。 幸运的是，有了JSLint，我们就能解决问题。

在解决此问题的同时，我们还可以重构代码。 由于concatMsg的默认值为msg ，我们可以立即分配该值，并在需要时稍后进行更改。 现在可以如下所示重写concatMsg的代码。

var concatMsg = msg;
if (type) {
    concatMsg = prefixes[type];
}

接下来，我们会遇到与之前相同的空白问题，可以通过相同的方式进行纠正。 接下来，JSLint报告缺少分号。 此消息如下所示。 没有分号，JSLint假定该语句永远不会终止。 这就是为什么它看到if同时期待一个分号。 尽管语言规范指出结尾的分号是可选的，但最好将其包括在内。 这是草率编码可能导致大规模生产中难以发现的错误的另一个领域。 通过整理代码，我们可以快速轻松地解决此类问题。

以下错误是另一个好的错误。 JavaScript中包含相等性和严格相等性检查。 在我们的代码中，如果不指定严格相等性，则将空字符串或布尔值false指定为第一个参数时，插件的行为相同。 要更正错误，请使用严格相等运算符。

这是我们再次单击“ JSLint”按钮的好时机。 第一个错误（如下所示）在第10行报告。JSLint似乎认为，编写JavaScript的另一种最佳做法是将变量声明分组在一起。 尽管concatMsg在prefixes之后，但concatMsg还是希望将变量声明分组在单个语句中，并用逗号分隔。

下一个错误是JSLint提出的另一个修饰性建议。 乍看之下，存在比预期数量更多的空间这一事实是微不足道的。 但是，缩进问题可能导致难以在大型脚本中捕获的错误。 为了保持一致性，请通过去除多余的空间将闭合支架移回原位。

JSLint报告的下一个问题与我们之前看到的类似，但是它以不同的形式体现。 可以将JavaScript函数分配给变量。 与其他任何变量赋值一样，JSLint需要终止的分号。

最后，在最后一行报告了两个问题，如下所示。 第一个问题是建议在右括号后面放置右括号，因为它不会使您希望函数定义是闭包。 第二个问题是，在JSLint看来，变量jQuery不存在，尽管它可能已通过链接到jQuery文件而包含在网页中。 要解决此问题，请在底部文本字段中输入jQuery 。

如果再次运行JSLint，它将检测到该函数接受三个参数。 但是，在此示例中，从不使用第三个参数。 您可以在此处采用两种方法。 第一个是删除参数，因为它从未使用过。 第二个选项是将JSLint属性“未使用的参数”切换为true ，如下所示。 仅在出于某些原因确实要将参数保留在函数签名中时，才选择此选项。

使用JSLint改进我们的代码后，最终产品如下所示。

(function ($) {
    'use strict';
    $.fn.loading = function (msg, type, cssClass) {
        var prefixes = {
            warning: 'Warning: ' + msg,
            error: 'Error: ' + msg,
            info: 'Info: ' + msg,
            caution: 'Caution: ' + msg
        }, concatMsg = msg;
        if (type) {
            concatMsg = prefixes[type];
        }
        $(this).each(function () {
            var tis = $(this);
            if (msg === false) {
                tis.html('');
            } else {
                tis.html(concatMsg);
            }
        });
    };
}(jQuery));

JSLint指令

JSLint指令允许您直接在源代码中定义变量并向JSLint提供其他选项。 这使您不必重复设置JSLint GUI选项。 例如，以下示例中的注释定义了一个名为jQuery的全局变量，并将“ unparam”选项设置为true 。

/*global jQuery*/
/*jslint unparam: true */
(function ($) {
    ‘use strict’;
…
}(jQuery));

结论

在这个简短的示例中，JSLint指出了一些严重错误和一些看似微不足道的错误。 JSLint帮助我们在实际运行代码之前发现了这些问题，这对于开发人员的生产力和应用程序质量而言是非常有益的。 如果您真的想编写生产质量代码，请始终通过JSLint运行它，然后再将其推送到服务器。 JSLint甚至包含在一个JS文件中，因此您也可以离线使用它下载它！

From: https://www.sitepoint.com/using-jslint-to-refine-your-code/