jquery隐藏简单的javascript错误 [英] jquery hides simple javascript errors

问题描述

我在Chrome和Firefox中使用jQuery和flot。
当我处理我的代码时，我发现执行静默地失败，愚蠢的东西，如访问不存在的哈希结构等。

感觉就像那里有一些尝试{} catch {}逻辑在jQuery中，使我没有看到任何错误。

任何指针，如何绕过这个没有毯子黑客n斜杠孤立一个简单的错误是什么？

jshint没有太多的帮助。

- 编辑 -

更多的调试显示了一个趋势。

我基本上发现打字错误（未定义的变量）和过早提取对象属性存在之前。使用.hasOwnProperty（）已经帮助但很麻烦。我想我看到一个方便的实用程序，以帮助简洁地测试深层结构。

解决方案

.length 是调试jQuery时的朋友。因为即使：

  document.getElementById（'notxistent'）; 
  

将在JavaScript中返回 null jQuery选择器将返回一个对象并转换 true ：

  if（！ document.getElementById（'notxistent'））{
 alert（'not here！'）; 
} 
 
 if（！$（'＃nonexistent'））{
 alert（'here，here！'）; 
} 
  

这意味着：

  $（'＃nonexistent'）。doSomething（）。doSomethingElse（）。whatever（）; 
  

可能不抛出错误，所以你很难知道

但是，检查对象长度是否有效：

  if（！$（'＃notxistent'）。length）{
 alert（'not here！'）; 
} 
  

jQuery设计为默默失败，因为其中一个核心用例是链接。如果选择器或原型方法在链中返回null或false，那么使用jQuery会比大多数没有经验的程序员想要的更频繁地抛出空引用错误。

更新

如果处于调试模式，您可以通过修改原型进行自己的调试。我试过这个：

  var debug = ['hide'，'show']，//数组jQuery调试方法b $ bi = 0，name; （; debug [i]; i ++）
 
 {
 name = debug [i]; 
 if（typeof $ .fn [name] =='function'）{
 $ .fn [name] =（function（name，fn）{
 return function（）{
 if（！this.length）{
 console.warn（'在调用'+名称时没有选择元素）; 
} 
 fn.apply（this，Array.prototype.slice。 call（arguments））; 
}; 
}（name，$ .fn [name]））; 
} 
} 
  

现在，每当我叫隐藏，它会警告我，如果链中没有元素：

  $（'＃nonexistent'）hide（）; //控制台一个警告
  

小提琴： http://jsfiddle.net/B4XQx/

I'm using jQuery and flot in chrome and firefox. As I work on my code, I find that execution silently fails on stupid stuff like accessing non-existent hash structures and the like.

It feels like there is some try {} catch {} logic within jQuery that keeps me from seeing any errors.

Any pointers on how to get around this without blanket hack-n-slash to isolate where a simple bug is?

jshint hasn't been too helpful.

--edit--

more debugging shows a trend.

I'm basically finding typos (undefined variables) and premature fetching of object properties before they exist. Using .hasOwnProperty() has helped but is cumbersome. I think I saw a handy utility someplace to help test deep structures succinctly.

解决方案

.length is your friend when debugging jQuery. Because even if:

document.getElementById('nonexistent');

will return null in JavaScript, using a jQuery selector will return an object and cast true:

if(!document.getElementById('nonexistent')) {
    alert('not here!');
}

if(!$('#nonexistent')) {
    alert('here, here!');
}

Which means that:

$('#nonexistent').doSomething().doSomethingElse().whatever();

Will probably not throw errors, so you will have a hard time knowing what "didn’t work" in the chain.

However, checking the object length works:

if(!$('#nonexistent').length) {
    alert('not here!');
}

jQuery is designed to fail silently, since one of it’s core use cases is chaining. And if selectors or prototype methods would return null or false in the chain, using jQuery would throw null-reference errors more often than most inexperienced programmers would want.

Update

You can probably do your own debugging by modifying the prototypes if in debug mode. I tried this:

var debug = ['hide','show'], // Array of jQuery methods to debug
    i = 0, name;

for(; debug[i]; i++) {
    name = debug[i];
    if (typeof $.fn[name] == 'function') {
        $.fn[name] = (function(name, fn) {
            return function() {
                if ( !this.length ) {
                    console.warn('No elements selected when calling '+name);
                }
                fn.apply(this, Array.prototype.slice.call( arguments ));
            };
        }(name, $.fn[name]));
    }
}

Now, whenever I call 'hide', it will warn me if there are no elements in the chain:

$('#nonexistent').hide();  // consoles a warning

Fiddle: http://jsfiddle.net/B4XQx/

这篇关于jquery隐藏简单的javascript错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！