您现在的位置： 365建站网 > 365文章 > 企业Web2.0项目开发必备 - http://code.google.com/p/jslint-toolkit/

企业Web2.0项目开发必备 - http://code.google.com/p/jslint-toolkit/

文章来源：365jz.com     点击数：615    更新时间：2009-09-28 09:21   参与评论

引子
现在很多企业都上马了Web2.0项目，而Web2.0的一个重要特征就是AJAX交互。那么如何在企业Web2.0项目中对大量JavaScript脚本进行质量控制，是很多人头疼的问题。
著名的JSON数据交互格式的发明人Douglas Crockford在很久以前就开始关注这个问题，并给出了相应的解决方案 - JSLint，通过对JavaScript代码进行规范来减少BUG的数量。

但是JSLint一次只能对一个JavaScript文件进行验证，虽然Visual Studio, Aptana, Eclipse等著名的开发工具都有相应的JSLint的插件，但这些插件也仅限于个人使用。
如果能够对一个项目中的所有JavaScript文件进行验证，并给出直观的验证报告，将对项目中JavaScript的代码质量起到直观重要的作用。

JSLint-Toolkit闪亮登场
我最近开源了一个项目JSLint-Toolkit，可以方便的解决这个问题的。

为了让大家有个直观的感受，我们先介绍一下JSLint-Toolkit的使用方法：
  • 修改config.json 
    </>code
    1.         {
    2.     // JavaScript files to check
    3.     "includes": ["scripts\\source", "scripts\\jquery-1.3.2.js"],
    4.     // Exclude files
    5.     "excludes": [],
    6.     // Exclude file names
    7.     "excludeNames": ["CVS"],
    8.     // Output directory
    9.     "outPath": "out"
    10.     }
    11.

    这个配置文件的意思：对scripts\\source目录下的所有文件以及scripts\\jquery-1.3.2.js进行验证，忽略名称为CVS的文件夹或者文件，把结束输出到当前目录下的out子目录。
  • 双击run.bat运行：
  • 打开out子目录的index.htm文件： 

很简单吧。

对验证结果进行分类
有时会有很多错误（注意：这里的错误指的是JSLint的验证结果，是不合规范的地方，你可以在这里找到JSLint所使用的规范），
我们对错误进行了分级，这样有助于我们发现最严重的错误信息。

简单的把JSLint错误分为两类：Critical errors 和 Optional errors。
目前被划分到Critical Errors的有以下一些，我添加了简单的例子：
  • Missing semicolon.
    </>code
    1.     // BAD
    2.     var appDiscuss = {
    3.     cred: "",
    4.     baseURL: "/mashup/webclient/community/discussion/"
    5.     }
    6.     // GOOD
    7.     var appDiscuss = {
    8.     cred: "",
    9.     baseURL: "/mashup/webclient/community/discussion/"
    10.     };
    11.
  • '{a}' is already defined. 
    </>code
    1.     // 'title' is already defined.
    2.     // BAD
    3.     $.extend({
    4.     confirm: function(info, call, title){
    5.     var title = (title)? title : 'System';
    6.     // ...
    7.     }
    8.     };
    9.     // GOOD
    10.     $.extend({
    11.     confirm: function(info, call, title){
    12.     title = title || 'System';
    13.     // ...
    14.     }
    15.     };
    16.
  • Expected '{a}' and instead saw '{b}'. 
    </>code
    1.     // Expected '{' and instead saw 'return'.
    2.     // BAD
    3.     if ($(this).attr('class')) return;
    4.     // GOOD
    5.     if ($(this).attr('class')) {
    6.     return;
    7.     }
    8.
  • Extra comma. 
    </>code
    1.     // BAD
    2.     var data = {
    3.     name: "zhangsan",
    4.     sex: "man",
    5.     };
    6.     // GOOD
    7.     var data = {
    8.     name: "zhangsan",
    9.     sex: "man"
    10.     };
    11.
  • Bad for in variable '{a}'. 
    </>code
    1.     // Bad for in variable 'prop'.
    2.     // BAD
    3.     for (prop in headers) {
    4.     }
    5.     // GOOD
    6.     for (var prop in headers) {
    7.     }
    8.
  • Unnecessary semicolon. 
    </>code
    1.     // BAD
    2.     function validate() {
    3.     };
    4.     // GOOD
    5.     function validate() {
    6.     }
    7.
  • Bad line breaking before '{a}'. 
    </>code
    1.     // Bad line breaking before '+'.
    2.     // BAD
    3.     var frame = '<div class="contentPane">'
    4.     + '<div class="comments_show_hide panel_action">'
    5.     + '</div></div>';
    6.     // GOOD
    7.     var frame = '<div class="contentPane">' +
    8.     '<div class="comments_show_hide panel_action">' +
    9.     '</div></div>';
    10.
  • Missing radix parameter. 
    </>code
    1.     // BAD
    2.     var val = parseInt("10,000".replace(/,/g, ""));
    3.     // GOOD
    4.     var val = parseInt("10,000".replace(/,/g, ""), 10);
    5.
  • '{a}' was used before it was defined. 
    </>code
    1.     // 'plus' was used before it was defined.
    2.     // BAD
    3.     function add(a, b) {
    4.     return plus(a) + b;
    5.     function plus(a) {
    6.     return a + 1;
    7.     }
    8.     }
    9.     // GOOD
    10.     function add(a, b) {
    11.     function plus(a) {
    12.     return a + 1;
    13.     }
    14.     return plus(a) + b;
    15.     }
    16.


更详细的介绍可以从 http://code.google.com/p/jslint-toolkit/ 下载JSLint-Toolkit，在jslint-toolkit-rhino\doc\lint_msg.htm 中找到。


JSLint-Toolkit中使用的技术
JSLint-Toolkit使用了两项关键开源技术：JSLint 和 Rhino。
以下是一个详细的列表：
  • Rhino
    Rhino (JavaScript in Java) is open source and licensed by Mozilla under the MPL 1.1 or later/GPL 2.0 or later licenses, the text of which is available at http://www.mozilla.org/MPL/
    You can obtain the source code for Rhino from the Mozilla web site at http://www.mozilla.org/rhino/download.html
  • JSLint
    JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. http://www.jslint.com/
    We use the rhino version of JSLint, You can obtain the source code here: http://www.jslint.com/rhino/index.html
  • Qooxdoo
    Qooxdoo is a comprehensive and innovative Ajax application framework. No HTML, CSS nor DOM knowledge is needed. It is open source under an LGPL/EPL dual license.
    http://qooxdoo.org/
  • SyntaxHighlighter
    SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.
    http://alexgorbatchev.com/wiki/SyntaxHighlighter
  • jQuery
    jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
    http://jquery.com/


你还在等什么，试下呗......

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (615人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号