2010-06-15 20 views
6

Czy istnieje dobra praktyka, aby uniknąć błędu w kodzie jQuery?Wzorce do uniknięcia cichej awarii jQuery

Na przykład:

$('.this #is:my(complexSelector)').doSomething(); 

wiem, że za każdym razem ta linia zostanie wykonany, selektor ma dopasować co najmniej jeden element, lub pewną ilość elementów. Czy istnieje jakiś standardowy lub dobry sposób, aby to sprawdzić?

myślałem o czymś takim:

var $matchedElements = $('.this #is:my(complexSelector)'); 
if ($matchedElements.length < 1) 
    throw 'No matched elements'; 
$matchedElements.doSomething(); 

Także myślę, testowanie jednostkowe byłaby ważna opcja zamiast bawić kod.

Moje pytanie może być głupie, ale zastanawiam się, czy istnieje lepsza opcja niż rzeczy, które obecnie robię, czy nie. Być może jestem w złym kierunku, sprawdzając, czy jakikolwiek element pasuje do mojego selektora. Jednak w miarę powiększania się strony selektory mogą przestać pasować do niektórych elementów, a niektóre funkcje mogą przestać działać nieumyślnie.

Odpowiedz

6

można napisać plugin:

jQuery.fn.requireElements = function (amount, exactMatch) { 
    if (amount === undefined) { 
     amount = 1; 
    }; 

    if (this.length < amount || this.length > amount && exactMatch) { 
     throw new Error(this.length " elements instead of " (exactMatch ? "at least " : "") + amount); 
    }; 

    return this; 
}; 

wówczas:

$('yourSelector').requireElements(2).bind('click', function() { 

}); 
6

To niekoniecznie źle, gdy selektor pasuje do niczego; to zależy od twojej aplikacji. Można napisać własną validateNonEmpty wtyczki:

jQuery.fn.validateNonEmpty = function() { 
    if (this.length == 0) 
    throw "Empty list detected - selector: " + this.selector; 
    return this; // thanks @Matt 
}; 

Następnie można zrobić:

$('something something').validateNonEmpty().doSomething(); 

Należy również pamiętać, że chcesz sprawdzić, czy długość wynosi 0, nie mniej niż 0.

+0

o tak dzięki @Matt !! – Pointy

2

Polecam używanie jQuery lint.

np

$(function(){ 
    var foo = $('.this #is:my(complexSelector)'); 
}); 

skarżą się, że masz zarówno nieprawidłową selektor (jak podano selektor przykładem jest fakt, nieważne, chociaż zakładam, że wiesz :)) i że nie ma elementów, gdzie w rzeczywistości znajdując .

Zobacz przykład http://js.azatoth.net/test/lint.html.

+0

haha ​​Właśnie chciałem dać niedorzeczny selektor przykład, Dzięki! – Matias