JavaScript (JS) to wszechobecny, elastyczny i bardzo popularny język programowania — choć jest również podatny na błędy i błędy, które powodują, że większość programistów marszczy brwi i wariuje.
JS jest szeroko stosowany do wspierania interaktywności użytkownika po stronie klienta większości aplikacji internetowych. Bez JavaScript być może rzeczy w sieci byłyby martwe i nie stymulujące. Niemniej jednak przypływy i odpływy języka czasami sprawiają, że programiści mają z nim związek miłości i nienawiści.
Błędy JavaScript powodują, że aplikacje generują nieoczekiwane wyniki i szkodzą użytkownikowi. Badanie przeprowadzone przez University of British Columbia (UBC) miało na celu poznanie pierwotnych przyczyn i wpływu błędów i błędów JavaScript. Wyniki badania ujawniły pewne typowe wzorce, które pogarszają wydajność programów JS.
Oto wykres kołowy pokazujący, co odkryli naukowcy:
W tym poście na blogu zilustrujemy niektóre z typowych przyczyn błędów JavaScript wskazanych w badaniu (oraz inne, z którymi spotykamy się codziennie) oraz sposoby zmniejszenia podatności aplikacji na awarie.
Spis treści:
związane z DOMem
Document Object Model (DOM) odgrywa istotną rolę w interaktywności stron internetowych. Interfejs DOM umożliwia manipulowanie treścią, stylem i strukturą strony internetowej. Uczynienie zwykłych stron internetowych HTML interaktywnymi — lub manipulowanie DOM — to właśnie powód, dla którego wypuszczono język programowania JavaScript.
Tak więc, nawet po wprowadzeniu backendowych technologii JavaScript, takich jak Node.js, praca z DOM nadal stanowi dużą część tego, co robi ten język. Dlatego DOM jest znaczącą drogą do wprowadzania błędów i błędów w aplikacjach JavaScript.
Nie jest niespodzianką, że badanie raportu o błędach JavaScript wykazało, że problemy związane z DOM są odpowiedzialne za większość błędów (68%).
Na przykład niektórzy programiści JavaScript często popełniają błąd odwołując się do elementu DOM przed jego załadowaniem, co prowadzi do błędów w kodzie.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Jeśli powyższy kod zostanie uruchomiony w przeglądarce Chrome, zgłosi błąd, który można zobaczyć w konsoli programisty:
Błąd jest zgłaszany, ponieważ kod JavaScript jest zwykle wykonywany zgodnie z kolejnością, w jakiej pojawia się w dokumencie. W związku z tym przeglądarka nie jest świadoma przywoływanego elementu
Aby rozwiązać taki problem, możesz zastosować różne podejścia. Najprostszą metodą jest umieszczenie
przed początkiem tagu script. Możesz także użyć biblioteki JavaScript, takiej jak jQuery, aby upewnić się, że DOM jest najpierw ładowany, zanim będzie można uzyskać do niego dostęp.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
</body>
</html>
Oparte na składni
Błędy składniowe mają miejsce, gdy interpreter JavaScript nie wykona kodu niepoprawnego składniowo. Jeśli podczas tworzenia aplikacji interpreter zauważy tokeny niezgodne ze standardową składnią języka programowania JavaScript, zgłosi błąd. Według badania JavaScript bug report, takie błędy odpowiadają za 12% wszystkich błędów w języku.
Błędy gramatyczne, takie jak brakujące nawiasy lub niedopasowane nawiasy, są głównymi przyczynami błędów składniowych w JavaScript.
Na przykład, gdy musisz użyć instrukcji warunkowych, aby odnieść się do wielu warunków, możesz nie podać wymaganych nawiasów, co prowadzi do błędów składniowych.
Spójrzmy na następujący przykład.
if((x > y) && (y < 77) {
//more code here
}
Tak, brakuje ostatniego nawiasu instrukcji warunkowej. Czy zauważyłeś błąd w powyższym kodzie?
Poprawmy to.
if ((x > y) && (y < 77)) {
//more code here
}
Aby uniknąć takich błędów składniowych, powinieneś poświęcić czas na naukę reguł gramatycznych języka programowania JavaScript. Dzięki rozległej praktyce kodowania możesz łatwo wykryć błędy gramatyczne i uniknąć wysyłania ich wraz z tworzoną aplikacją.
Niewłaściwe użycie niezdefiniowanych/pustych słów kluczowych
Niektórzy programiści JavaScript nie wiedzą, jak poprawnie używać słów kluczowych undefined i null. W rzeczywistości badanie wykazało, że niewłaściwe użycie słów kluczowych odpowiada za 5% wszystkich błędów JavaScript.
Słowo kluczowe null to wartość przypisania, która jest zwykle przypisywana do zmiennej w celu oznaczenia nieistniejącej wartości. Co zaskakujące, null jest również obiektem JavaScript.
Oto przykład:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
Z drugiej strony undefined wskazuje, że zmienna lub jakakolwiek inna właściwość, która została już zadeklarowana, nie ma przypisanej wartości. Może to również oznaczać, że nic nie zostało zadeklarowane. undefined jest typem samego siebie.
Oto przykład:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Co ciekawe, jeśli operator równości i operator tożsamości są używane do porównywania słów kluczowych null i undefined, ten drugi nie uważa ich za równe.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Dlatego znajomość prawidłowego użycia słów kluczowych null i undefined może pomóc w uniknięciu błędów w programach JavaScript.
Niezdefiniowane metody
Inną częstą przyczyną błędów w JavaScript jest wywołanie metody bez podania jej wcześniejszej definicji. Naukowcy z UBC odkryli, że ten błąd prowadzi do 4% wszystkich błędów JavaScript.
Oto przykład:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Oto błąd widoczny w konsoli programisty Chrome:
Powyższy błąd występuje, ponieważ wywołana funkcja speakNow() nie została zdefiniowana w kodzie JavaScript.
Niewłaściwe użycie instrukcji return
W języku JavaScript instrukcja return służy do zatrzymania działania funkcji, aby można było wyświetlić jej wartość. W przypadku błędnego użycia instrukcja return może pogorszyć optymalną wydajność aplikacji. Według badania nieprawidłowe użycie instrukcji return prowadzi do 2% wszystkich błędów w aplikacjach JavaScript.
Na przykład, niektórzy programiści JavaScript zazwyczaj popełniają błąd polegający na nieprawidłowym łamaniu instrukcji return.
Chociaż możesz podzielić instrukcję JavaScript na dwie linie i nadal uzyskać wymagane dane wyjściowe, przerwanie instrukcji return prowadzi do katastrofy w Twojej aplikacji.
Oto przykład:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Po uruchomieniu powyższego kodu w konsoli programisty Chrome pojawia się niezdefiniowany błąd:
Dlatego należy zrezygnować z łamania instrukcji return w kodzie JavaScript.
Wniosek
Język programowania JavaScript po stronie klienta zapewnia doskonałe, rozbudowane możliwości zasilania funkcjonalności nowoczesnych aplikacji internetowych. Jeśli jednak nie rozumiesz dziwactw, które sprawiają, że język działa, wydajność twoich aplikacji może zostać sparaliżowana.
Ponadto, programiści JavaScriptu wymagają wszechstronnych narzędzi do rozwiązywania problemów z wydajnością swoich aplikacji i szybkiego wykrywania błędów.
Dlatego dzięki kompleksowemu zestawowi narzędzi do testowania możesz z pewnością zidentyfikować anomalie, które pogarszają wydajność Twojej witryny. To jest to, czego potrzebujesz, aby poprawić wydajność swojej witryny i osiągnąć optymalne wrażenia użytkownika.
Szczęśliwego bezbłędnego programowania JavaScript!
Artykuł napisany przez Alfricka Opidi