JavaScript (JS) е вездесъщ, гъвкав и широко популярен език за програмиране – въпреки че също е предразположен към грешки и бъгове, които карат повечето разработчици да се мръщят и да се страхуват.
JS се използва широко за захранване на потребителската интерактивност от страната на клиента на повечето уеб приложения. Без JavaScript може би нещата в мрежата биха били безжизнени и нестимулиращи. Независимо от това, приливите и отливите на езика понякога карат разработчиците да имат любов-омраза към него.
Грешките в JavaScript карат приложенията да произвеждат неочаквани резултати и да навредят на потребителското изживяване. Проучване на Университета на Британска Колумбия (UBC) се опита да открие основните причини и въздействието на грешките и грешките в JavaScript. Резултатите от проучването разкриха някои общи модели, които влошават работата на JS програмите.
Ето кръгова диаграма, показваща какво са открили изследователите:
В тази публикация в блога ще илюстрираме някои от често срещаните причини за грешки в JavaScript, подчертани в проучването (плюс други, с които се сблъскваме ежедневно) и как да направите вашите приложения по-малко податливи на грешки.
Съдържание
Свързани с DOM
Обектният модел на документа (DOM) играе жизненоважна роля в интерактивността на уебсайтовете. DOM интерфейсът позволява манипулирането на съдържанието, стила и структурата на уеб страница. Правенето на обикновени HTML уеб страници интерактивни – или манипулирането на DOM – е причината, поради която езикът за програмиране JavaScript беше пуснат.
Така че, дори с въвеждането на backend JavaScript технологии като Node.js, работата с DOM все още представлява голяма част от това, което езикът прави. Следователно DOM е важен начин за въвеждане на бъгове и грешки в приложенията на JavaScript.
Не е изненада, че проучването на доклада за грешка в JavaScript установи, че проблемите, свързани с DOM, са отговорни за повечето от недостатъците, при 68%.
Например, някои програмисти на JavaScript често правят грешката да препращат към DOM елемент, преди да е зареден, което води до грешки в кода.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Ако кодът по-горе се изпълнява в браузъра Chrome, той ще изведе грешка, която може да се види в конзолата за разработчици:
Грешката възниква, защото JavaScript кодът обикновено се изпълнява според реда, в който се появява в документа. Като такъв, браузърът не е наясно с посочения
За да разрешите такъв проблем, можете да използвате различни подходи. Най-простият метод е да поставите
преди началото на тага на скрипта. Можете също да използвате JavaScript библиотека като jQuery, за да сте сигурни, че DOM се зарежда първо, преди да може да бъде достъпен.
<!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>
Базиран на синтаксис
Синтактични грешки възникват, когато интерпретаторът на JavaScript не успее да изпълни синтактично неправилен код. Ако създавате приложение и интерпретаторът наблюдава токени, които не съвпадат със стандартния синтаксис на езика за програмиране JavaScript, той ще изведе грешка. Според проучването на доклада за грешка в JavaScript, такива грешки са отговорни за 12% от всички грешки в езика.
Граматичните грешки, като липсващи скоби или несъответстващи скоби, са основните причини за синтактични грешки в JavaScript.
Например, когато трябва да използвате условни изрази за справяне с множество условия, може да пропуснете да предоставите скобите, както се изисква, което води до грешки в синтаксиса.
Нека разгледаме следния пример.
if((x > y) && (y < 77) {
//more code here
}
Да, последната скоба на условния оператор липсва. Забелязахте ли грешката с горния код?
Нека го коригираме.
if ((x > y) && (y < 77)) {
//more code here
}
За да избегнете подобни синтактични грешки, трябва да отделите време за изучаване на граматическите правила на езика за програмиране JavaScript. С широка практика на кодиране можете лесно да забележите граматическите грешки и да избегнете изпращането им с разработеното от вас приложение.
Неправилно използване на недефинирани/нулеви ключови думи
Някои разработчици на JavaScript не знаят как да използват правилно ключовите думи undefined и null. Всъщност проучването съобщава, че неправилното използване на ключовите думи представлява 5% от всички грешки в JavaScript.
Ключовата дума null е стойност за присвояване, която обикновено се присвоява на променлива, за да обозначи несъществуваща стойност. Изненадващо, null също е JavaScript обект.
Ето един пример:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
От друга страна, undefined показва, че на променлива или друго свойство, което вече е декларирано, липсва присвоена стойност. Може също така да означава, че нищо не е декларирано. undefined е тип сам по себе си.
Ето един пример:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Интересното е, че ако операторът за равенство и операторът за идентичност се използват за сравняване на нулевите и недефинираните ключови думи, последният не ги счита за равни.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Следователно познаването на правилното използване на нулевите и недефинираните ключови думи може да ви помогне да избегнете въвеждането на грешки във вашите JavaScript програми.
Недефинирани методи
Друга често срещана причина за грешки в JavaScript е извикването на метод без предоставяне на неговата предварителна дефиниция. Изследователите на UBC установиха, че тази грешка води до 4% от всички грешки в JavaScript.
Ето един пример:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Ето грешката, която се вижда в конзолата за разработчици на Chrome:
Горната грешка възниква, защото извиканата функция, speakNow(), не е дефинирана в кода на JavaScript.
Неправилно използване на оператора за връщане
В JavaScript операторът return се използва за спиране на изпълнението на функция, така че нейната стойност да може да бъде изведена. Ако се използва погрешно, командата за връщане може да наруши оптималната производителност на приложенията. Според проучването неправилното използване на оператора return води до 2% от всички грешки в приложенията на JavaScript.
Например, някои програмисти на JavaScript обикновено правят грешката да нарушават оператора return неправилно.
Въпреки че можете да разбиете израз на JavaScript на два реда и пак да получите необходимия изход, нарушаването на израза за връщане е причина за бедствие във вашето приложение.
Ето един пример:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Когато горният код се изпълни, в конзолата за разработчици на Chrome се вижда недефинирана грешка:
Следователно трябва да се въздържате от нарушаване на операторите за връщане във вашия JavaScript код.
Заключение
Езикът за програмиране JavaScript от страна на клиента идва с отлични обширни възможности за захранване на функционалностите на съвременните уеб приложения. Ако обаче не разбирате странностите, които карат езика да работи, производителността на вашите приложения може да бъде осакатена.
Освен това, Разработчици на JavaScript изискват многофункционални инструменти за отстраняване на проблеми с производителността на техните приложения и бързо откриване на бъгове и грешки.
Следователно, с изчерпателен набор от инструменти за тестване, можете уверено да идентифицирате аномалиите, които влошават ефективността на вашия уебсайт. Това е, от което се нуждаете, за да подобрите ефективността на вашия сайт и да постигнете оптимално потребителско изживяване.
Честито програмиране на JavaScript без грешки!
Статия, написана от Алфрик Опиди