Какие антипаттерны существуют для JavaScript? [закрыто]

Question

Проблема: Неудачные практики в JavaScript

У меня возник следующий вопрос: я заметил, что понять, чего не стоит делать, часто сложнее, чем разобраться в том, что необходимо делать правильно.

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

Итак, когда речь идет о JavaScript, какие вещи следует избегать и почему?

Я нахожу множество подобных примеров для Java, но поскольку контекст использования JavaScript (в браузере) значительно отличается от контекста Java, мне было бы интересно узнать, какие советы относительно неудачных практик в JavaScript могут быть даны.

Answer 1

Вопрос: Какие распространенные ошибки в JavaScript я должен избегать в своем коде?

Ответ:

Существует множество распространенных ошибок, которые могут углубить проблемы при разработке на JavaScript. Вот некоторые из них:

Проблемы с языком:

Загрязнение глобального пространства имен: Создание большого количества переменных в глобальном контексте может привести к конфликтам и непредсказуемому поведению.
Привязка обработчиков событий в виде foo.onclick = myFunc: Этот способ не расширяемый. Лучше использовать addEventListener, чтобы обеспечить более гибкое управление событиями.
Использование eval практически в любом контексте, не связанном с JSON: Это может привести к проблемам с безопасностью и производительностью.
Почти любое использование document.write: Лучше использовать методы DOM, такие как document.createElement, для динамического изменения содержимого страницы.
Создание прототипов на объекте Object: Это может привести к серьезным проблемам (BOOM!).
Частые конкатенации строк с помощью +: Создание массива и последующее его объединение с помощью join() будет намного эффективнее.
Ссылаясь на несуществующую константу undefined: Лучше избегать такой практики.

Дизайн/Развертывание:

Отсутствие поддержки noscript: Это может негативно сказаться на доступности вашего приложения.
Неупаковка кода в единый ресурс: Разделение кода на множество файлов может замедлить загрузку.
Размещение инлайновых (т.е. внутри <body>) скриптов в верхней части тела: Это блокирует загрузку страницы.

Специфика Ajax:

Неинформирование пользователя о начале, окончании или ошибке запроса: Важно предоставлять обратную связь для улучшения пользовательского опыта.
Polling: Это неэффективно; рассмотрите использование WebSocket или Server-Sent Events.
Передача и парсинг XML вместо JSON или HTML, когда это уместно: JSON обычно легче и быстрее обрабатывается.

Большинство из этих рекомендаций были заимствованы из книги "Learning JavaScript Design" Эдди Осмати: ссылка на книгу.

редактировано: Думаю, что я продолжаю вспоминать еще больше!

Answer 2

Кроме уже упомянутых...

Использование конструкции for..in для итерации по массивам

(итерирует как по методам массива, так и по индексам)

Использование JavaScript встраиваемым образом, например, <body onload="doThis();">

(неинфраструктурно и не позволяет добавить несколько слушателей событий)

Использование конструктора 'Function()'

(плохо по тем же причинам, что и eval())

Передача строк вместо функций в setTimeout или setInterval

(также использует eval() внутренне)

Полагание на неявные операторы, не используя точки с запятой

(плохая привычка, которая может привести к неожиданному поведению)

Использование /* .. */ для блокировки строк кода

(может вмешиваться в литералы регулярных выражений, например: /* /.*/ */)

&lt;evangelism&gt;

И, конечно, не использовать Prototype 😉 </evangelism>

Answer 3

Вот несколько вещей, которые приходят мне на ум. Я обновлю этот список, когда вспомню что-то еще.

Не загрязняйте глобальное пространство имен. Организуйте код в объекты;
Не опускайте 'var' при объявлении переменных. Это может загрязнить глобальное пространство имен и привести к проблемам с другими скриптами.

Answer 4

В данном примере конструкция with используется для упрощения доступа к свойствам объекта. В частности, код:

with (document.forms["mainForm"].elements) {
    input1.value = "junk";
    input2.value = "junk"; 
}

позволяет явно не указывать document.forms["mainForm"].elements перед каждой операцией. Вместо этого, внутри блока with, вы можете обращаться к элементам формы, таким как input1 и input2, напрямую. Это делает код более компактным и удобочитаемым.

Однако стоит учитывать, что использование with может привести к снижению читаемости и трудностям с отладкой кода, так как оно создает новую область видимости. В современном JavaScript (ES5 и выше) использование конструкции with считается плохой практикой и может быть запрещено в строгом режиме. Вместо этого рекомендуется явно ссылаться на объект или использовать деструктуризацию для улучшения читаемости кода.

Например, можно написать так:

const elements = document.forms["mainForm"].elements;
elements.input1.value = "junk";
elements.input2.value = "junk";

Таким образом, вы получите тот же функционал, но с большей прозрачностью.

Answer 5

Использование document.all в вашем коде не рекомендуется, за исключением случаев, когда это необходимо для специального кода, направленного на преодоление ошибок Internet Explorer. Например, вы можете использовать его в сочетании с document.getElementById() для решения специфичных проблем в IE, но в остальных случаях лучше избегать document.all.

Какие антипаттерны существуют для JavaScript? [закрыто]

Проблема: Неудачные практики в JavaScript

5 ответ(ов)

Проблемы с языком:

Дизайн/Развертывание:

Специфика Ajax:

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных