前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Html或JS语法检测之JSLint工具

Html或JS语法检测之JSLint工具

作者头像
非著名程序员
发布2018-02-01 16:02:43
3.9K0
发布2018-02-01 16:02:43
举报
文章被收录于专栏:非著名程序员非著名程序员

1、介绍

JSLint是一个JavaScript验证工具(非开源), 可以扫描JavaScript源代码来查找问题。如果JSLint发现一 个问题,JSLint就会显示描述这个问题的消息,并指出错误在源代码中的大致位置。有些编码风格约定可能导致未预见的行为或错误,JSLint除了能指 出这些不合理的约定,还能标志出结构方面的问题。尽管JSLint不能保证逻辑一定正确,但确实有助于发现错误,这些错误很可能导致浏览器的 JavaScript引擎抛出错误。

2、规则

JSLint 执行代码质量检测的原理核心在于用户设定的规则集。JSLint 默认提供的规则集包含了 Web 开发人员多年积累下来的认为不好的开发风格,我们可以根据自己项目的需求选择构建一套特定的规则。JSLint 将根据它进行对 JavaScript 脚本的扫描工作,并给出相应的问题描述信息。规则的形式体现为多组键值对:[param:option],以规则名做键,对规则调用与否做值。例如规 则:“plusplus:true”是不允许 ++ 和 -- 运算符的出现,“undef:true”是不允许使用未定义的变量。

由于 JSLint 工具本质上是一个普通的 JS 脚本,其运行也自然依赖于一个 JS 运行引擎,其被引擎加载后会在内存中产生一个全局 JSLint 函数对象,该函数对象需要两个输入量:source 和 options,前者用来指定待检测的脚本文件被解析后生成的字符串或字符串数组,后者则表示用户自定义的规则选项。若 options 为空,JSLint 则使用其默认的规则对 source 进行扫描检测。

整个检测过程就是对脚本中所含 JSLINT (source, options) 函数的一次执行过程。当指定的 source 脚本在 options 条件下检测通过,则 JSLint 返回 true,否则返回 false,而这时则可以通过 JSLINT.errors 对象获得详细的错误信息。

3、过程

如图所示,规则集的配置方式有三种:

直 接通过修改 JSLint.js 源码来修改默认规则。在 JSLint 函数运行时,同时设置 options 参数,动态改变其规则选项(first overwrite)。此方式适用于对批量 js 文件使用同样的一组自定义规则。通过在待检测的 js 文件头部添加注释类型的规则,对单个 js 文件添加适用于该文件代码的特殊规则(second overwrite)。此方式适用于对不同 js 文件设置特定的检测规则,通常用于在该文件中引入一些全局变量。

下面通过使用 JSLint 并结合不同规则,来对 JSLint 规则的适用范围和使用方法做一具体介绍。清单 1 是一段基于 dojo 的 JavaScript 代码。

4、使用

最 简单直接的使用 JSLint 的方式是下载 Rhino,以命令行方式直接对特定 JavaScript 脚本进行语法检查。Rhino 是 Mozilla 提供的纯 Java 实现的开源 JavaScript 引擎,可在 java 环境中为 JavaScript 提供运行环境。读者可以在 下载 Rhino。

整个过程可以分为如下几个步骤:

确定自定义规则集:这里只使用一个 var 定义所有的变量、不允许使用 ++/-- 运算符、不允许使用 == 运算符,形成的 options:{onevar:true, plusplus:true, eqeqeq=true}。解压 rhino 压缩包,里面包含了 rhino(js.jar) 和 jslint(jslint.js),我们将 js.jar 添加的操作系统的 classpath 里,方便随处执行;并将 jslint.js 和 test.js 放在一起(当然也可以不放在一起,之后执行的时候键入不同的路径即可)。添加 options 到 JSLint:我们可以选择修改 JSLint 源码或是在待检测的 JavaScript 文件头部添加注释型规则。JSLint.js 源码片段如图 2 所示,在 536 行 if 语句之后:!JSLINT(input, {[options]}) 是 JSLint 的执行方法,我们的 options 就放在红色方框所在位置;如果要在待测文件头部添加注释类型规则,更加简单,将如下格式的注释添加到待检测 JavaScript 脚本文件顶部即可: /*jslint onevar:true, plusplus:true, eqeqeq=true */

需要指出的是,rhino 包里面提供的 jslint.js 并非原始的 jslint,而是修改过的压缩版本,它在文件最后添加了用于修改 options 的 JavaScript 代码,这也正是我们添加自定义规则的切入点。

> 打开 DOS 命令行,键入如下命令(将 JSLlint.js 和 test.js 放到当前命令行路径下),可以看到如图 5 所示的检测结果。

>java org.mozilla.javascript.tools.shell.Main jslint.js test.js

本文参与?腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2015-02-07,如有侵权请联系?cloudcommunity@tencent.com 删除

本文分享自 非著名程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com