使用JSLint提高JS代码质量方法分享


Posted in Javascript onDecember 16, 2013

随着富 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代码质量方法分享

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

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

Javascript 相关文章推荐
js类式继承的具体实现方法
Dec 31 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
VUE安装使用教程详解
Jun 03 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
微信小程序实现签字功能
Dec 23 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
利用js动态添加删除table行的示例代码
Dec 16 #Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php mysql索引问题
2008/06/07 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
vue内置指令详解
2018/04/03 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
门卫岗位职责
2013/11/15 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
统计学教授推荐信
2014/09/18 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2014年共青团工作总结
2014/12/10 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
诉讼和解协议书
2016/03/23 职场文书