使用JSLint提高JS代码质量
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式。JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现。然而,这种灵活性在带来高效的同时,也成为初学或者经验不足的 JavaScript 开发人员的噩梦。形式各异的代码风格、隐含错误的代码行为,严重影响了整体代码的可读性和稳定性,成为 Web 项目中最为常见问题之一。
因而,我们需要一个有效的 JavaScript 代码质量工具,以便能及时发现并修正 JavaScript 代码中所隐含的问题,保证代码交付质量。JSLint 作为一个灵活有效的 JavaScript 代码质量检测工具,允许使用者指定满足其特定应用开发需求的编码风格约定,使得整个项目的风格统一,这种“规则”(options)驱动的工作方式使得 JSLint 能够适用于不同的代码检测需求。本文将首先向读者介绍 JSLint 的基本概念和作用,讲解其基于规则的工作方式,而后通过一个示例阐明其基本的使用方法,最后介绍如何将 JSLint 整合到 Ant 和 Eclipse 的应用过程,以全方面展示如何将 JSLint 在日常开发任务中加以运用。
什么是 JSLint
JavaScript 作为一门年轻、语法灵活多变且对格式要求相对松散的语言,代码格式的混乱和某些语言特性的不正确使用,往往使得最终交付的产品中包含许多因编码风格约定造成的未预见的行为或错误,这种习惯性的问题如果不及时指出并修改,往往会在项目的迭代过程中不断的重现,严重影响 Web 产品的稳定性与安全性。JSLint 正是 Douglas Crockford 同学为解决此类问题创建的工具,JSLint 除了能指出这些不合理的约定,还能标出结构方面的问题。虽然 JSLint 不能保证代码逻辑一定正确,但却有助于发现错误并教会开发人员一些好的编码实践。值得一提的是 JSLint 工具本身也是一段 JavaScript 代码,它是检验 JavaScript 代码质量的 JavaScript 脚本。JSLint 对 JavaScript 脚本的质量检测主要包括以下几个方面:
- 检测语法错误:例如大括号“{}”的配对错误。
- 变量定义规范:例如未定义变量的检测。
- 代码格式规范:例如句末分号的缺失。
- 蹩脚语言特性的使用检测:如 eval 和 with 的使用限制。
JSLint 的版本更新一直处于活跃状态,截至本文撰写之时,JSLint 最新版本的发布时间为 2010-10-10。很多主流代码编辑器均对 JSLint 提供了良好的扩展支持,包括 Eclipse、VS2008 等等。
目前,与 JSLint 功能类似的 JavaScript 代码检测工具有很多,包括:YUI Test、Firebug、MS Script Debugger 、CompanionJS 等等,它们中大多数都是以浏览器插件的形式存在于客户端浏览器进行 JavaScript 运行时的检测和调试,JSLint 与这些工具的重要区别在于其更加注重静态代码格式的检测,而这也正是当前火热的敏捷开发中持续构建所需要和提倡的。
认识 JSLint 规则
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 对象获得详细的错误信息。图 1 展示了 JSLint 的整个工作过程。
图 1. JSLint 工作过程示意图
如图所示,规则集的配置方式有三种:
- 直接通过修改 JSLint.js 源码来修改默认规则。
- 在 JSLint 函数运行时,同时设置 options 参数,动态改变其规则选项(first overwrite)。此方式适用于对批量 js 文件使用同样的一组自定义规则。
- 通过在待检测的 js 文件头部添加注释类型的规则,对单个 js 文件添加适用于该文件代码的特殊规则(second overwrite)。此方式适用于对不同 js 文件设置特定的检测规则,通常用于在该文件中引入一些全局变量。
使用JSLint提高JS代码质量的更多相关文章
- 提高Objective-C代码质量心机一:简化写法
提高OC代码质量的小心机 一.OC特性 OC 为 C 语言添加了面向对象特性,是其超集; OC 使用动态绑定的消息结构,也就是,在运行时才会检查对象类型; 接收一条消息后,究竟应执行何种代码,由运行期 ...
- 提高Java代码质量的Eclipse插件之Checkstyle的使用详解
提高Java代码质量的Eclipse插件之Checkstyle的使用详解 CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发人员遵守某些编码规范的工具.它能够自动化代 ...
- 提高 Android 代码质量的4个工具
在这篇文章中,我将通过不同的自动化工具如CheckStyle,FindBugs,PMD以及Android Lint来介绍(如何)提高你的安卓代码质量.通过自动化的方式检查你的代码非常有用,尤其当你在一 ...
- 提高Java代码质量的Eclipse插件之Checkstyle的使用具体解释
CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发者遵守某些编码规范的工具.它可以自己主动化代码规范检查过程.从而使得开发者从这项重要可是枯燥的任务中解脱出来. Ch ...
- 如何使用 Set 来提高JS代码的性能
摘要: 高效使用Set! 作者:前端小智 原文:如何使用 Set 来提高代码的性能 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 我确信有很多开发人员坚持使 ...
- 如何提高JavaScript代码质量
如何编写可维护的JavaScript代码 代码风格及规范 构建检查工具 jshint配置 http://jshint.com/docs/options/ http://www.cnblogs.com/ ...
- 提高PHP代码质量的36个技巧
1.不要使用相对路径 常常会看到: require_once('../../lib/some_class.php'); 该方法有很多缺点: 它首先查找指定的php包含路径, 然后查找当前目录. 因此会 ...
- 提高C#代码质量-规范
[规范习惯]命名规范1-命名空间 使用<Company>.<Component>2-程序集不必与命名空间同名3-命名空间使用附复数4-避免与FCL的类型重名5-类型名称用名词6 ...
- 提高Java代码质量:使用枚举定义常量(转)
一.分析 常量的声明是每一个项目中不可或缺的,在Java1.5之前,我们只有两种方式的声明:类常量和接口常量.不过,在1.5版之后有了改进,即新增了一种常量声明方式,枚举常量.代码如下: enum ...
随机推荐
- 【面试必备】javascript操作DOM元素
前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
- JavaScript思维导图—数据类型
JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/
- [每日电路图] 7、设计一个PCB的流程及细节·总结——给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章
前言 最近两天使用AD14软件设计了一个蓝牙防丢器电路板(PCB)图纸,中间有一些细节在本文中记录下,方便下次设计PCB时参考.也希望能给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章 ...
- Gradle与Gatling脚本集成
Gatling作为次时代的性能测试工具,由于其API简洁明了.性能出众,越来越受欢迎.但是运行Gatling脚本却有诸多不便,其提供的默认方式不是很方便.考虑到Gatling脚本本质上是Scala类, ...
- 翻译:AKKA笔记 - Actor消息 -1(二)
消息 我们只是让QuoteRequest到ActorRef去但是我们根本没见过消息类! 它是这样的: (一个最佳实践是把你的消息类包装在一个完整的对象里以利于更好的组织) TeacherProtoco ...
- git 仓库、分支的区别
首先,要明白仓库的概念 仓库可以理解为repository, 就是存放代码的地方,—— 其实是一个比较笼统的概念,不管里面的内容,总之存放各种资源(代码.图片等等) 对于git应用开发者而已,本地一般 ...
- C-Lodop 非典型应用
Lodop是什么? 有人说她是报表打印工具,因为那个add_print_table语句把报表统计的那点事弄了个明明白白: 有人说她是条码打印工具,因为用了她再也不用后台生成条码图片了,前端一行指令就动 ...
- JS动态设置css的几种方式
1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element. ...
- JS的脚本语言
js的脚本语言全程javascript在网页里面使用的脚本语言:分类:1.嵌入网页里面2.在外部脚本标签可以写在网页的任何地方,但一般都写在网页的底部:<script type="te ...
- mysql-5.7.17-winx64免安装版,win10环境下安装配置
下载地址:http://dev.mysql.com/downloads/file/?id=467269 1.解压到自定义目录:我解压到了D盘的根目录 2.复制my-default.ini 重命名 my ...