Как лучше переписать JS используя Best Practices?

Question

[yanis_kondakov]

Здравствуйте. Изучаю JS. Написал такой код codepen.io/yanisKondakov/pen/qajapK

Буду благодарен, если подскажете, какие ошибки допущены и как лучше написать.

Comments

[riot26]

Слишком много комментариев в коде. Код должен быть понятным и без них. Читать: www.ozon.ru/context/detail/id/21916535

[yanis_kondakov]

riot26: спасибо. Что-нибудь еще, кроме комментариев, бросается в глаза?

[riot26]

yanis_kondakov: Кода слишком мало, чтобы что-то анализировать. Напишите что-то более обширное: кредитный калькулятор, трекер времени.
Много непонятных с первого взгляда штук типа str.substr(currentTag.length + 1). Их надо выносить в переменные и давать переменным осмысленное имя. Прочитайте книжку, там много моментов описано. По JS ещё советую Херман Д. "Сила Javascript".

[Алексей Немиро]

yanis_kondakov: пробелы :-)

for ( var i = 0...
if ( ~localStorage.key( i ).split("*")...

и их отсутствие:

$('#htApp input').autocomplete({...
$('#htApp button').on('click',function() {...

Кавычки разные:

$('#htApp input')
var currentTag = "";

Еще один мелкий косяк в стилистике:

if (e.keyCode != 13) 
    return;

Без скобок плохо читабельно. Либо со скобками, либо в одну строку.

Разбивка на массив:

localStorage.key( i ).split("*")

Делается больше одного раза. Лучше один раз сделать split в переменную и работать с ней. Будет на пару долей секунд работать быстрее :-)

$('#htApp input').autocomplete({

Не уверен, что это уместно в $('#htApp input').keyup.
Проблем с этим нет? В плане переинициализации autocomplete при нажатии клавиш в текстовом поле.

Комментариев, да, многовато :-) Такое количество комментариев обычно для обучения используется. В реальных условиях код так подробно не комментируется.

В остальном, код как код.

По объявлению переменных, возможно будет полезным: let-const.

[yanis_kondakov]

Алексей Немиро спасибо. В дальнейшем буду следить за этим.
По поводу $('#htApp input').keyup.. Все работает отлично. Может есть конкретный пример, где возможно появление проблемы?

[yanis_kondakov]

riot26: кода мало, но думаю на некоторые моменты уже сейчас можно обратить внимание и что-то улучшить. Книжку прочитаю, спасибо!

[Алексей Немиро]

yanis_kondakov: при каждом keyup происходит переинициализация autocomplete, это само по себе вызывает опасения :-)

Я смотрю, вы в autocomplete отдаете только то, что он должен выводить, по сути дублируя механизмы фильтрации данных autocomplete (он должен уметь это делать сам). Вы можете инициализировать autocomplete один раз при загрузке страницы и скормить ему все что есть в localStorage. Тогда обработчик $('#htApp input').keyup будет не нужен.

[yanis_kondakov]

Алексей Немиро: Да, я понял Вашу идею. Дело в том, что в localStorage при вводе разных значений с одинаковыми ключами, сохраняется только одно (последнее). Чтобы этого не происходило, я добавляю одинаковым ключам *№n" (где n - кол-во повторений ключа). А потом, при формировании массива для автокомплита, удаляю *№n".

По Вашей идее можно передать в autocomplete массив, не содержащий *№n", полностью. И думаю в этом есть смысл. Спасибо.

[yanis_kondakov]

Получилось так codepen.io/yanisKondakov/pen/qajapK?editors=1111