Sprawdzanie javascript jeśli istnieje element DOM najlepsza praktyka

Question

Co to jest najlepsza praktyka, aby sprawdzić, czy element DOM istnieje w javascript?

Czy należy sprawdzić, czy dany element istnieje przed jego użyciem?

if ($("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "").size() != 0) { 
    var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
} 

Czy to nie dwukrotnie wykonałoby packageId.removeSpecialChars().toUpperCase()?

Czy byłaby to lepsza opcja?

var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
if (row) 
{ 
    // do something 
} 

Jednak, czy nie wyrzuciłoby wyjątku, gdyby go nie znaleziono?

Answer 1

Kiedy jesteś rzeczywiście pracuje z elementów DOM, to tak, należy sprawdzić, czy istnieje zanim spróbujesz z nim pracować, aby uniknąć błędów JavaScript. Jednak jesteś nie pracy z elementami DOM, pracujesz z obiektem jQuery, który (potencjalnie) zawiera elementy DOM.

Funkcje jQuery obsługują już przypadki, w których nie ma dopasowań w swoim zestawie elementów, więc nie trzeba jawnie sprawdzać, czy istnieją elementy przed próbą pracy z nimi. Trzeba to zrobić tylko, jeśli próbujesz bezpośrednio odwoływać się do elementów DOM z wnętrza tego zestawu, korzystając z funkcji .get() lub notacji nawias kwadratowych [index].

Tak na marginesie, to funkcja .size() jQuery została zaniechana w wersji 1.8, należy użyć obiektu jQuery length się bezpośrednio do sprawdzenia, czy istnieją elementy, więc:

var $object = $('a-selector'); 
if($object.length) { 
    // there's at least one matching element 
} 

Answer 2

Ogólne konwencje programowania mówią nie powtarzaj się. Tak więc, w tym przypadku, można przynajmniej zrobić stwierdzenia rzeczy tylko raz i zachować zmiennej odniesienia:

var thing = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 

Następnie Lookup wybór nie zdarza dwukrotnie zbędny metoda nazywa usunięte itp Ma to również korzyść z umożliwienia ci napisania bardziej zrozumiałego kodu, kiedy możesz nazwać zmienną na coś znaczącego, innego niż thing, lub, eeek!, a (choć niekoniecznie jest tak, że kod musi być bardziej sensowne, ludzie jeszcze używać nazw takich jak a!)

if (thing != null) { } 
if (thing.size() != 0) { 

} 
etc. 

chodzi o wywoływanie metod wiele razy, że często nieuniknione.

Answer 3

Czyni, czego potrzebujesz to:

var a = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
if (a.size()) { 
    var row = a; 
} 

Answer 4

Lepiej go cache:

var machId = $("#" + machineId + packageId.removeSpecialChars().toUpperCase()); 
if (machId.size() != 0) { 
    var row = machId; 
} 

Answer 5

Zasadniczo trzeba sprawdzić, czy DOM istnieje w twoim kodzie HTML, ale pamiętaj o tym, że jQuery nie zgłasza błędu krytycznego, jeśli element nie istnieje w twoim DOM, ale byłby to dobry sposób sprawdzenia, dodaje jeszcze jedną bezpieczną warstwę do kodu, coś o nazwie .size() wycofane z wersji 1.8, więc nie zaleca się używania nawet starej wersji jQuery, więc najlepszym rozwiązaniem w tej chwili byłoby coś w rodzaju poniższego kodu:

if($('.class').length) { // check if any element with this class exist, if not exist, it return 0 and can not pass the if estatement 
    // do something 
}