使用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面向对象编程 for Cookie
Sep 19 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python不同版本的_new_不同点总结
2020/12/09 Python
python实现发送邮件
2021/03/02 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
同事吵架检讨书
2014/02/05 职场文书
药品促销活动方案
2014/02/14 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
人力资源求职信
2014/05/25 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
房屋产权证明书
2014/10/15 职场文书
2014年底个人工作总结
2015/03/10 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
python中取整数的几种方法
2021/11/07 Python