有没有一种好的方法来验证jQuery代码？

Question

我是一个彻头彻尾的jQuery初学者，我有一些拼凑出来的jQuery代码，但是当页面加载时，我不断收到错误信息。问题在于我不确定我是否正确地关闭了所有花括号和括号，真的非常希望再有一双眼睛来看看这个：

$(document).ready(function() {
    $('#slideshow').cycle({
        fx:  'scrollLeft', 
        timeout: 8000
    });
});
    $('#freeQuote form')
       .validate({
         submitHandler: function(form) {
           $(form).ajaxSubmit({
                success: function() {
                var Image = $('<img />').attr({src:'_images/free-quote-confirm.png', width:231, height:267, alt:"Success"});
                    $('#freeQuote form').hide();
                    $('#freeQuote').append(Image)
                }
           });
         }
       }); 

  $('#news-signup form')
    .validate({
     submitHandler: function(form) {
       $(form).ajaxSubmit({
            success: function() {
            var Image = $('<img />').attr({src:'_images/register-thanks.png', width:332, height:35, alt:"Success"});
                $('#news-signup form').hide();
                $('#news-signup').append(Image)
            }
       });
     }
  }); 

我将这段代码从它自己的.js文件中加载。

谢谢。

- forrest

Answer 1

是的，在 Chrome 中加载页面，按 Ctrl-Shift-J 打开 JavaScript 控制台。这将立即突出显示任何语法错误。

或者在 Firefox 中获取 Firebug。

至于你的代码，如果你不知道自己在做什么，我认为你应该从小处开始。先让 cycle() 函数起作用，然后尝试其中一个验证，再尝试另一个。一次只让一小部分工作，并且每次添加新内容时，请尝试查看它是否有效，或者是否会生成错误。

一旦你到达那个阶段，请遵循 Robert 的建议并通过 JSLint 运行它。这将向您展示您正在做错哪些事情，例如在语句末尾缺少分号。

- Skilldrick

---

或者获取 FirebugLite，它可以在IE6+，Firefox，Opera，Safari和Chrome上运行。 - Oded

好建议。我解决了。感谢您的流程建议。 - forrest

Answer 2

是的，http://www.jslint.com/

您的代码返回以下错误：

错误：

第14行第50个字符有问题： 缺少分号。

$('#freeQuote').append(Image)

第27行第48个字符有问题： 缺少分号。

$('#news-signup').append(Image)

隐含全局变量：$ 1,2,7,10,12,13,14,20,23,25,26,27, document 1

JSLint不喜欢我做的任何事情 :P

- Robert Greiner

---

我认为对于新手而言，使用 JSLint 会产生过多的错误提示。这并不是说它不是一个非常有用的工具，但如果你不知道自己在寻找什么，就会有很多相对的“噪音”。 - Skilldrick

@Skilldrick 我同意这可能有点令人不知所措，但从错误中学习没有比这更好的方法了。 - Robert Greiner

学习从错误中吸取教训是一回事，而不知道正确方法则完全是另一个问题。JSLint 可以显示出我的问题，但它并不教我如何纠正它们！ - forrest

@fmz，当然，这就是jQuery教程（http://docs.jquery.com/Tutorials）的好处所在。 - Robert Greiner

Answer 3

一个好的方法来验证像括号或花括号嵌套这样的简单事情，是使用像Notepad++或Eclipse这样的编辑器。

- Mike G

Answer 4

使用任何强大的JS编辑器。
我尝试过Aptana、PHPStorm，至少PHPStorm在JS代码出现问题时（包括jQuery），会显示非常好的提示。

- Alex

Answer 5

http://www.jslint.com/

你在两个地方缺少了分号：$('#freeQuote').append(Image) 和 $('#news-signup').append(Image)

- 0x1F602

Answer 6

即使对于jQuery，也不使用特定于浏览器的插件，我更喜欢JSHint：

- Alex Tape

Answer 7

很多好的想法已经被提出来了...只有一件事情需要补充。使用QUnit或类似的JavaScript单元测试工具来运行单元测试，实际上对你的代码进行测试。没有比定义什么是“正确”的，然后运行它并验证它是否“正确”更好的方法了。

QUnit是JQuery作者用来确保JQuery正常工作的工具。这里是一个入门链接。

- Charlie Flowers

Answer 8

以下行应该将其他所有内容包含起来：

$(document).ready(function() {
    //  ...
    //  everything else
    //  ...
});

此外，该语句的简短形式（也是推荐使用的）为：

jQuery(function($) {
    //  ...
    //  everything else
    //  ...
});

- yfeldblum