由于移动应用的盛行和HTML的广泛运用JavaScript正越来越流行JavaScript受欢迎的部分原因是因为它的灵活便捷你可以快速上手它不需要重量级的开发环境也不需要第三方应用支持只要你打开一个文本编辑器然后保存最后通过网页浏览器运行即可
但是对于新手而言使用JavaScript处处存在陷阱在一段复杂的脚本中JavaScript语言的延展性常常引起怪异的bug例如未声明的局部变量可能会不知不觉修改全局变量
现在打开JSLint网站正如其网站所言它是JavaScript代码质量工具JSLint的作者是Douglas Crockford因其对JavaScript（ECMAScript）和JSON的贡献而着名
JSLint帮助JavaScript程序员在编程过程中遵循一定的编码规范JSLint是以基于严格模式（Strict Mode）为前提参考第版ECMAScript标准与一般模式相比严格模式下你的代码需要按照更严格的规则运行
使用JSLint
我们来用JSLint运行一个示例写一个简单的jQuery插件通过prefix显示msg接收的信息如果传给type的值为false则不显示prefix
（function （$） {
$fnloading = 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） {
l（）
} else {
l（concatMsg）
}
}）
} }）（jQuery）
尽管这段代码作为jQuery的插件运行还算正常但当你用Firefox或Chrome运行时会发现有几处明显的错误以及一些不易察觉的问题与其耗费脑力解决这些问题不如通过JSLint来帮助我们将上面这段代码拷贝至JSLint网站的文本框内然后点击JSLint按钮代码建议和错误提示会出现在下方
JSLint指出的第一个错误是丢失use strict声明这个错误表示该函数未在严格模式下执行为纠正该错误我们在函数主体的头部添加use strict语句以启动严格模式
use strict;
加入严格模式声明语句后再次点击JSLint按钮提示丢失use strict的错误信息将消失现在我们可以继续看下一个错误接下来的这个错误是关于空格的问题鑒于它不能算个真正的错误我们可以放心地忽略它
你可以将页面最下方的messy white space选项改为true这样你就可以保留function关键字后不留空格的写法但是现在我们保留messy white space选项的default属性因为这个功能也会帮助我们检查其他空格问题这个我们之后再说
同样需要注意的是虽然JSLint指出的第二个和第三个错误指向同一行代码但错误点并不一样后者JSLint建议在右括号）和左大括号{之间空一格现在我们纠正下这个错误
插入空格后再次点击JSLint按钮下一个错误出现在第行第个字符处prefixes对象包含了两个一模一样的warning属性将第二个warning修改为caution
这次就不再点击JSLint按钮直接看下一个错误吧定义对象的代码块的最后多了一个逗号像这类错误Chrome和Firefox这些浏览器也许会忽略但IE就不会那么友好了所以我们把这个逗号移除掉
之后的两个错误指向未定义的变量concatMsg如果一个变量在当前作用域中没有被定义JavaScript就会全局查找看是否有在别处定义过若这时你还引入了外部代码并碰巧在全局中定义过该变量那么一旦出错你很有可能要抓破头皮费尽心力地寻找bug原因所幸有了JSLint我们可以将这类错误扼杀在摇篮中
现在纠正这个错误并重构代码因为concatMsg的默认值为msg所以我们可以将msg先赋给它待需要时再修改如下所示关于concatMsg的代码为
var concatMsg = msg;
if （type） {
concatMsg = prefixes[type];
}
继续往下有一个与之前类似的空格问题纠正它紧接着JSLint指出丢失了一个分号（如下图所示）JSLint会假设没有分号结尾的命令行永远不会被终止所以当下面出现if时JSLint认为这里应该有个分号尽管根据语言规范结束的分号可有可无但是加上它是一个良好的习惯因为这类不良代码在大项目协作中很容易引起莫名的bug所以平常编码过程中应顺手避免此类问题
接下来又是一个很好的错误例子JavaScript中有相等（==）和严格的相等（===）比较在这段案例代码中如果不采用严格相等比较那么不管msg为空字符串还是false值if内都为true所以这里我们采用严格相等比较
好了让我们再次点击JSLint按钮吧如下图所示错误出现在第行JSLint认为合并变量声明也是一个良好的编码规范尽管concatMsg变量的声明紧随prefixes之后但JSLint认为用逗号隔开在一个命令语句中完成变量声明更好
下一个错误则又是关于格式的问题咋一看不就是多空了一格嘛实在是太鸡毛蒜皮了但是如果在大量的脚本中这种缩进问题搞不好也会引起难以发现的bug所以为了代码的统一性我们还是往前移一格吧
下一个问题又和之前遇到的类似但形式不一样JavaScript的函数也可归属为变量所以和其他变量赋值语句一样JSLint希望在末尾加个分号
最后如下所示有两个错误出现在最后一行第一个问题JSLint建议将闭括号移至jQuery之后因为这样不会使闭包函数定义产生歧义第二个问题JSLint认为jQuery变量不存在但事实上你可能在实际页面中已引入了jQuery文件所以我们可以在页面最下面的文本框内输入 jQuery来解决这个问题（译者JSLint Directive上面的文本框）
再次运行JSLint它提示该函数需要接收三个参数但是在本示例中我们从未使用过第三个参数因此此处我们有两种方法解决这个问题第一种删除第三个参数第二种将下方的unused parameters项改为true如果你确实是因为某些原因需要保留这个参数则用第二种方法
好了用JSLint改进后的代码如下所示
（function （$） {
use strict;
$fnloading = 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） {
l（）
} else {
l（concatMsg）
}
}）
};
}（jQuery））
JSLint 指令
你可以通过JSLint指令在你的源代码中直接定义JSLint变量这样你就不用在页面上来回操作如下示例注释中定义了jQuery全局变量并将unparam设为true
/*global jQuery*/ /*jslint unparam: true */ （function （$） {
use strict;
…
}（jQuery））
总结
在这个简短的例子中JSLint指出了一些明显的和一些容易忽视的错误在实际运行代码之前通过JSLint帮我们查找一些错误可以有效的提高我们的开发效率和代码质量如果你真的是认真地想写出优质的代码那么在放到服务器上运行之前先用JSLint检查一遍吧JSLint还提供一个独立的 JS文件版本所以你也可以把它下载下来在线下运行！
