JavaScript (JS) — це всюдисуща, гнучка та широко популярна мова програмування, хоча вона також схильна до помилок і помилок, через які більшість розробників засмучуються та лякаються.
JS широко використовується для покращення взаємодії користувача на стороні клієнта більшості веб-додатків. Можливо, без JavaScript все в Інтернеті було б млявим і нецікавим. Тим не менш, припливи та відпливи мови іноді змушують розробників мати з нею стосунки «любов-ненависть».
Помилки JavaScript призводять до того, що програми дають несподівані результати та шкодять взаємодії з користувачем. Дослідження, проведене Університетом Британської Колумбії (UBC), намагалося з’ясувати основні причини та вплив помилок і помилок JavaScript. Результати дослідження виявили деякі загальні закономірності, які погіршують продуктивність програм JS.
Ось кругова діаграма, яка показує, що з’ясували дослідники:
У цій публікації в блозі ми проілюструємо деякі поширені причини помилок JavaScript, висвітлені в дослідженні (а також інші, з якими ми стикаємося щодня), і те, як зробити ваші програми менш схильними до збоїв.
пов’язані з DOM
Об’єктна модель документа (DOM) відіграє важливу роль в інтерактивності веб-сайтів. Інтерфейс DOM дозволяє маніпулювати вмістом, стилем і структурою веб-сторінки. Зробити звичайні веб-сторінки HTML інтерактивними або маніпулювати DOM — це саме те, чому була випущена мова програмування JavaScript.
Отже, навіть із запровадженням серверних технологій 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.
Неправильне використання оператора return
У JavaScript оператор return використовується для зупинки виконання функції, щоб можна було вивести її значення. Помилкове використання оператора return може погіршити оптимальну продуктивність програм. Згідно з дослідженням, неправильне використання оператора return призводить до 2% усіх помилок у програмах JavaScript.
Наприклад, деякі програмісти JavaScript зазвичай роблять помилку, неправильно порушуючи оператор return.
Хоча ви можете розбити інструкцію JavaScript на два рядки і все одно отримати необхідний результат, порушення інструкції return призведе до катастрофи у вашій програмі.
Ось приклад:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Під час виконання наведеного вище коду на консолі розробника Chrome з’являється невизначена помилка:
Тому вам слід утримуватися від порушення операторів повернення у вашому коді JavaScript.
Висновок
Мова програмування JavaScript на стороні клієнта має чудові широкі можливості для забезпечення функцій сучасних веб-додатків. Однак, якщо ви не розумієте особливості, завдяки яким мова працює, продуктивність ваших програм може бути скалічена.
Крім того, Розробники JavaScript потребують універсальних інструментів для усунення несправностей продуктивності своїх програм і швидкого виявлення помилок.
Тому за допомогою повного набору інструментів тестування ви можете з упевненістю визначити аномалії, які погіршують продуктивність вашого веб-сайту. Це те, що вам потрібно для покращення продуктивності вашого сайту та досягнення оптимальної взаємодії з користувачем.
Щасливого програмування на JavaScript без помилок!
Стаття написана Альфріком Опіді