Распространенные ошибки JavaScript и способы их устранения

JavaScript критикуют как язык, который довольно сложно отлаживать. Неважно, насколько совершенен код внешнего приложения, часть его функциональности будет нарушена, особенно когда мы приступаем к проверке совместимости в различных браузерах. Ошибки возникают в основном потому, что часто разработчики используют в своих кодах современные Web API или скрипты ECMA 6, которые еще не совместимы с браузерами даже в некоторых наиболее популярных версиях браузеров. В этой статье мы рассмотрим ошибки, с которыми часто сталкиваются разработчики в своих front-end приложениях, и способы их минимизации или избавления от них.

Не пойманная ошибка типа (Uncaught TypeError)

Если вы отлаживаете свой JavaScript-код в Google Chrome, то, возможно, уже несколько раз видели эту ошибку. Она возникает, когда вы вызываете метод или читаете свойство неопределенного объекта.

Хотя эта ошибка может возникать по многим причинам, одной из распространенных является состояние элемента, не инициализированного должным образом при отрисовке компонентов пользовательского интерфейса. Эта проблема может возникнуть не только в JavaScript, но и в приложении, разработанном с использованием React JS или Angular jS. Давайте посмотрим, как это исправить.

Устранение — Состояние должно инициализироваться с использованием разумного значения по умолчанию в конструкторах.

Знаете ли вы, что такое неустановленное значение CSS? Незаданное значение свойства CSS, которое равнозначно «inherit», если свойство наследуется, или «initial», если свойство не наследуется, не имеет начального значения.

Ошибки загрузки и выполнения

Так же, как в Java и C++ есть ошибки компиляции, в JavaScript есть ошибки загрузки. Разработчики не смогут обнаружить заметную ошибку, пока она не будет загружена в браузер. После загрузки ее можно легко обнаружить, когда появляется сообщение об ошибке, показывающее синтаксическую ошибку. Ошибки времени выполнения возникают, когда интерпретатор сталкивается с кодом, который он не может понять. Как ошибки загрузки, так и синтаксические ошибки просты, но могут привести к неожиданной остановке скрипта.

Устранение — При возникновении этих ошибок можно использовать отладчик в браузере, чтобы найти ошибку в коде. Неправильно написанный синтаксис, точка с запятой, пропущенная при наборе текста, обычно вызывают эту ошибку.

Ошибка нулевого объекта в Safari

Это серьезная проблема кросс-браузерной совместимости, обычно связанная с браузером Safari. Часто в Safari возникает ошибка, и в консоли появляется сообщение о том, что null не является объектом. Это происходит, когда метод вызывается на объекте null. Это можно легко проверить в консоли разработчика Safari. Если у вас нет под рукой mac-системы, вы можете попробовать это на LambdaTest. У нас есть более 2000 комбинаций браузеров и операционных систем, включая Mac и Safari, где вы можете проверить свой сайт на совместимость с браузерами.

Null и undefined — это не одно и то же в JavaScript. Null означает, что объект имеет пустое значение. Неопределенная означает переменную, которой не присвоено значение. С помощью оператора строгого равенства можно проверить, что они не равны.

Эта ошибка также возникает, когда разработчик пытается использовать элемент DOM до его загрузки.

Устранение — Слушатель событий является идеальным решением для этого типа ошибок. Он уведомляет разработчика, как только страница готова. Метод init() может использовать элементы DOM после срабатывания слушателя событий.

Также ознакомьтесь с CSS widows orphans Вдовы и сироты CSS в основном являются свойствами, которые позволяют контролировать разрыв линий на страницах или в колонках. Вы определяете количество строк, которые должны быть оставлены до или после разрыва.

Ошибки разбора

Часто, когда в JavaScript используются жестко закодированные значения, во время компиляции код выдает ошибку разбора. Это происходит в основном тогда, когда в коде есть разрывы строк. Компилятор интерпретирует разрывы строк как полутоны в конце строки.

Исправление — всегда используйте круглые скобки и точки с запятой, чтобы облегчить чтение кода и избежать разрыва строк.

(неизвестно): Ошибка сценария

Когда граница домена пересекается не пойманной ошибкой JavaScript, это нарушает кросс-оригинальную политику и приводит к ошибке Script. Не пойманные ошибки — это те, которые не пойманы внутри try-catch и всплывают на обработчике window.onerror. Обычный пример — если ваш JavaScript-код размещен в CDN, любая не пойманная ошибка будет выдаваться как Script error. Это протокол безопасности, встроенный в браузеры для предотвращения передачи данных через домены, что не разрешено в противном случае.

Исправление — Для обработки ошибок всегда следует использовать Try-catch.

Не забудьте нажать и проверить CSS zoom! css-zoom — это нестандартный метод масштабирования содержимого с использованием только CSS, что означает более быстрое время рендеринга и упрощенный код.

TypeError — Свойство не поддерживается объектом

Эта ошибка обычно возникает в Internet Explorer при вызове неопределенного метода. Ее можно сравнить с ошибкой неопределенной функции, возникающей в Chrome. Для веб-приложений, использующих разделение имен JavaScript, эта ошибка встречается довольно часто. IE не может привязать ключевое слово «this» к текущему пространству имен. Например, this.isAwesome() работает корректно во всех браузерах, но вызывает исключение в Chrome.

Исправление — При использовании пространства имен этой ошибки можно избежать, используя в качестве префикса фактическое пространство имен.

TypeError — Cannot Read Length

Эта ошибка возникает в основном в Chrome из-за неопределенного свойства длины переменной. Обычно длина массива определена. Но когда имя переменной массива остается скрытым или массив не инициализирован, возникает эта ошибка.

Исправление — Эта ошибка может быть исправлена двумя способами

  • В операторе, где объявляется функция, следует удалить параметры.

  • Функция должна быть вызвана в объявленном массиве.

Большинство ошибок, которые возникают, когда браузер компилирует JavaScript, являются ошибками неопределенного или нулевого типа. Если разработчик использует строгий компилятор в системе статической проверки, такой как Typescript, этих ошибок можно избежать. Он выдаст предупреждение о том, что тип не определен, но ожидается. Даже если Typescript не используется, можно использовать защитные предложения для проверки неопределенности объектов перед их использованием.

Оцените статью
Procodings.ru
Добавить комментарий