Не так давно мы с вами подготовили поле для решения задачи о ферзях. В этой статье я хочу затронуть вопросы удобства использования приложения, а также вопросы производительности и качества полученного кода.
Как вы могли заметить обновление размеров шахматного поля происходит не моментально после ввода нового значения в текстовое поле. Это происходит потому, что мы использовали binding value, который в свою очередь использует событие onChange. Срабатывание данного события происходит в большинстве случаев при потере фокуса. Как правило, пользователю удобно получать результат непосредственно вместе с вводом данных если это возможно и целесообразно. Примерами такого взаимодействия служит поле для ввода пароля на форме регистрации. Замечали ли вы, что при вводе пароля подсказки о его сложности иногда отмечаются зелёными галочками, а иногда индикатор сложности пароля переходит из красного в жёлтый и зелёный. Для обеспечения таких возможностей DOM элементы поддерживают события keyup, keydown и keypress. Обработчики данных событий срабатывают по нажатию, отпусканию клавиш. Событие keypress срабатывает после keydown для символьных клавиш, это, в частности, позволяет создавать обработчики для комбинаций, таких как Ctrl + C.
Библиотека knockout предоставляет две основные возможности для решения этой задачи, а именно binding value и дополнительно к нему valueUpdate с возможными значениями input, keyup, keypress и afterkeydown. Для сокращения наиболее часто используемой комбинации существует binding textInput.
Многие из вас могли отметить что обработка события непосредственно сразу после нажатия каждой клавиши может вызвать дополнительные проблемы производительности. Для ограничения количества срабатываний в единицу времени используется extender: throttle. При его использовании значение расширяемого поля будет обновлено только по истечении указанного времени после последней попытки записи нового значений.
Вторым улучшением нашего шахматного поле будет сокращение нагрузки при отрисовке страницы. В прошлом примере мы использовали псевдоклассы :nth-child(odd) и :nth-child(even), вычисления которых, конечно не самая сложная задач, но тем не менее в нашем примере мы можем упростить эту задачу для бразера, так как мы сами знаем какая ячейка по счёту чётная или нечётная. Для этого добавим в модель строки и модель ячейки поле isEven значение, которого легко вычисляются так как при создании той или иной ячейки нам известен её индекс в массиве. Общий пример для описанных улучшений можно видеть ниже.
Следует поговорить ещё об одном улучшении которое не влияет на конечный результат в браузере но существенно упрощает разработку стилей веб-страницы. Это CSS-препроцессоры, такие как LESS, SASS, SCSS. Задача, которую решают препроцессоры любого языка это добавление синтаксического сахара в исходный язык с целью облегчить написание того или иного кода. Так CSS-препроцессоры сокращают количество кода для описания стилей для сложных селекторов, добавляют поддержку переменных, чтобы, скажем, переиспользовать один и тот же цвет в нескольких местах и прочие.