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